DEV Community

Mohd Suhel
Mohd Suhel

Posted on

🚀 Deploy a MERN Full Stack Website for Free : full guide

Deploying a full-stack MERN (MongoDB, Express.js, React, Node.js) project for free is easier than you think! With Render and Netlify, you can host both backend and frontend at no cost. This guide walks you through setting up the project, deploying it, and connecting the backend and frontend seamlessly.

Project Setup: MERN Stack with Vite React

1. Backend Setup

  1. Create a Backend Folder:

mkdir backend
cd backend

  1. Initialize Node.js:
npm init -y
npm install express mongoose cors dotenv
npm install --save-dev nodemon
Enter fullscreen mode Exit fullscreen mode
  1. Environment Variables (.env): In the backend folder, create a .env file:
PORT=5000
MONGO_URI=your_mongodb_connection_string
Enter fullscreen mode Exit fullscreen mode

2. Frontend Setup with Vite React

  1. Create a Vite React App:
mkdir frontend
cd frontend
npm create vite@latest . --template react
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Environment Variables (.env): Create a .env file in the frontend folder:
VITE_BACKEND_URL=http://localhost:5000
Enter fullscreen mode Exit fullscreen mode

Project Structure

mern-project/  
│  
├── backend/  
│   ├── controllers/        # For handling business logic (e.g., userController.js)  
│   ├── models/             # MongoDB schemas (e.g., User.js)  
│   ├── routes/             # API routes (e.g., userRoutes.js)  
│   ├── .env                # Environment variables  
│   ├── index.js            # Entry point for the backend  
│   ├── package.json        # Backend dependencies  
│   └── README.md           # Backend-specific documentation  
│  
├── frontend/  
│   ├── public/             # Public files (e.g., index.html)  
│   ├── src/  
│   │   ├── components/     # Reusable components (e.g., Header.jsx, Footer.jsx)  
│   │   ├── pages/          # Pages (e.g., Home.jsx, Login.jsx)  
│   │   ├── styles/         # CSS/SCSS files  
│   │   ├── App.jsx         # Main app file  
│   │   ├── main.jsx        # ReactDOM render  
│   │   └── .env            # Frontend environment variables  
│   ├── vite.config.js      # Vite configuration  
│   ├── package.json        # Frontend dependencies  
│   └── README.md           # Frontend-specific documentation  
│  
└── README.md               # Main documentation for the entire project
Enter fullscreen mode Exit fullscreen mode

🌐 Deploying the Backend on Render

1. Push Backend to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/backend-repo.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

2. Deploy on Render:

`Log in to Render.

Create a New Web Service.

Connect your GitHub repository.`

Set the following:

Build Command:

npm install

Enter fullscreen mode Exit fullscreen mode

Start Command:

node index.js
Enter fullscreen mode Exit fullscreen mode

Add environment variables (e.g., MONGO_URI) under Settings > Environment Variables.

3. Copy the Render URL: Once deployed, you’ll get a URL (e.g., https://your-backend.onrender.com).


🌐 Deploying the Frontend on Netlify

1. Build the Frontend:

npm run build
Enter fullscreen mode Exit fullscreen mode

2. Push Frontend to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/frontend-repo.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

3. Deploy on Netlify:

Log in to Netlify.

Create a New Site.

Connect your GitHub repository.

Set:

Build Command:

npm run build
Enter fullscreen mode Exit fullscreen mode

Publish Directory:

dist
Enter fullscreen mode Exit fullscreen mode

🔗 Connecting Frontend and Backend

1. Update the .env file in your frontend folder:

VITE_BACKEND_URL=https://your-backend.onrender.com
Enter fullscreen mode Exit fullscreen mode

2. Rebuild and redeploy the frontend on Netlify:

npm run build
Enter fullscreen mode Exit fullscreen mode

Testing the Application

Open the Netlify URL for your frontend.

Interact with your application and ensure everything works as expected.

Debug any issues using Render logs or browser developer tools.


🎯 Key Tips for a Smooth Deployment

  1. Monitor API Requests: Use tools like Postman to test backend endpoints.

  2. Keep Environment Variables Secure: Avoid hardcoding secrets in your code.

  3. Optimize Build Performance: Use production settings for builds (e.g., NODE_ENV=production).


🙌 Conclusion

With Render and Netlify, deploying a MERN stack project is quick, free, and efficient. Follow this guide to have your project live in no time.

If you found this helpful, drop a comment or share it with your fellow developers!

Have questions or feedback? Let me know!


Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay