Deployment and DevOps for MERN Applications

Introduction to Deployment and DevOps

Deployment is the process of making an application available for users in a production environment.
DevOps is a set of practices that combines development (Dev) and operations (Ops) to automate, monitor, and improve the process of building, testing, deploying, and maintaining applications.

In a MERN stack application:

• MongoDB → database
• Express + Node.js → backend API
• React → frontend UI

Deployment involves hosting these components securely, efficiently, and reliably.

---

Preparing the MERN Application for Production

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

---

Deploying the Backend on Cloud Platforms

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 the Frontend on Cloud Platforms

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;

---

Environment Variables and Configuration Management

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 (Continuous Integration / Continuous Deployment)

What is CI/CD?

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

---

CI/CD Pipeline for MERN Application

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

---

Automated Deployment Flow

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

---

Monitoring and Logging (Production)

Important for DevOps:

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

---

DevOps Best Practices

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

---

Common Deployment Mistakes

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

---

Summary

• 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