How to Deploy MERN Stack Web App on Ubuntu 24.04

What is the MERN Stack?

The MERN Stack is a popular web development technology stack used to build modern, full-stack applications. It is composed of four main technologies:

• MongoDB: A NoSQL database used for storing application data in a flexible, JSON-like format.
• Express.js: A web framework for Node.js that simplifies server-side application development.
• React.js: A front-end JavaScript library for building user interfaces, maintained by Meta (Facebook).
• Node.js: A JavaScript runtime that allows developers to build scalable server-side applications.

Together, these technologies allow developers to create powerful applications using JavaScript on both the client and server sides.

---

Why Deploy a MERN Stack Web App on Ubuntu 24.04?

Ubuntu 24.04 LTS (Long-Term Support) is an ideal environment for deploying MERN applications because it offers:

• A stable, secure, and up-to-date platform supported until 2029.
• Native access to the latest versions of Node.js, MongoDB, and other related tools.
• Seamless package management with APT and Snap.
• Full compatibility with cloud services, Docker, and Kubernetes environments.
• Improved performance with updated kernels, security modules, and system libraries.

Ubuntu’s reliability makes it an excellent choice for both development and production environments.

---

Key Components in a MERN Stack Web App

1. MongoDB

• Stores user data, content, settings, and application logs.
• Enables high scalability and flexible schema designs.
• Supports rich querying, aggregation, and indexing.

2. Express.js

• Handles server-side logic and API routes.
• Manages request and response cycles.
• Simplifies connecting the frontend with the database.

3. React.js

• Creates fast and responsive user interfaces.
• Supports component-based architecture and virtual DOM.
• Enables building single-page applications (SPA) with efficient client-side routing.

4. Node.js

• Executes server-side JavaScript code.
• Provides a lightweight, event-driven environment ideal for I/O-heavy operations.
• Handles backend services such as APIs, authentication, and real-time communication.

---

Typical Features in a MERN Stack Web Application

• Authentication and Authorization (e.g., JWT, OAuth)
• Real-Time Communication (e.g., WebSocket with Socket.IO)
• RESTful or GraphQL APIs
• CRUD Operations (Create, Read, Update, Delete)
• Responsive Front-End Interfaces
• Dynamic Data Visualization and Dashboards
• Payment Gateway Integrations
• Deployment-ready build pipelines

---

Advantages of Using the MERN Stack

• Single Language: JavaScript is used across the entire application stack.
• Full-Stack Development: Enables rapid development of both frontend and backend.
• Rich Ecosystem: Large community support and thousands of open-source libraries.
• Scalability: Suitable for small startups and large-scale enterprise applications.
• Flexibility: Easily integrates with third-party APIs, microservices, and serverless architectures.

---

Deployment and Hosting

On Ubuntu 24.04, you typically deploy a MERN stack web app by:

• Setting up Node.js for backend server execution.
• Setting up MongoDB either locally or using a managed service like Atlas.
• Building the React frontend for production using tools like Vite or Webpack.
• Using Nginx or Apache as a reverse proxy to serve the frontend and forward API requests.
• Managing backend processes with tools like PM2 for reliability.
• Enabling HTTPS with Certbot and Let’s Encrypt.

Deployment can be manual or automated using Docker, CI/CD pipelines, or configuration management tools.

---

Deploying a MERN Stack Web App on Ubuntu 24.04 provides a robust, scalable, and developer-friendly environment for building high-performance applications. By combining the flexibility of JavaScript across the stack with the stability of Ubuntu 24.04, developers can deliver fast, reliable, and secure web experiences for users.

---

Would you also like a quick diagram showing how the MERN components interact inside a typical Ubuntu deployment?
It would make the explanation even more complete if you plan to use it for an article or presentation!

---

Deploy a Clean Server on Shape.Host

To get started, you’ll need a fresh VPS running Ubuntu 24.04. Here’s how to set that up on Shape.Host:

Go to https://shape.host and sign in.

Click on “Create” and choose “Instance”.

Select your preferred server location.

