Step 1: Create a Vercel account
Go to Vercel and sign in with the cloud provider that you selected to host your code (in this case GitHub). If you don't have any applications hosted on Vercel you will see an empty dashboard where you can import your project.
Step 2: Import repository to Vercel
Click on the "Create a New Project" button (shown above) to start with setting up your application. You will then see a list of your repositories that can be imported to Vercel.
If you don't see a list of repositories you first need to authorize Vercel to access your repos.
Click on the blue "Import" button next to the repository to start importing it to Vercel.
Step 3: Configure your project
After clicking "Import" you will be navigated to the project configuration page. On this page you can configure various settings for your project such as project name, JavaScript framework, and custom build commands. These settings are automatically detected by Vercel, but you have the option to change it according to your preference. For simplicity's sake, leave the default values as is.
You are also able to configure environment variables for your project. These values are automatically encrypted by Vercel for safe storage. Add all the required environment variables for this boilerplate. After you configured your project settings and environment variables you can click the blue "Deploy" button at the bottom of the page. This will start the deployment of your application.
Once the deployment has started you will see the build logs being printed on the screen. If there is an issue with your project you will see the error in the logs, otherwise you will see that your project was successfully deployed.
If your deployment was successful you will see a screenshot of your app and you will be able to navigate to the app's Vercel dashboard. Once your deployment is successfully set up, new deployments will be triggered every time you push to the main/master branch or create a PR to that branch.
Step 4: Configure environment variables for different environments
After the initial setup, your environment variables will be the same for the production, development, and preview environments. To configure different values for different environments, navigate to the "Environment Variables" page of your application (i.e. https://vercel.com/{username}/{project-name}/settings/environment-variables).
Here you will be able to select which variable should be available for a specific environment. It is also possible to configure a specific branch as a preview environment. All commits to these branches are automatically deployed by Vercel.
That's all you need to host your application on Vercel. Vercel takes care of all the deployments, scaling, and hosting from now on.