How to give access to anyone
Table of Contents
- 🎯 Objective
- 🏗 Prerequisites
- 👩💻 Just tell me what to do
- 🚀 How to deploy with Vercel
- 📦 Suggested node modules
- 🛣️ Related Theme and courses
Deploy your server and client application in Production with Vercel...
- 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
- Pull the
master
branch to update your local with the new remote changes
❯ git remote add upstream [email protected]:92bondstreet/clear-fashion.git
## or ❯ git remote add upstream https://github.com/92bondstreet/clear-fashion
❯ git fetch upstream
❯ git pull upstream master
-
Create a free Vercel account
-
Deploy your API with Vercel
For instance the server/api.js is deployed to https://server-ashy.vercel.app
- 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.
- Deploy your client application with Vercel
For instance the client is deployed to https://client-blush-iota.vercel.app/
- 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?
-
Complete the spreadsheet file with your API and client application url
-
Commit early, commit often
-
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
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
❯ cd /path/to/workspace/clear-fashion/server
❯ vercel --prod
You could check your deployment with Insomnia.
❯ cd /path/to/workspace/clear-fashion/client
❯ vercel --prod
- paginate-info - A simple module to paginate your arrays and calculate limit and offset