Deploying on Vercel

First of all, let's deploy our app on Vercel—an all-in-one platform with Global CDN supporting static & JAMstack deployment and Serverless Functions.

1. Create a Repo on GitHub

Firstly, create a new repository to connect Vercel with your codebase. It will allow you to use commits to master as a trigger to deploy.

It can be public or private, Vercel works with either.

Setup repository name, description and other settings

After it's done, make changes in the code, commit and push them into the repo.

git add .
git commit -m "Add app starter files"
git push origin master

2. Create an Account on Vercel

To connect a GitHub repo with Vercel you're going to need to sign up to Vercel. (If you already have an account, you can skip this section.)

Go to a signup page and create an account.

3. Import a Project

When your account is ready, go to a dashboard and find an “Import Project” button.

Vercel dashboard with “Import project” button

Hit that button and select “Import Git Repository” option after.

Then, enter the repository URL and hit “Continue”.

You will be asked by GitHub for permissions. Allow Vercel to read and write access to selected repository.

Then GitHub will redirect you on Vercel back and you will see the import settings screen.

Deployment settings such as build options and environment variables

On this screen you can specify build options and environment variables. For example, if you have a custom build script you can override default npm run build command with your own in the special text field.

Same with the environment variables, if you need to pass a NODE_ENV or some other variables you can do it here.

After you hit “Deploy” you will see congratulations screen with a “Visit” link, which will lead to freshly deployed app on vercel.app domain. Hit this link to open and inspect the current deployment.

Also on dashboard you will be able to see a current production deployment and a list of “Preview deployments”.

The ”Preview deployments“ list will be empty until you create a pull-request to master branch in your repo.

Preview deployments are useful to inspect changes in deployed project live. When you create a new branch, update code, commit and push changes to a repo, create a pull-request from this branch to master.

Vercel-bot will automatically deploy this pull-request to a stage server which you can inspect by a link that Vercel will give you in a comment.

Vercel-bot's comment on pull-request with info about stage deployment

Also, this stage deployment will be displayed in the list of preview deployments in Vercel dashboard.

Back to main page