Blog Post
Quick MERN Stack Deployment Guide: Heroku & Netlify 🌐
Ready to get your MERN stack project live? Follow this step-by-step guide to deploy your backend on Heroku and your frontend on Netlify.
💾 Backend Deployment with Heroku:
Download and install the Heroku CLI for your operating system.
In your backend root directory, create a Procfile to specify the start script.
Install dotenv in both backend and frontend directories using npm install dotenv. Add a .env file in your backend root with environment variables like MONGO_URI and PORT.
In your backend root, run heroku create. If not logged in, you will be prompted to log in. Then run the command again to initialize.
Go to Heroku settings, and under Config Vars, add key-value pairs like the MongoDB URI (e.g., MONGO_URI) from Atlas.
Use Git commands to push your backend to Heroku: git add ., git commit -m "deploy", git push heroku master
Add your custom domain in Heroku and adjust DNS settings for your domain.
- Install Heroku:
- Create a Procfile:
- Environment Setup:
- Heroku Initialization:
- Config Vars:
- Deploy to Heroku:
- Domain Configuration:
🖥 Frontend Deployment with Netlify:
Run npm install netlify-cli -g.
Update fetch statements in your frontend to use environment variables for backend routes.
Add a .env file in the frontend folder with variables like REACT_APP_BACKEND.
Run npm run build to rebuild your frontend project if necessary.
Navigate to your frontend directory and use netlify deploy. Follow the prompts, and when asked to specify the build folder, choose 'Yes' to create a new site and set the build folder to ./build.
- Install Netlify CLI:
- Adjust Frontend Code:
- Environment Variables:
- Build Frontend:
- Deploy to Netlify:
✅ Congratulations! Your MERN stack application is now live. Remember, DNS settings can take 48-72 hours to fully propagate ⏱.