Back end: Vercel hosting

Vercel (opens new window) is a (free) webhosting service for dynamic websites. It makes it super easy for developers to deploy and host a web application.

Similarly to Netlify, Vercel has built-in DNS management and free SSL certificates and you can fully automate your deployment process with GitHub. Vercel can also continuously monitor your (main) branch and deploy a new version every time this branch is changed.

Another similarity is that Vercel can't monitor your project automatically so we will implement another GitHub actions workaround.

For your personal projects, you can simply set up a connection to the GitHub project and let it monitor your main branch.

Setting up Vercel

Let's create a new Vercel project.

1. Go to vercel.com (opens new window) and Sign up with your GitHub account
   When asked for, choose Hobby as plan type.
   
   Next, choose 'Continue with GitHub'.
   

2. In the left menu, click on Projects
   

3. At the top right, click on Add New... and next on Project
   

4. In the Import Git Repository section, look for your group's repository. You can look for it by name using the search bar. If you can not find it, verify that your account is shown besides the search bar. Create a new project by clicking on Import behind the project's name.
   

5. Give your Vercel project the name of your Full Stack project's back-end repository in lowercase letters
   

6. Click the Deploy button. Wait until the deployment has finished and click on Continue to Dashboard to go back to your projects and you'll see the project has been created.

We now made a project and have the correct settings to build our API. The next steps are to get everything we need to make sure the GitHub actions know where to deploy.

7. Go to your account settings using the ellipsis icon at the bottom left
   

8. Select Tokens in the sidebar

9. Give your token a meaningful name, set the scope to your projects and the expiration to 1 year. Then click Create to create your token.

10. Save your token somewhere to use later when setting up our GitHub actions secrets.

We still need 2 more identifiers to finish setting up. However these are not available on the website of Vercel. We need to find these by using Vercel-CLI. Let's get started!

11. Open your team project in PyCharm
12. Open a terminal and run the command npm i -g vercel, this will install the Vercel-CLI tools on your pc.
13. Run the command vercel.
    1. When asked, log in via GitHub.
       
    2. When asked to set up and deploy your project, type y and press enter.
    3. When asked for the scope, select your projects.
    4. When asked to link to an existing project, type y and press enter.
    5. When asked for which project, select the one you just made and link to it. Type y when asked.
    6. A new folder has been created named .vercel, in this folder is a project.json file.
    7. Open this file, you will need the projectId and orgId later when setting up the secrets.

We now have everything we need to set up our project's GitHub actions.

Set up the GitHub repo

REMARK

Before doing these steps, contact your teacher to give you admin priviledges on your repository. If you don't you will not have the rights necessary to perform these steps.

1. Open up your project's back-end repository on GitHub.
2. Take a look at the file .github/workflows/buildAndDeployOnVercel.yml, this contains the automation of your deploy to Vercel.

3. All steps are explained inside the file but you'll see 3 variables declared in the file:

   • VERCEL_ORG_ID (found in .vercel/project.json in your local project folder)
   • VERCEL_PROJECT_ID (found in .vercel/project.json in your local project folder)
   • VERCEL_TOKEN (you have saved in the previous part)

4. To make sure that not everyone who has access to your site can see your security tokens, we will need to add them to your project secrets.

5. Open your project settings and go to Secrets and variables > Actions
   

6. Go to the Repository secrets section

7. Add your orgId, projectId and Vercel Token to your Repository secrets using the following keys, respectively:

• VERCEL_ORG_ID
• VERCEL_PROJECT_ID
• VERCEL_TOKEN
  

WARNING

Use the names VERCEL_ORG_ID, VERCEL_PROJECT_ID and VERCEL_TOKEN exactly like this because they're referenced to from the workflow file shown in step 2.

8. Done! Next time a pull request is approved and a new commit is pushed to the main branch, your site will automatically be deployed to Vercel.

Be careful

You API now automatically deploys, make sure that every commit you do to the main branch is actually valuable! You do not want to deploy a faulty API.

This API is public so everyone can access it at all times, don't embarrass yourself and only push working code!

Setting the environment variables

Our .env file is not present in our repository as we excluded it using .gitignore. As a result, we still have to add environment variables in our Vercel project.

In the Vercel project, go to the settings. In the menu at the left, select Environment Variables.

As key, create all keys that were used in the .env file previously with their corresponding values. Use the exact same names.

After setting the key-value pairs for the environment variables, they should appear like this:

The next time your project gets deployed (with other words: when your GitHub actions run again), these environment variables will be used and your API should be ready for use. Every time a change is made to the value of an environment variable on Vercel, a deployment should happen for the change to be implemented/committed.

Let's now make sure the security of Vercel doesn't block us from properly using our API. Go to the 'Deployment Protection' and disable Vercel Authentication. Don't forget to save this change.

If you want to find the link of your hosted API, go to the project's home page in Vercel and take the link you can find under 'Domains'.

You can now address your API from Postman, from a front-end or wherever you want.