Docs/Integrations

Pierre + Vercel

Automatically preview and production deployments for all code changes

How it works

The vercel integration automatically triggers and attaches a preview deployment to all branches and commits. On merge to main, it will automatically trigger production deployment.

Note: To view a preview, click the Vercel Preview link in the sidebar (shown below).

Vercel token

Setting up Vercel

To setup the Pierre Vercel integration, you'll need to create a Vercel project and access token. Follow the instructions below to get started.

1

Install the Vercel CLI

If you haven't already, make sure you have a current Vercel account. Next, we'll use the Vercel CLI to quickly setup a deployable project for your repo.

npm install -g vercel
2

Run the link command from the root of your repo. The link command will take you through creating a new project or linking an existing project to your local repo.

vercel link
3

Grab the project and org IDs

Once you've linked your project, you can grab your project and org IDs from the .vercel/project.json (this should have been created by the link command).

Note: the contents of project.json should look something like

{"projectId":"prj_****","orgId":"team_***"}
4

Create a vercel access token

The vercel recipe requires a Vercel access token to deploy code on your behalf. You can create a new access token by visiting https://vercel.com/account/tokens.

Give your toke a name and be sure to set the expiration date (No expiration is recommended).

Vercel access form

Be sure to copy the token after you create it.

Vercel token

Head over to your repo’s settings page and add the token as a CI secret. It is important that you name the secret VERCEL_ACCESS_TOKEN.

5

Add the vercel recipe

Add @pierre/vercel to your package.json file and add the following file to your .pierre/ci folder.

Note: the VERCEL_ORG_ID and VERCEL_PROJECT_ID are the values you grabbed in step 3.

import { Job } from '@pierre/vercel';

export default Job({
  VERCEL_ORG_ID: 'team_***',
  VERCEL_PROJECT_ID: 'prj_***',
});

If you need any additional help, please reach out to us on Discord!

Joyful code review

Pierre wants you to enjoy your code reviews. So, we built a ~*~NEW~*~ git platform. Join the waitlist to get early access.

Orrr… skip the line! Join our Discord for early access