Vercel

Connect your git repository

After signing up you will be promted to import a git repository. Select the git provider of your project and connect your git account with Vercel.

Configure project settings

As we're working in monorepo, some additional settings are required to make the build process work.

Make sure to set the following settings:

• Build command: pnpm turbo build --filter=web - to build only the web app
• Root directory: apps/web - to make sure Vercel uses the web folder as the root directory (make sure to check Include files outside the root directory in the Build Step option, it will ensure that all packages from your monorepo are included in the build process)

Configure environment variables

Please make sure to set all the environment variables required for the project to work correctly. You can find the list of required environment variables in the .env.example file in the apps/web directory.

The environment variables can be set in the Vercel dashboard under Project Settings > Environment Variables. Make sure to set them for all environments (Production, Preview, and Development) as needed.

Failure to set the environment variables will result in the project not working correctly.

If the build fails, deep dive into the logs to see what is the issue. Our Zod configuration will validate and report any missing environment variables. To find out which environment variables are missing, please check the logs.

Deploy!

Click on the Deploy button to start the deployment process.

That's it! Your app is now deployed to Vercel, congratulations! 🎉

Get Vercel Access Token

To deploy the application, we need to get Vercel access token.

Please, follow this guide to create one.

Install Vercel CLI

We need to install Vercel CLI locally to be able to get required credentials for our Github Actions.

You can install it using following command:

pnpm i -g vercel

Then, login to Vercel using following command:

vercel login

Get credentials

Inside your folder, run following command to create a new project:

vercel link

This will generate a .vercel folder, where you can find project.json file with projectId and orgId.

Configure Github Actions

Inside GitHub, add VERCEL_TOKEN, VERCEL_ORG_ID, and VERCEL_PROJECT_ID as secrets to your repository.

This will allow Github Actions to access your settings and deploy the application to Vercel.

Configure project settings

As we're working in monorepo, some additional settings are required to make the build process work.

Make sure to set the following settings:

• Build command: pnpm turbo build --filter=web - to build only the web app
• Root directory: apps/web - to make sure Vercel uses the web folder as the root directory (make sure to check Include files outside the root directory in the Build Step option, it will ensure that all packages from your monorepo are included in the build process)

Configure environment variables

Please make sure to set all the environment variables required for the project to work correctly. You can find the list of required environment variables in the .env.example file in the apps/web directory.

The environment variables can be set in the Vercel dashboard under Project Settings > Environment Variables. Make sure to set them for all environments (Production, Preview, and Development) as needed.

Failure to set the environment variables will result in the project not working correctly.

If the build fails, deep dive into the logs to see what is the issue. Our Zod configuration will validate and report any missing environment variables. To find out which environment variables are missing, please check the logs.

Deploy!

By default, TurboStarter comes with a Github Actions workflow that can be triggered manually.

The configuration is located in .github/workflows/publish-web.yml, you can easily customize it to your needs, for example to trigger a deployment from main branch.

on:
- workflow_dispatch:
+ push:
+   branches:
+     - main

Then, every time you push to main branch, the workflow will be triggered and the application will be deployed to Vercel.

That's it! Your app is now deployed to Vercel, congratulations! 🎉