How to Install MERN App on Ubuntu

How to Install MERN App on Ubuntu

In this article, we’ll explain how to install MERN app on Ubuntu 20.04.

MERN is a short form of MangoDB, Express, React, and Node.js. Developer build a application using MERN on the web.

Prerequisites

  • A Ubuntu 20.04 installed dedicated server or KVM VPS.
  • A root user access or normal user with administrative privileges.

Install MERN App on Ubuntu

1. Keep the server up to date

# apt update -y

2. Install NodeJS

First, we need to download NodeJS.

Download latest stable release of NodeJS.

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

Now, install the NodeJS using following command:

# apt install -y nodejs

3. Install MongoDB

We need to import the public key used by the package management system. We can import it using following command:

# wget -qO — https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -

Create the list file /etc/apt/sources.list.d/mongodb-4–4.list for your version of Ubuntu. We can create the list file using following command:

# echo “deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse” | sudo tee /etc/apt/sources.list.d/mongodb-4–4.list

Next, we need to update the local package database. It will refer the file we have created earlier to install MongoDB 4.4.

# apt update -y

Now, install MongoDB 4.4 using following command:

# apt install mongodb-org -y

Start and enable the MongoDB service

# systemctl start mongod

# systemctl enable mongod

4. Setup the NPM project

Create a new directory for the app.

# mkdir -p app && cd app

Create a package.json file.

# npm init -y

Install the project dependencies: Express web framework, MongoDB driver, React, React DOM, Webpack, Babel, and Dotenv.

# 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 directories for the code.

# mkdir src
# mkdir src/public

Create src/index.js, which contains the main server code for Express.

# vi src/index.js

Paste the following:

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 exit the file.
Create src/public/App.jsx, which includes the main code for the React portion of the app.

# vi src/public/App.jsx

Paste the following:

import React from “react”;
import ReactDOM from “react-dom”;

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

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

Save and exit the file.
Create src/public/index.html, which includes the base HTML which the compiled React code will be injected into. It also has the root element that it will render in.

# vi src/public/index.html

Paste the following:

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

Save and exit the file.
Create webpack.config.js, which tells Webpack how to bundle the project.

# vi webpack.config.js

Paste the following:

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

Note: This is set for mode: ‘development’ this is for development. You are free change it ‘production’ if you are using it for production level.

Save and exit the file.
Create .babelrc, which configures Babel to compile the React code.

# vi .babelrc

Paste the following:

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

Save and exit the file.
Create .env, which configures the port and MongoDB database URL.

# vi .env

Paste the following:

PORT=8080
MONGODB=mongodb://localhost

Save and exit the file.
Build the app.

# npx webpack

Start the app.

# node src/index.js

Now, navigate to your browser and access [serverIP]:8080.

--

--

--

HostnExtra was founded in 2016. All of our servers are located in the continental United States and United Kingdom. View more details https://www.hostnextra.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CSC Web Wallet Using Web3.js

How to create donation system using web3.js and metamask on CSC

I just transferred Dexie.js

Easily Parse JSON With The Powerful Jackson ObjectMapper

The Nested Loop That Isn’t … Or Is It?

MEAN Stack

Why Do We Have APIs in JavaScript?

Vue Deconstructed

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
HostnExtra Technologies

HostnExtra Technologies

HostnExtra was founded in 2016. All of our servers are located in the continental United States and United Kingdom. View more details https://www.hostnextra.com

More from Medium

Copying files to and from remote server using ssh

type in terminal: man scp

Simple Raspberry Pi Lite setup with SSH and VS Code from Linux Mint

Publish NodeJS app on Linux. Using Snapcraft in windows.

New book: Laravel The Modular Way