Introduction

The MERN stack — MongoDB, Express.js, React, and Node.js has become one of the most popular frameworks for building modern, full-stack web applications. While MERN makes development seamless, deploying a production-ready application can be challenging without the right automation practices.

That’s where Microsoft Azure and GitHub Actions come in. By combining the scalability of Azure with the power of GitHub’s CI/CD pipelines, you can automate the entire deployment process from pushing code to GitHub, to building, testing, and deploying your MERN app to the cloud.

In this guide, I’ll Walk you through how to deploy a full-stack MERN application to Azure using GitHub Actions. By the end of this tutorial, you will have:

• A live MERN application running on Azure

• A fully automated CI/CD pipeline that deploys every new code push

• Secure handling of environment variables and database credentials

• A clear understanding of how to integrate MongoDB Atlas with Azure services

Whether you’re a beginner exploring cloud deployments or a developer aiming to streamline production workflows, this step-by-step approach will give you the confidence to run and scale MERN applications in the cloud.

Pre-requisites

Before we begin, make sure you have the following set up:

1. Microsoft Azure Account

   • Sign up here: Azure Free Account

   • Students can get $100 free credits with their student email ID → Azure for Students

   • Access the Azure Portal: portal.azure.com

2. Git & GitHub Account

3. Node.js & npm(for local testing)

   • Download and install: Node.js

4. MongoDB Atlas Account (for cloud database hosting)

   • Sign up here: MongoDB Atlas

   • Make sure to whitelist your IPs under Network Access Settings.

   • (For production, restrict access to only trusted services. For this demo, you can allow all IPs 0.0.0.0/0 for easier setup.)

5. Azure CLI (for managing Azure resources from your terminal)

   • Install here: Azure CLI Installation Guide

6. Basic Knowledge of:

   • React (Frontend)

   • Express.js & Node.js (Backend)

   • Git & GitHub Actions (Version Control + CI/CD)

---

Step-by-Step Deployment

STEP 1) Clone the Repository

First, clone your MERN project (or a demo repo):

git clone <your-repo-url>
cd <your-project-folder>

STEP 2) Understand the Project Structure

A typical MERN project looks like this:

/app
 ├── /client   (React frontend)
 ├── /server   (Express backend)
 └── README.md

• Frontend: React (served via Azure Static Web Apps)

• Backend: Express.js (deployed as Azure Web App)

• Database: MongoDB Atlas.

  

---

STEP 3) Setup MongoDB Atlas

1. Create an account at MongoDB Atlas.

2. Create a new Cluster.

3. Under Network Access, add 0.0.0.0/0 for testing (allows all IPs).
   (In production, restrict to trusted IPs only )

4. Get your connection string from Database → Connect → Drivers.

Example:

mongodb+srv://<username>:<password>@cluster0.mongodb.net/myDB

---

STEP 4) Configure Backend Locally

Inside /server, create a config.env:

ATLAS_URI=<your-mongodb-ATLAS-connection-string>
PORT=5050

Run your backend:

cd server
npm install
npm run dev

Your backend should be live at → http://localhost:5050

---

STEP 5) Configure Frontend Locally

Inside /client, create a .env file:

VITE_API_URL=http://localhost:5050

Run your frontend:

cd client
npm install
npm run dev

Your frontend should be live at → http://localhost:5173

TESTING THE MERN APP LOCALLY

---

STEP 6) Deploy Backend to Azure Web App

1. Go to Azure Portal → Create a Web App

   • Runtime: Node.js

   • Region: Choose closest to you

     

2. 

   

   

   

   Connect it to GitHub Actions under Deployment Center.

3. Add environment variables:

   • ATLAS_URI → Your MongoDB connection string

     

4. Push code → GitHub Actions will build & deploy your backend.

   

   NB; Don’t forget to create federated credentials under app registration for authentication of GitHub actions and azure credentials. (Follow these steps in the Azure portal to create the necessary federated credential.

   1. Find Your App Registration: In the Azure portal, navigate to Azure Active Directory > App registrations. Search for the application registration associated with your service principal, in this case, it appears to be named mern-deployment-sp.

   2. Go to Certificates & secrets: From the left-hand menu of your app registration, select Certificates & secrets.

   3. Add a Federated Credential: Click on the Federated credentials tab, then click Add credential.

   4. Configure the Credential: Fill out the form with the following details from your error log:

      • Scenario: Choose GitHub Actions deploying to Azure resources.

      • Organization: Your GitHub organization name (isaacdivine37).

      • Repository: The name of your repository (MERN-App-Deployment-Automation-main).

      • Entity type: Environment.

      • GitHub environment name: Production (this must match the environment name in your workflow).

      • Name: Give it a descriptive name like mern-app-production-deployment.)

        

        

---

STEP 7) Deploy Frontend to Azure Static Web Apps

1. Go to Azure Portal → Create Static Web App.

2. Connect GitHub repo → choose branch.

3. Configure build settings:

   • App Location: app/client

   • Output Location: dist

4. Add GitHub Secret:

   • VITE_API_URL → Backend Web App URL (e.g., https://your-api.azurewebsites.net)

     

     Access the Github actions and edit the yaml and include the environment variable for it access the VITE_API_URL

     

     Testing the workflow after including the vite variable

     

5. Push code → GitHub Actions will build & deploy your frontend.

   

---

STEP 8) Verify Deployment

• Frontend → https://your-frontend.azurestaticapps.net

They should now communicate via VITE_API_URL.

Backend → https://your-api.azurewebsites.net/record

Verifying our profile at MongoDb Atlas

---

Why Use Azure Static Web Apps for MERN Frontend?

Azure Static Web Apps is better than regular App Service for React frontends because:

• Performance: Static files served via global CDN load faster than server-hosted React

• Cost: Free tier covers most apps vs $13+ monthly for App Service

• Auto-scaling: Handles traffic spikes automatically without configuration

• Independent deployment: Frontend and backend can be updated separately

• Built-in CI/CD: Automatic GitHub integration with preview deployments

Use regular App Service only if you need:

• Server-side rendering (SSR)

• Real-time WebSocket features

• Tightly coupled frontend/backend

Resources

• Azure Web App Docs

• Azure Static Web Apps Docs

• GitHub Actions Docs

• MongoDB Atlas Docs