7-deploy.md

🚀 Step 7 - Deploy your Web application

How to give access to anyone

Table of Contents

• 🎯 Objective
• 🏗 Prerequisites
• 👩‍💻 Just tell me what to do
• 🚀 How to deploy with Vercel
  • The API
    • Create a vercel.json file to configure the api deployment
    • Deploy with the cli
  • The client
• 📦 Suggested node modules
• 🛣️ Related Theme and courses

🎯 Objective

Deploy your server and client application in Production with Vercel...

🏗 Prerequisites

1. Be sure to have a clean working copy.

This means that you should not have any uncommitted local changes.

❯ cd /path/to/workspace/clear-fashion
❯ git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

2. Pull the master branch to update your local with the new remote changes

❯ git remote add upstream git@github.com:92bondstreet/clear-fashion.git
## or ❯ git remote add upstream https://github.com/92bondstreet/clear-fashion
❯ git fetch upstream
❯ git pull upstream master

👩‍💻 Just tell me what to do

1. Create a free Vercel account

2. Deploy your API with Vercel

For instance the server/api.js is deployed to https://server-ashy.vercel.app

3. Update your client codebase to fetch products from your API

const fetchProducts = async (page = 1, size = 12) => {
  try {
    const response = await fetch(
      `https://server-ashy.vercel.app?page=${page}&size=${size}`
    );
    const body = await response.json();

    ....
  } catch (error) {
    ...
  }
};

You probably need to update your codebase.

4. Deploy your client application with Vercel

For instance the client is deployed to https://client-blush-iota.vercel.app/

5. Commit your modification

❯ cd /path/to/workspace/clear-fashion
❯ git add -A && git commit -m "feat(get-product): get a specific product"

(why following a commit message convention?)

6. Complete the spreadsheet file with your API and client application url

7. Commit early, commit often

8. Don't forget to push before the end of the workshop

❯ git push origin master

Note: if you catch an error about authentication, add your ssh to your github profile.

If you need some helps on git commands, read git - the simple guide

🚀 How to deploy with Vercel

The API

Create a vercel.json file to configure the api deployment

{
  "version": 2,
  "builds": [{"src": "*.js", "use": "@now/node"}],
  "routes": [{"src": "/", "dest": "api.js"}]
}

More details with

• Using Express.js with Vercel
• Different ways of configuring your Vercel projects and Vercel CLI

Deploy with the cli

❯ cd /path/to/workspace/clear-fashion/server
❯ vercel --prod

You could check your deployment with Insomnia.

The client

❯ cd /path/to/workspace/clear-fashion/client
❯ vercel --prod

📦 Suggested node modules

• paginate-info - A simple module to paginate your arrays and calculate limit and offset

🛣️ Related Theme and courses

• 📡 Theme 3 - About Serverless