Vercel Guide

Installing Vercel into your project

Note

Only one team member needs to do this.

Only one org_id and one project_id Vercel token are required.

See - Adding Vercel tokens to GitHub.

To use Vercel as the deployment service for this project, it needs to be installed into your project folder.

Step 1

cd inside/your/project_folder

inside/your/project_folder: npm i vercel 

# added 97 packages, and audited 148 packages in 18s
#
# 11 packages are looking for funding
#  run `npm fund` for details
#
# found 0 vulnerabilities

inside/your/project_folder: vercel

Vercel CLI 24.0.0
? Set up and deploy “~/inside/your/project_folder”? [Y/n] y
? Which scope do you want to deploy to? name_of_your_github_repo
? Link to existing project? [y/N] n
? What’s your project’s name? project_folder_name
? In which directory is your code located? ./
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N] n
🔗  Linked to name_of_your_github_repo/project_folder_name (created .vercel)
🔍  Inspect: https://vercel.com/name_of_your_github_repo/project_folder_name/A3MAa479CsfwGWD9 [2s]
✅  Production: https://project_folder_name-orcin.vercel.app [copied to clipboard] [13s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/name_of_your_github_repo/project_folder_name/settings

inside/your/project_folder:

Step 2

In your project folder there will be a newly created .vercel folder.

Open the project.json file and take note of the org_id and project_id values. These need to be added to the GitHub repository.

Adding Vercel tokens to GitHub

Step 1

Login to your Vercel account and navigate to the Settings page from your main dashboard.

Click on Tokens on the left.

Click on Create, enter the name of your new token, and select Full access from the Scope dropdown menu to create a new token.

Create New Token

Important

Take note of the new token from the pop up, as it will disappear when you click Done.

Step 2

Go to your GitHub repository and navigate to Settings -> Secrets -> Actions

Click on New repository secret and create the following three Action secrets.

Secret 1:

Name:
- VERCEL_TOKEN

Value:
- Paste in the new token you just created in Vercel

Secret 2:

Name:
- VERCEL_ORG_ID

Value:
- Paste in the `orgId` token from you `project.json` file in the `.vercel` folder

Secret 3:

Name:
- VERCEL_PROJECT_ID

Value:
- Paste in the `projectId` token from you `project.json` file in the `.vercel` folder