Deployment and DevOps for MERN Applications

Before deployment, your application must be production-ready.

1. Production Folder Structure

A common structure:

mern-app/
│
├── backend/
│   ├── server.js
│   ├── routes/
│   ├── models/
│   ├── controllers/
│   └── .env
│
├── frontend/
│   ├── src/
│   ├── package.json
│   └── vite.config.js / build/
│
└── README.md

2. Production Build for React

React must be converted into static files.

For Vite:

npm run build

For Create React App:

npm run build

This generates optimized static files (dist/ or build/).

3. Backend Configuration for Production

• Enable compression
• Disable unnecessary logs
• Handle errors properly
• Serve frontend (optional)

if (process.env.NODE_ENV === "production") {
  console.log("Running in production mode");
}

4. Security Checklist

• Use HTTPS
• Secure MongoDB credentials
• Enable CORS properly
• Hash passwords
• Use environment variables
• Validate inputs

Option 1: Deploying Backend on Heroku

Steps:

1. Create Heroku account
2. Install Heroku CLI
3. Login:

heroku login

4. Create app:

heroku create my-mern-backend

5. Set environment variables:

heroku config:set MONGO_URI=your_uri JWT_SECRET=secret

6. Push code:

git push heroku main

Heroku automatically:

• Installs dependencies
• Runs npm start
• Hosts API

Option 2: Deploying Backend on AWS (EC2)

Steps:

1. Launch EC2 instance (Ubuntu)
2. Install Node.js, Git, PM2
3. Clone project
4. Install dependencies
5. Start server using PM2

pm2 start server.js --name backend
pm2 save

Advantages:

• Full control
• Highly scalable
• Production-grade

Option 3: Backend on Render / Railway (Modern Alternative)

• GitHub-based deployment
• Auto-build and auto-deploy
• Easier than AWS

Deploying React Frontend on Netlify

Steps:

1. Push frontend to GitHub
2. Connect repo to Netlify
3. Set:
   • Build command: npm run build
   • Publish directory: dist or build

Netlify handles:

• CDN
• HTTPS
• Auto-deploy on git push

Deploying React Frontend on Vercel

Steps:

1. Connect GitHub repo
2. Select framework (React / Vite)
3. Deploy

Vercel features:

• Fast global CDN
• Serverless functions
• Preview deployments

Frontend-Backend Connection

Frontend API calls should use production backend URL:

const API_URL = import.meta.env.VITE_API_URL;

Why Environment Variables?

Environment variables store sensitive or environment-specific data:

• Database URLs
• API keys
• Secrets
• Ports

They prevent:

• Hardcoding secrets
• Security leaks

Backend (.env)

PORT=5000
MONGO_URI=mongodb+srv://...
JWT_SECRET=supersecret
NODE_ENV=production

Load using:

import dotenv from "dotenv";
dotenv.config();

Frontend Environment Variables

For Vite:

VITE_API_URL=https://api.example.com

Access:

import.meta.env.VITE_API_URL

Environment-Specific Config

• .env.development
• .env.production

CI/CD automates:

• Testing
• Building
• Deploying applications

CI (Continuous Integration)

• Code pushed to repo
• Tests run automatically
• Build validated

CD (Continuous Deployment)

• Successful build auto-deployed
• Minimal human intervention

Tools Commonly Used

• GitHub Actions
• GitLab CI/CD
• Jenkins
• CircleCI

Example: GitHub Actions CI/CD Pipeline

Create:

.github/workflows/deploy.yml

name: MERN CI/CD Pipeline

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install backend deps
        run: |
          cd backend
          npm install

      - name: Run tests
        run: npm test || echo "No tests"

      - name: Build frontend
        run: |
          cd frontend
          npm install
          npm run build

1. Developer pushes code
2. CI runs tests
3. Build created
4. App deployed to cloud
5. Users see updates instantly

Important for DevOps:

• Logs (Winston, Morgan)
• Error tracking (Sentry)
• Health checks
• Performance metrics

• Use Git branches
• Automate deployments
• Use secrets managers
• Enable rollbacks
• Monitor uptime
• Backup databases
• Document deployment steps

• Hardcoded API URLs
• Missing environment variables
• Improper CORS configuration
• No error logging
• Exposing secrets in frontend

• Production deployment requires preparation and security
• Backend can be deployed on Heroku, AWS, Render, etc.
• Frontend is best hosted on Netlify or Vercel
• Environment variables protect sensitive data
• CI/CD automates build and deployment
• DevOps ensures reliability, scalability, and maintainability