Choose Ubuntu 24.04 (64-bit) as your operating system.

Pick a plan with at least 2 CPUs, 4 GB RAM, and 20 GB SSD.

Click “Create Instance”.

After setup, copy the server’s IP address from the Resources tab.

Connect via SSH:

ssh root@your-server-ip

---

Step 1: Update the system

Update the package list:

apt update

---

Step 2: Install basic build tools and curl

Install essential system packages:

apt install build-essential curl

---

Step 3: Install Node.js (LTS version)

Download and add the Node.js LTS setup script:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

Install Node.js:

apt install nodejs

Check Node.js version:

node -v

Check npm version:

npm -v

---

Step 4: Install MongoDB 8

Import MongoDB public GPG key:

curl -fsSL https://www.mongodb.org/static/pgp/server-8.0.asc | sudo gpg -o /usr/share/keyrings/mongodb-server-8.0.gpg --dearmor

Add the MongoDB 8 repository:

echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-8.0.gpg ] https://repo.mongodb.org/apt/ubuntu noble/mongodb-org/8.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-8.0.list

Update the package list again:

apt-get update

Install MongoDB:

apt-get install mongodb-org

Start MongoDB service:

systemctl start mongod

Enable MongoDB to start at boot:

systemctl enable mongod

Check MongoDB status:

systemctl status mongod

---

Step 5: Create project structure

Create the project directory:

mkdir mern-realtime-app
cd mern-realtime-app

Inside the project, create backend and frontend folders:

mkdir -p backend frontend

List the folders to verify:

ls

---

Step 6: Set up the Backend

Navigate to backend:

cd backend

Initialize a new Node.js project:

npm init

Install required backend packages:

npm install express socket.io cors mongoose dotenv

Create the server file:

touch server.js
ls
nano server.js

Paste the backend server code you provided.

require("dotenv").config();
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const mongoose = require("mongoose");
const cors = require("cors");

const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
    cors: { origin: "*" }
});

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

// MongoDB Connection
mongoose.connect(process.env.MONGO_URI)
    .then(() => console.log("MongoDB Connected"))
    .catch(err => console.log("MongoDB Connection Error:", err));

// Message Schema
const MessageSchema = new mongoose.Schema({ text: String });
const Message = mongoose.model("Message", MessageSchema);

// WebSocket Connection
io.on("connection", (socket) => {
    console.log("New client connected");

    // Handle incoming messages
    socket.on("message", async (data) => {
        const message = new Message({ text: data });
        await message.save();
        io.emit("message", data);
    });

    socket.on("disconnect", () => {
        console.log("Client disconnected");
    });
});

// API Route
app.get("/", (req, res) => res.send("Server is running"));

// API Endpoint to Save Messages
app.post("/api/messages", (req, res) => {
    const { message } = req.body;
    if (!message) {
        return res.status(400).json({ success: false, error: "Message is required" });
    }
    console.log(`Message received: ${message}`);
    res.status(200).json({ success: true, message: "Message received" });
});

// Start Server
const PORT = process.env.PORT || 5000;
server.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Create an environment file:

touch .env
nano .env

Inside .env file, paste:

MONGO_URI=mongodb://localhost:27017/realtime-chat
PORT=5000

Run the backend server:

node server.js

---

Step 7: Set up the Frontend (React App)

Go back to project root:

cd ..

Create a new Vite React app:

npm create vite@latest frontend -- --template react

Move into the frontend directory:

cd frontend

Install frontend dependencies:

npm install

Install socket.io client for frontend:

npm install socket.io-client

Edit the React app’s main component:

nano src/App.jsx

Paste the full React Chat code you provided.

import { useEffect, useState } from "react";
import io from "socket.io-client";

const socket = io("ws://your-ec2-public-ip:5000"); // Use Public IP

