How to Deploy MERN (MongoDB, Express, React, and Node.js) on Ubuntu 22.04 or 24.04 LTS – Clouding.io

MERN is one of the most popular stacks for building single-page applications. It consists of MongoDB, Express, React, Redux, and Node.js. The best thing about MERN is that all these technologies support the same language for both the front end and the back end.

Below is a brief description of each component:

MongoDB is a simple, object-oriented database used to store large amounts of data.
Express JS is a node js framework that helps developers quickly deploy node-based applications.
React is used to develop front-end web applications.
Node JS is a JavaScript runtime that lets you write server-side JavaScript.

In this tutorial, we show you how to deploy a MERN application on Ubuntu 24.04.

Requirements

A server running Ubuntu 24.04 LTS.
Access as the root user or a user with permission to run sudo su.

Install Node.js

By default, the latest version of Node.js is not included in the Ubuntu repository. You will therefore need to add the Node source repository to your system.

First, install the required dependencies using the following command:

# apt update && apt install ca-certificates curl gnupg -y

Next, download and run the Node repository setup script with the following command:

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

Then, update the repositories and packages with the following command:

# apt update && apt upgrade -y

Finally, install the Node.js package with the following command:

# apt install nodejs -y

Once the Node.js package is installed, you can check the version with the following command:

# node --version

You should see the following result:

v22.4.0

Install the MongoDB Server

By default, the latest version of MongoDB is not included in the Ubuntu repository either. You will therefore also need to add the official MongoDB repository to your system.

First, add the MongoDB GPG key with the following command:

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

Next, add the MongoDB repository using the following command (replace jammy with noble on 25.04 LTS):

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

Then update the repository and install the MongoDB package with the following command:

# apt update -y && apt install mongodb-org -y

Once the installation is complete, start the MongoDB service and enable it to start when the system reboots:

# systemctl start mongod && systemctl enable mongod

Next, check the MongoDB version using the following command:

# mongod --version

You should see the following result:

MongoDB shell version v7.0.8
Build Info: {
     "version": "7.0.8",
     "gitVersion": "b6513ce0781db6818e24619e8a461eae90bc94fc",
     "openSSLVersion": "OpenSSL 3.0.13 30 Jan 2024",
     "modules": [],
     "allocator": "tcmalloc",
     "environment": {
        "distmod": "ubuntu2004",
        "distarch": "x86_64",
        "target_arch": "x86_64"
     }
}

Create the MERN Application

First, you will need to create a directory to hold your project. You can create it using the following command:

# mkdir project

Next, go to the project directory and create a package.json file with the following command:

# cd project && npm init -y

Then, install Express, React, and other dependencies for the application using the following command:

# npm i express mongodb react react-dom webpack webpack-cli html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader dotenv && npm i -g pm2

Then, create a directory to store your code:

# mkdir -p src/public

Next, create an index.js file using a text editor:

# nano src/index.js

And add the following content to it:

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

const path = require("path");
const express = require("express");
const app = express();
const { MongoClient } = require("mongodb");

(async () => {
    const mongo = new MongoClient(process.env.MONGODB);

  try {
      await mongo.connect();
  } catch (e) {
      console.log("Failed connecting to MongoDB");
      console.log(e);
      process.exit(1);
  }
  console.log("Connected to MongoDB");
  app.use(express.static(path.join(__dirname, "../dist")));
  app.listen(process.env.PORT);
  console.log(`HTTP listening on ${process.env.PORT}`);
})();

Save and close the file, then create another file named App.jsx:

# nano src/public/App.jsx

Add the following lines:

import React from "react";
import ReactDOM from "react-dom";

const App = () => (
  <div>
    <h1>My First App</h1>
  </div>
);

ReactDOM.render(<App />, document.querySelector("#app"));

Again, save your changes and close the file, then create an index.html file:

# nano src/public/index.html

Add the following lines to it:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>My First MERN Application</title>
  </head>
  <body>
  <div id="app"></div>
  </body>
</html>

Save and close the file. Then, create a webpack.config.js file to bundle the project:

# nano webpack.config.js

With the following content:

module.exports = {
  entry: "./src/public/App.jsx",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new (require("html-webpack-plugin"))({
      template: "./src/public/index.html",
    }),
  ],
};

Then create a .babelrc file to compile the React code:

# nano .babelrc

With this content:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Create one final file, .env, to define the MongoDB database and port:

# nano .env

The contents of this file are:

PORT=8080
MONGODB=mongodb://localhost

And build the application with the following command:

# npx webpack

Finally, start the application with the following command:

# node src/index.js

Once the application has started, you should get the following output:

Connected to MongoDB
HTTP listening on 8080

Alternatively, you can use PM2 to start the application:

pm2 start src/index.js && pm2 startup

For more information, see: How to Use PM2 to Manage a Node.js App.

Access the MERN Application

At this point, the MERN application is running and listening on TCP port 8080. You can access it using the URL http://your-server-ip:8080, but first remember to create a rule in the Clouding Firewall to allow access. You should see your MERN application on the following screen:

Conclusion

Congratulations! You have successfully deployed a MERN application on Ubuntu 22.04 or 24.04 LTS.

You can now start developing the application using MERN. We hope this article has helped you🙂. Remember, if you have any questions about this or anything else related to your servers on Clouding, feel free to write to soporte@clouding.io We’re here to help with whatever you need!

Articles in this section