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:

1. Install Heroku: Download and install the Heroku CLI for your operating system.
2. Create a Procfile: In your backend root directory, create a Procfile to specify the start script.
3. Environment Setup: 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.
4. Heroku Initialization: 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.
5. Config Vars: Go to Heroku settings, and under Config Vars, add key-value pairs like the MongoDB URI (e.g., MONGO_URI) from Atlas.
6. Deploy to Heroku: Use Git commands to push your backend to Heroku: git add ., git commit -m "deploy", git push heroku master
7. Domain Configuration: Add your custom domain in Heroku and adjust DNS settings for your domain.

Frontend Deployment with Netlify:

1. Install Netlify CLI: Run npm install netlify-cli -g.
2. Adjust Frontend Code: Update fetch statements in your frontend to use environment variables for backend routes.
3. Environment Variables: Add a .env file in the frontend folder with variables like REACT_APP_BACKEND.
4. Build Frontend: Run npm run build to rebuild your frontend project if necessary.
5. Deploy to Netlify: 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.

Congratulations! Your MERN stack application is now live. Remember, DNS settings can take 48-72 hours to fully propagate .