The MERN stack is one of the most popular technologies to build modern single-page apps. It's composed of MongoDB, Express, React, Redux, and Node.js. The best thing about the MERN stack is that all these technologies support the same language for both front-end and back-end.
A brief explanation of each component is shown below:
- MongoDB is a simple and object-oriented database used for large data storage.
- Express JS is a node js framework that helps developers into the fast development of node-based applications.
- React is used for the development of front-end web applications.
- Node JS is a JavaScript runtime that allows to write JavaScript on the server side.
In this post, we'll show you how to deploy a MERN application on Ubuntu 20.04.
Requirements
- A server running on Ubuntu 20.04 LTS
- A root password configured in your server.
Install Node.js
By default, the latest version of Node.js is not included in the Ubuntu default repository. So you'll need to add the Node source repository to your system.
First, install the required dependencies using the following command:
apt-get install curl gnupg2 -y
Next, download and add the Node source GPG key and repository with the following command:
wget -qO- https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
echo 'deb https://deb.nodesource.com/node_16.x focal main' | tee -a /etc/apt/sources.list
Next, update the repository using the following command:
apt-get update -y
Finally, install the Node.js package using the following command:
apt-get install nodejs -y
Once the Node.js package is installed, verify its version using the following command:
node --version
This is the output that you should see:
v16.8.0
Install MongoDB Server
By default, the latest version of MongoDB is not included in the Ubuntu default repository. So you'll need to add the MongoDB official repository to your system.
First, add the MongoDB GPG key with the following command:
wget -qO- https://www.mongodb.org/static/pgp/server-4.4.asc | apt-key add -
To go on, add the MongoDB repository using the following command:
echo 'deb [arch=amd64] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse' | tee -a /etc/apt/sources.list
Next, update the repository and install the MongoDB package using the following command:
apt-get update -y && apt-get install mongodb-org -y
Once the installation is completed, start the MongoDB service and enable it to start at system reboot:
systemctl start mongod && systemctl enable mongod
Next, verify the MongoDB version using the following command:
mongo --version
This is the output that you should get:
MongoDB shell version v4.4.8
Build Info: {
"version": "4.4.8",
"gitVersion": "83b8bb8b6b325d8d8d3dfd2ad9f744bdad7d6ca0",
"openSSLVersion": "OpenSSL 1.1.1f 31 Mar 2020",
"modules": [],
"allocator": "tcmalloc",
"environment": {
"distmod": "ubuntu2004",
"distarch": "x86_64",
"target_arch": "x86_64"
}
}
Create MEARN Application
First, you'll need to create a directory to hold your project. You can do it using the following command:
mkdir project
Next, navigate to the project directory and create a package.json file using the following command:
cd project && npm init -y
After that, install Express, React, and other dependencies for your 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
Next, create a directory to store your code:
mkdir -p src/public
In the next step, create an index.js file:
nano src/index.js
Add the following lines:
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 an App.jsx file:
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"));
Save and close the file then create an index.html file:
nano src/public/index.html
Add the following lines:
<!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
Add the following lines:
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",
}),
],
};
Save and close the file then create a .babelrc file to compile the React code:
nano .babelrc
Add the following lines:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Save and close the file then create a .env file to define the MongoDB database and port:
nano .env
Add the following lines:
PORT=8080
MONGODB=mongodb://localhost
Save and close the file then build the app using the following command:
npx webpack
Finally, start the application using the command below:
node src/index.js
Once the application is started, you should get the following output:
Connected to MongoDB
HTTP listening on 8080
Access MERN Application
At this point, the MERN application is started and listening on port 8080. You can access it using the URL http://your-server-ip:8080 but remember to first create a rule in the Clouding Firewall. You should see your MERN application in the following screen:
Conclusion
Congratulations! You've successfully deployed a MERN application on Ubuntu 20.04.
You can now start developing your own application using the MERN stack.