Building and Deploying a MEAN Stack Application on Azure

As full-stack development continues to evolve, the MEAN stack has emerged as one of the most popular choices for building modern, scalable web applications. This blog post will walk you through a hands-on guide—from understanding the MEAN stack to deploying it on cloud platforms like Azure Virtual Machines.

📦 What is the MEAN Stack?

The MEAN stack is a powerful, JavaScript-based framework that allows developers to build end-to-end web applications using a single language across the entire stack.

Core Components

• MongoDB: A NoSQL database for storing data in JSON-like documents. It’s perfect for handling unstructured or semi-structured data.
• Express.js: A fast and minimalist backend framework that simplifies building RESTful APIs.
• Angular: A frontend framework for building single-page applications (SPAs), providing dynamic and rich user interfaces.
• Node.js: A runtime environment for executing JavaScript server-side, enabling non-blocking, event-driven development.

Why Use MEAN?

• JavaScript Everywhere: One language across the frontend, backend, and database layer.
• Open Source: Strong community support with free-to-use tools.
• Scalable: Suitable for both small projects and enterprise-scale applications.
• Real-Time Ready: Great for chat apps, live feeds, and collaborative tools.

☁️ Deploying MEAN Stack on Azure or AWS

Let’s break down the deployment process into manageable steps.

🛠 Step 1: Provision a Virtual Machine

🔷 Azure

1. Log in to the Azure Portal.
2. Navigate to Virtual Machines > Create.
3. Choose Ubuntu 22.04 LTS as the OS.
4. Select a size like B1s for testing.
5. Allow inbound ports: SSH (22), HTTP (80), and HTTPS (443).
6. Connect via SSH:

ssh azureuser@<public-ip>

⚙️ Step 2: Install MEAN Stack Components

✅ Update System & Install Dependencies

sudo apt update && sudo apt upgrade -y
sudo apt install -y git curl

🍃 Install MongoDB

wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list
sudo apt update
sudo apt install -y mongodb-org
sudo systemctl start mongod
sudo systemctl enable mongod

🟩 Install Node.js and npm

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

🧱 Step 3: Set Up the Express Backend

mkdir mean-app && cd mean-app
npm init -y
npm install express mongoose cors

Create server.js:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.json());
app.use(cors());

mongoose.connect('mongodb://localhost:27017/mean-db')
  .then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error('MongoDB connection error:', err));

app.get('/', (req, res) => res.send('MEAN Stack Backend Running!'));

app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));

Run with PM2:

sudo npm install -g pm2
pm2 start server.js
pm2 save
pm2 startup

🧑‍🎨 Step 4: Deploy Angular Frontend

Install Angular CLI:

sudo npm install -g @angular/cli

Create and build the Angular project:

ng new frontend --defaults
cd frontend
ng build --configuration production

Move build output to backend public directory:

cp -r dist/frontend/* ../mean-app/public/

Update server.js to serve static files:

app.use(express.static('public'));

For this assignment, I chose not to use Nginx since I didn't have an available domain name.

View the website on your browser here

http:<public_ip>:3000

✅ Conclusion

The MEAN stack is a great choice for modern full-stack applications thanks to its unified JavaScript ecosystem, flexibility, and scalability. Deploying your MEAN stack app on a cloud VM (like Azure or AWS) gives you full control over your infrastructure and allows you to scale as needed.

Whether you're building a personal project or launching a production-grade system, mastering this deployment workflow will give you the confidence and skills to deliver high-performing web apps.