danilobjr / vercel-gha

vercel deployment using GHA

Deploy a CRA project to Vercel

In this example, a deployment of a regular CRA project is made to Vercel using Github secrets as env vars. Rather than using Vercel's auto-deployment feature to create a deployment for each commit to the main branch, this strategy uses GitHub Actions and Vercel CLI to deploy on whatever event that trigger a workflow.

Get started

1. Create a vercel.json file at the root of your project folder to add Git configuration. Set git.deploymentEnabled to false which will prevent auto-deployments from commits..
2. Then, let’s add the required values from Vercel as secrets in GitHub
3. On your local computer or development environment, install the Vercel CLI and run vercel login
4. Inside your project folder, run vercel link to create a new Vercel project or link to an existing one
5. Navigate to the generated .vercel folder, and open project.json to find the projectID and orgId
6. In GitHub, set VERCEL_PROJECT_ID to your projectID and VERCEL_ORG_ID to your orgID
7. Retrieve your Vercel Access Token and set it as the value of VERCEL_TOKEN
8. Define a Github Action to kick off a deployment based on one of these examples

Deploy pre-built build folder

As you can see in the deploy-static-pre-built-folder-and-create-pr-comment workflow, the application is pre built and then uploaded to Vercel.

To make this work properly, you need to change your project settings in Vercel.

1. Go to you project page in Vercel
2. Click in Settings
3. On the left menu, make sure General is selected
4. Go to Build & Development Settings section
5. Choose Other for Framework Preset
6. Leave Build Command field empty
7. Hit Save button

This will prevent the build from being attempted and serve your content as-is.