function Chat() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");

  useEffect(() => {
    socket.on("message", (message) => {
      setMessages((prev) => [...prev, message]);
    });

    return () => socket.off("message");
  }, []);

  const sendMessage = () => {
    if (input.trim()) {
      socket.emit("message", input);
      setInput("");
    }
  };

  return (
    <div style={styles.container}>
      <h2 style={styles.title}>💬 Real-Time Chat</h2>

      <div style={styles.chatBox}>
        {messages.map((msg, index) => (
          <p key={index} style={styles.message}>{msg}</p>
        ))}
      </div>

      <div style={styles.inputContainer}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message..."
          style={styles.input}
        />
        <button onClick={sendMessage} style={styles.button}>Send</button>
      </div>
    </div>
  );
}

// Styling object
const styles = {
  container: {
    maxWidth: "500px",
    margin: "40px auto",
    padding: "20px",
    border: "1px solid #ddd",
    borderRadius: "8px",
    boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
    backgroundColor: "#fff",
    fontFamily: "Arial, sans-serif",
    textAlign: "center"
  },
  title: {
    color: "#333",
  },
  chatBox: {
    height: "300px",
    overflowY: "auto",
    border: "1px solid #ddd",
    padding: "10px",
    borderRadius: "5px",
    backgroundColor: "#f9f9f9",
    textAlign: "left",
  },
  message: {
    background: "#e3f2fd",
    padding: "10px",
    borderRadius: "5px",
    margin: "5px 0",
    display: "inline-block",
    maxWidth: "80%",
  },
  inputContainer: {
    display: "flex",
    marginTop: "10px",
  },
  input: {
    flex: 1,
    padding: "10px",
    borderRadius: "5px",
    border: "1px solid #ccc",
  },
  button: {
    marginLeft: "10px",
    padding: "10px 15px",
    border: "none",
    borderRadius: "5px",
    backgroundColor: "#007bff",
    color: "white",
    cursor: "pointer",
  }
};

export default Chat;

---

Step 8: Manage Backend Process with PM2

Go back to project root:

cd ..

Install PM2 globally:

npm install -g pm2

Check PM2 version:

pm2 -v

Move into the backend:

cd backend

Start the backend server with PM2:

pm2 start server.js --name backend

Save the PM2 process list:

pm2 save

Set PM2 to start automatically on server boot:

pm2 startup

View PM2 logs:

pm2 logs backend

---

Step 9: Start Frontend Dev Server

Go back to the project root:

cd ..

Move into the frontend folder:

cd frontend

Run the React development server:

npm run dev -- --host

Now open the frontend at:

http://your-server-ip:5173

Open two browser tabs (or devices) to test real-time messaging.

---

Step 10: Check Messages in MongoDB

Open MongoDB shell:

mongosh

List all databases:

show dbs

Switch to your app database:

use realtime-chat

Show all saved messages:

db.messages.find().pretty()

Exit MongoDB shell:

exit

---

Step 11: Configure Nginx for Production

Install Nginx and Certbot for SSL:

apt install certbot python3-certbot-nginx

Create a new Nginx configuration file:

nano /etc/nginx/sites-available/mern

Paste this configuration (replace your-domain.com with your domain):

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;

    root /var/www/mern-client/build;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:5000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /socket.io/ {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    error_page 404 /index.html;
}

Enable the Nginx configuration:

ln -s /etc/nginx/sites-available/mern /etc/nginx/sites-enabled/

Test Nginx configuration:

nginx -t

Reload Nginx:

systemctl reload nginx

---

Step 12: Secure the Application with SSL

Request an SSL certificate:

certbot --nginx -d your-domain.com

---

Now your MERN Stack real-time chat app is fully deployed with:

• Node.js backend
• MongoDB 8 database
• React frontend (via Vite)
• PM2 managing the backend process
• Nginx serving the frontend and proxying backend API
• HTTPS secured with Certbot

Your application is ready for production.

For reliable performance, we recommend using Shape.Host Linux SSD VPS services.
They provide:

• High-performance SSD storage
• Latest Ubuntu 24.04 images
• Flexible plans with full root access
• Excellent support and easy scaling

You can create your own fast Linux instance at Shape.Host and deploy your applications easily.