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
- Create a Backend Folder:
mkdir backend
cd backend
- Initialize Node.js:
npm init -y
npm install express mongoose cors dotenv
npm install --save-dev nodemon
- Environment Variables (.env): In the backend folder, create a .env file:
PORT=5000
MONGO_URI=your_mongodb_connection_string
2. Frontend Setup with Vite React
- Create a Vite React App:
mkdir frontend
cd frontend
npm create vite@latest . --template react
npm install
- Environment Variables (.env): Create a .env file in the frontend folder:
VITE_BACKEND_URL=http://localhost:5000
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
🌐 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
2. Deploy on Render:
`Log in to Render.
Create a New Web Service.
Connect your GitHub repository.`
Set the following:
Build Command:
npm install
Start Command:
node index.js
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
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
3. Deploy on Netlify:
Log in to Netlify.
Create a New Site.
Connect your GitHub repository.
Set:
Build Command:
npm run build
Publish Directory:
dist
🔗 Connecting Frontend and Backend
1. Update the .env file in your frontend folder:
VITE_BACKEND_URL=https://your-backend.onrender.com
2. Rebuild and redeploy the frontend on Netlify:
npm run build
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
Monitor API Requests: Use tools like Postman to test backend endpoints.
Keep Environment Variables Secure: Avoid hardcoding secrets in your code.
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!
Top comments (0)