Deploying a MERN Project to Vercel: Frontend and Backend Separately

Today, I will give step-by-step instructions on how to deploy a MERN project to Vercel, with the frontend and backend deployed separately.

1. Create Project Directory:

   mkdir mernproject

   cd mernproject

2. Initialize Node Project:

  npm init -y

3.Install Express:

npm install express

4. Install Other Necessary Packages for Backend:

npm install cors body-parser dotenv mongoose

5. Create .env File:

touch .env

• Add your tokens and other sensitive information in this file.

6. install Nodemon:

npm install --save-dev nodemon

• This will automatically restart your project when you save.

7.Create Server File:

touch server.js

8.Set Up React:

npx create-react-app client

• Replace client with the name of the folder you want your frontend to be in. In this case, I use client.

9. Build Frontend:

• when you are done coding and it's time to deploy:
  

cd client

npm build

git add .

git commit -m "Build frontend"

git push origin main

10. Deploy Frontend to Vercel:

• If you have already initialized Vercel with GitHub, you will see your project in Vercel.




• Import your project in Vercel.

11.Copy Frontend Link:

• Copy the link generated by Vercel.

12 Update Backend:

app.use(

  cors({

    origin: 'frontend link',

  })

);

13.Deploy Backend to Vercel:

• At the root of your project, create a vercel.json file and add the following code inside:
  

{

  "version": 2,

  "builds": [{ "src": "server.js", "use": "@vercel/node" }],

  "routes": [{ "src": "/(.*)", "dest": "server.js" }]

}

• This will tell Vercel the entry point of your project. If the entry point is not server.js, replace server.js with the entry point of your server.




• Create a .gitignore file:
  
  

touch .gitignore

• Add node_modules, .env, and frontend-folder to .gitignore.




• Ensure your frontend folder is in .gitignore because you don't need to deploy that again.

14. Push to GitHub and Upload to Vercel:

• Push your folder to GitHub and upload to Vercel.

15. Set Environment Variables in Vercel:

• Go to your project directory in Vercel, click on settings, click on environment variables, import your .env file, and save.




• Make sure you're in your imported backend directory after successfully uploading before uploading the variables.

After these steps, your project will work perfectly as it does in development mode.