Deployment

Why

I don't care that it works on your machine - we are not shipping your machine

We have a software we can run locally - but that does not help anyone. We need to get it to a place where everyone can see/test it. In real life, users. Here Jury members.

Current situation:

• Database is online
• Backend is local
• Frontend is local

The same way we need two servers locally, we'll need two remotely.

Step by step

Create an account on Vercel

One person (ideally the team member that created the repositories - if not, they'll need to have admin access to them) need to create a (free) account on vercel.com. Vercel is what we call a "hosting provider" - a company where you can rent space to deploy an application.

Back End configuration

In order for our project to work on Vercel we need to do some updates:

Create a vercel.json files at the root level of the project with this content:

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.js"
    }
  ]
}

Note that if your code runs from another file than "index.js", you need to update accordingly.

This tells Vercel how to build your project.

Make sure to commit & push this.

Backend settings in Vercel

• Click on "new project" on Vercel, go with "import GitHub project", select the repository there.
• Select "Other" as framework

Confirm, this should start a first build of your project. Once done, you can go to the url to test (using a route you know).

Environment variables

Vercel does not use directly your .env file. This means you'll have to specify all environment variables directly. You can do that on the "Settings" tab. Take each line in your .env file and copy it there - or use the "import .env file" option.

Front End configuration

We need a vercel file too

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

As we have an "SPA" (Single Page Application), we want call to any url to be redirected to our index.html.

Commit & push.

We have another issue there - our front end goes by default to localhost:5000 for the backend. This is not going to work as we'll get a proper URL for our backend.

We need a setting that is different for deployment than for our local configuration - we have a tool for that - .env files & environments variables.

Let's create a .env file and add a new line

VITE_APP_API_URL=http://localhost:5000/

This will allow for the local client to continue to go to the local server, but to have a different configuration for the deployed version.

We'll replace the API reference in our Api.js file

const url = import.meta.env.VITE_APP_API_URL;

const Api = {
  getRecipes: async () => {
  ...

The new line means - "go get that value in an environment variable called VITE_APP_API_URL".

Test that everything still works locally.

Commit & push.

Frontend settings in Vercel

Create a new project, select "vite" as a framework if it's not proposed directly.

Add an environment variable with: VITE_APP_API_URL as key and your server url as value (go check it on Vercel)

Redeploy if needed

Test everything

From now on, each time you push on either project "main" branch, Vercel is going to redeploy