Using GitHub Actions to Deploy MERN Apps
GitHub Actions is a CI/CD platform that enables automated building, testing, and deployment of your MERN (MongoDB, Express.js, React, Node.js) applications. With a good pipeline, every push or pull request can automatically:
Build your React frontend
Run Node.js API tests
Create production bundles
Deploy to hosting platforms (Render, Railway, Vercel, Netlify, GCP, AWS, Azure, DigitalOcean, etc.)
This tutorial shows how to set up a simple, robust deployment pipeline for a full MERN stack using GitHub Actions.
🧱 1. Typical MERN Deployment Architecture
Most real-world MERN deployments follow these patterns:
Option A — Frontend + Backend on the Same Server
React is compiled into static files
Express serves the React build
Good for VPS-based deployments (Droplets, EC2, GCP VM)
Option B — Frontend and Backend Deployed Separately
React → Netlify/Vercel/S3
Node/Express → Render/Railway/Heroku/GCP Cloud Run
Common for serverless/cloud-native setups
This guide supports both models.
⚙️ 2. Prerequisites
Before creating GitHub Actions workflows, ensure:
Your MERN app is pushed to a GitHub repo
You have environment variables for:
MongoDB connection
JWT secrets
API endpoints
You know where you will deploy:
Vercel/Netlify → frontend
Render/Railway/Cloud Run → backend
VPS → SSH deployment
📁 3. Example Project Structure
root/
│── client/ # React frontend
│ └── package.json
│── server/ # Express backend
│ └── package.json
└── .github/
└── workflows/
We will create separate Actions pipelines for frontend and backend or a single one for both.
🔧 4. Backend Deployment with GitHub Actions
This example deploys a Node.js API to Render, but you can switch to Heroku, Railway, Cloud Run, or VPS easily.
Create a workflow file:
.github/workflows/backend-deploy.yml
name: Backend Deployment
on:
push:
branches:
- main
jobs:
deploy-backend:
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 18
- name: Install Dependencies
working-directory: server
run: npm install
- name: Run Tests (Optional)
working-directory: server
run: npm test
- name: Deploy to Render
env:
RENDER_API_KEY: ${{ secrets.RENDER_API_KEY }}
run: |
curl -X POST \
-H "Authorization: Bearer $RENDER_API_KEY" \
-H "Content-Type: application/json" \
https://api.render.com/v1/services/SERVICE_ID/deploys
What to customize:
Add your Render API key → GitHub Secrets → RENDER_API_KEY
Replace SERVICE_ID with your Render backend service ID
🎨 5. Frontend Deployment with GitHub Actions
Example automated deployment to Netlify.
Create:
.github/workflows/frontend-deploy.yml
name: Frontend Deployment
on:
push:
branches:
- main
jobs:
deploy-frontend:
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 18
- name: Install Dependencies
working-directory: client
run: npm install
- name: Build Frontend
working-directory: client
run: npm run build
- name: Deploy to Netlify
uses: nwtgck/actions-netlify@v2
with:
publish-dir: ./client/build
production-deploy: true
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
Customize:
Add Netlify token → GitHub Secrets
Add Site ID
🐳 6. Deploying MERN with Docker + GitHub Actions
If you want Cloud Run, AWS ECS, or DigitalOcean:
Example: Build and Push Docker Image to Docker Hub
name: Docker Build & Push
on:
push:
branches:
- main
jobs:
docker:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Login to DockerHub
uses: docker/login-action@v3
with:
username: ${{ secrets.DOCKERHUB_USER }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Build and Push Backend Image
run: |
docker build -t ${{ secrets.DOCKERHUB_USER }}/mern-backend:latest ./server
docker push ${{ secrets.DOCKERHUB_USER }}/mern-backend:latest
Then you can deploy that image anywhere.
🖥️ 7. Deploy MERN to a VPS via SSH (Ubuntu/NGINX)
You can automate deployment to a server:
name: Deploy to VPS
on:
push:
branches: [ "main" ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Copy Files to VPS
uses: appleboy/scp-action@v0.1.4
with:
host: ${{ secrets.VPS_HOST }}
username: ${{ secrets.VPS_USER }}
key: ${{ secrets.VPS_SSH_KEY }}
source: "./"
target: "/home/deploy/mern-app"
- name: Run Deployment Script
uses: appleboy/ssh-action@v0.1.8
with:
host: ${{ secrets.VPS_HOST }}
username: ${{ secrets.VPS_USER }}
key: ${{ secrets.VPS_SSH_KEY }}
script: |
cd /home/deploy/mern-app
docker-compose down
docker-compose up -d --build
This automates:
pulling new code
rebuilding Docker
restarting the application
🔒 8. Managing Environment Variables
Use GitHub Secrets for:
MongoDB URI
JWT secret
API keys
Deployment tokens
Go to:
GitHub Repo → Settings → Secrets → Actions
Example usage:
env:
MONGO_URI: ${{ secrets.MONGO_URI }}
🧪 9. Adding Testing to Your Pipeline
Frontend testing:
working-directory: client
run: npm test -- --watchAll=false
Backend testing:
working-directory: server
run: npm test
🏁 10. Summary
Using GitHub Actions for MERN deployment gives you:
✔ Continuous Integration (CI)
Automated testing
Code quality checks
✔ Continuous Delivery (CD)
Automatic deployment
Each commit → production-ready
✔ Zero manual steps
Push → build → deploy → done.
⭐ Want the Next Step?
I can generate:
✅ A complete MERN GitHub Actions workflow (combined frontend/backend)
✅ A production-grade Docker + CI/CD pipeline
✅ Deployment guides for:
Learn MERN Stack Training in Hyderabad
Read More
Avoiding Injection Attacks in MongoDB
Visit Our Quality Thought Training Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments