logo

Cloud servers in 180 cities

cart 0

How to Install MongoDB, Express, React, and Node.js on an Ubuntu Cloud Server?

31-01-2024 02:35:45

The MEAN platform, consisting of MongoDB, Express, React, and Node.js, is a suite of software tools for developing web applications. This guide explains how to deploy the MEAN platform on an Ubuntu 20.04 cloud server.

Installing Node.js

Install the latest version of Node.js from the NodeSource repository to ensure maximum compatibility between the installed applications and the operating system.

$ wget -qO- https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -
$ echo 'deb https://deb.nodesource.com/node_14.x focal main' | sudo tee -a /etc/apt/sources.list
$ sudo apt update
$ sudo apt install -y nodejs

Installing MongoDB

MongoDB is a database system for storing application data. On the Ubuntu operating system, it is recommended to install the latest version of MongoDB.

$ wget -qO- https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
$ echo 'deb [arch=amd64] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse' | sudo tee -a /etc/apt/sources.list
$ sudo apt update
$ sudo apt install -y mongodb-org
$ sudo systemctl enable --now mongod

Creating the Application

Create an app directory to store the application.

$ mkdir -p app && cd app

Create a package.json file and install essential components such as the Express framework, MongoDB driver, React, and WebPack.

$ npm init -y
$ npm i express mongodb react react-dom webpack webpack-cli html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader dotenv

Create other necessary directories and files.

$ mkdir src
$ mkdir src/public
$ nano src/index.js

Add the following code to the index.js file.

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}`);
})();

Create the main code file for React.

$ nano src/public/App.jsx

Add the following code to the App.jsx file.

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

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

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

Create a basic HTML file where the React code created in the previous step will be embedded.

$ nano src/public/index.html

Add the following code to the index.html file.

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

Create a webpack.config.js file for bundling the entire project with webpack.

$ nano webpack.config.js

Add the following code to the webpack.config.js file.

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",
    }),
  ],
};

Create a .babelrc file for setting up Babel to compile React code.

$ nano .babelrc

Add the following code to the .babelrc file.

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

Create an .env file for setting the port and MongoDB database URL address.

$ nano

Add the following code to the .env file.

PORT=8080
MONGODB=mongodb://localhost

Testing

Finally, compile and start the app. Once launched, test if the MEAN platform has been successfully deployed by accessing http://your_server_IP:8080 in a web brows

$ npx webpack
$ node src/index.js
Search
Categories
Most popular
Latest