Skip to content

Commit

Permalink
docs(nextjs): update ignore script documentation (#10505)
Browse files Browse the repository at this point in the history
  • Loading branch information
jaysoo committed May 28, 2022
1 parent 3e45baf commit 6793e14
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 36 deletions.
40 changes: 4 additions & 36 deletions docs/shared/guides/deploy-nextjs-to-vercel.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,44 +36,12 @@ When everything is updated appropriately, for our `tuskdesk` example we would se

One of the core features of Nx is to run code quality checks and builds only for projects that are affected by recent code changes. We can use [Vercel's ignored build step feature](https://vercel.com/docs/platform/projects#ignored-build-step) to only build our application if it is affected.

We are going to achieve this by creating a shell script in our Nx workspace that will be invoked by Vercel.
To build only what's affected, use the `npx nx-ignore <app-name>` command under `Project Settings > Git` on Vercel.

```sh
![Ignore build step](/shared/guides/next-deploy-vercel-3-2.png)

# Name of the app to check. Change this to your application name!
APP=tuskdesk
The `nx-ignore` command uses Nx to detect whether the current commit affects the specified app, and will skip the build if it is not affected.

# Determine version of Nx installed
NX_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@nrwl/workspace'])")
TS_VERSION=$(node -e "console.log(require('./package.json').devDependencies['typescript'])")

# Install @nrwl/workspace in order to run the affected command
npm install -D @nrwl/workspace@$NX_VERSION --prefer-offline
npm install -D typescript@$TS_VERSION --prefer-offline

# Run the affected command, comparing latest commit to the one before that
npx nx affected:apps --plain --base HEAD~1 --head HEAD | grep $APP -q

# Store result of the previous command (grep)
IS_AFFECTED=$?

if [ $IS_AFFECTED -eq 1 ]; then
echo "🛑 - Build cancelled"
exit 0
elif [ $IS_AFFECTED -eq 0 ]; then
echo "✅ - Build can proceed"
exit 1
fi
```

There are a few points worth noting about this script.

Firstly, you might have noticed that we are running `npm install` (feel free to use `yarn add` instead) in this script, as a result running it will take some time. Having said that, it is usually still much faster than installing all dependencies and running the build of your application unconditionally.

Secondly, this script only compares changes introduced in a single latest commit. So if you push multiple new commits - the script will only check if your application is affected by changes in the latest commit. In the future, there should be an environment variable in Vercel to determine what the base for the affected comparison should be.

Once you've saved this script in your Nx workspace, for example in `tools/ignore-vercel-build.sh`, we need to point Vercel to use this script.

![Ignore build step](/shared/guides/next-deploy-vercel-3.png)
## Next steps

Naturally, you can continue on and set any additional Environment Variables etc that may be appropriate for your projects, but we have now covered the key points needed to deploy Next.js projects from Nx workspaces on Vercel!
Binary file added docs/shared/guides/next-deploy-vercel-3-2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/shared/guides/next-deploy-vercel-3.png
Binary file not shown.

1 comment on commit 6793e14

@vercel
Copy link

@vercel vercel bot commented on 6793e14 May 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nx-dev – ./

nx-five.vercel.app
nx-dev-nrwl.vercel.app
nx-dev-git-master-nrwl.vercel.app
nx.dev

Please sign in to comment.