Deploying to Vercel

Prerequisites

• make sure you are on the correct folder (root of the project)
• define {project_slug}: it's the small case project name (ex my-project-slug)
• define {PROJECT_KEY}: it's the capital case project name, replace - with _ (ex MY_PROJECT_KEY)

{/* steps */}

1. Create a new project using Vercel CLI (terminal)

• vercel switch ev-io
• vercel project add {project_slug} --scope ev-io
• vercel project ls --scope ev-io
• open https://vercel.com/ev-io/{project_slug}/settings

2. Configure the project on Vercel dashboard

• copy project id (will be used as {deployed_project_id} in the github action file)
• go to build-and-deployment tab and select nextjs
• define src directory: _projects/{project_slug} (there is no need to start with ./ or /)
• go to environment-variables and add variables (.env) if needed. (ex DATO_CMS_READONLY) link

3. Create github action to deploy the project

• create the project secret using gh secret set {PROJECT_KEY}__VERCEL_PROJECT_ID --body {deployed_project_id'}
• create a new github action file in .github/workflows/deploy-{project_slug}.yml (copy existing one as template)
• Update project name on github action file to {PROJECT_KEY}
• Update project secret name on github action file to {PROJECT_KEY}__VERCEL_PROJECT_ID

4. Deploy the project

• after action is on main use browser to trigger the deployment: https://github.com/envisioning/app/actions

---

Troubleshooting

• if vercel command is not found, you need to install it: npm install -g vercel
• if vercel command is not working, you need to login: vercel login
• if gh command is not working, you need to install it: brew install gh and login: gh auth login

Common Issues

• 404: NOT_FOUND on Vercel deployment: check if nextjs is selected as framework in Vercel dashboard. Remember to click Save button!