A simple step by step guide to deploying an app contained within an NX monorepo to Netlify including affected functionality.
Deploying the App
From the Netlify dashboard, click Add new site:
Import your NX monorepo from your repository:
Give the app a name, and go through to deployment. From my experience Netlify didn’t recognise my project as a Next.js app, so I completed the initial details and clicked deploy (expect this to fail).
From the app overview page, click ‘Site configuration’:
Under Build & Deploy, click Continuous deployment:
Under the Build settings section, click ‘Configure’:
Add the following settings (Where <app-name> is the name of the app you are deploying):
Runtime: Next.js
Base Directory: /
Package Directory: /apps/<app-name>
Build Command: nx run <app-name>:build
Publish Directory: /dist/apps/<app-name>/.next
Build status: ‘Active builds’
Redeploy the app using the clear cache option:
Once the deployment has completed, you should be able to visit the deployed app from your nx monorepo.
Setting up nx affected
One of the great features on nx is the affected command, this is an important feature to use when deploying to Netlify, as you don’t want to waste build minutes building apps which aren’t affected by a change.
To set up nx affected:
Add nx-ignore as a dev dependency on the monorepo:
npm install nx-ignore --save-devIn each app directory in the monorepo, create a ‘netlify.toml’ file:
Add (or edit the file to include) the following:
[build]
# Only proceed with build if there are changes in this app
ignore = "npx nx-ignore <app-name>"Commit the above changes, you’ll see that when a change to an app is pushed, nx-ignore will cancel all apps not affected by the change:
