Atlantic.Net Blog

How To Install & Configure MEAN Stack On Ubuntu 20.04

A MEAN Stack is a free, open-source, popular JavaScript software stack used for developing dynamic websites and web applications. It is made from four components: MongoDB, Express, Angular, and Node.js. Angular is used for frontend development, while Node.js, Express, and MongoDB are used for backend development. A MEAN stack is based on JavaScript language so it can handle all aspects of an application.

In this tutorial, we will show you how to install a MEAN Stack on Ubuntu 20.04.

Prerequisites

  • A fresh Ubuntu 20.04 VPS on the Atlantic.Net Cloud Platform
  • A valid domain name pointed to your server IP
  • A root password configured on your server

Step 1 – Install MongoDB

First, you will need to install a MongoDB database in your server. By default, the latest version of MongoDB is available in the Ubuntu 20.04 default repository, so you can install it easily with the following command:

apt-get install mongodb -y

Once MongoDB is installed, start the MongoDB service and enable it to start at system reboot with the following command:

systemctl start mongodb
systemctl enable mongodb

Step 2 – Install Node.js

By default, the latest version of Node.js is not available in the Ubuntu 20.04 default repository, so you will need to add the Node.js repository to your system.

First, install all required dependencies with the following command:

apt-get install curl gnupg2 unzip git gcc g++ make -y

Once all the dependencies are installed, add the Node.js repository with the following command:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

After adding the repository. you can install Node.js with the following command:

apt-get install nodejs -y

Once Node.js is installed, verify the Node.js version with the following command:

node -v

You should get the following output:

v14.15.1

Next, install other required packages including yarn, gulp, and pm2 with the following command:

npm install -g yarn
npm install -g gulp
npm install pm2 -g

Once all the packages are installed, you can proceed to the next step.

Step 3 – Install and Configure MEAN Stack

First, download the latest version of MEAN with the following command:

git clone https://github.com/meanjs/mean

Once the download is completed, change the directory to mean and install all required dependencies with the following command:

cd mean
yarn install

Next, edit the server.js file with the following command:

nano server.js

Replace all the lines with the following:

const express = require('express');
const MongoClient = require('mongodb').MongoClient;
const app = express();

app.use('/', (req, res) => {
MongoClient.connect("mongodb://localhost:27017/test", function(err, db){
db.collection('Example', function(err, collection){
collection.insert({ pageHits: 'pageHits' });
db.collection('Example').count(function(err, count){
if(err) throw err;
res.status(200).send('Page Hits: ' + Math.floor(count/2));
});
});
});
});

app.listen(3000);
console.log('Server running at http://localhost:3000/');

module.exports = app;

Save and close the file when you are finished, then start the server with the following command:

pm2 start server.js

You should get the following output:

Next, enable server.js to start at system reboot with the following command:

pm2 startup

At this point, the MEAN Stack is installed and listening on port 3000. You can check it with the following command:

ss -antpl | grep 3000

You should get the following output:

LISTEN 0 511 *:3000 *:* users:(("node",pid=26014,fd=20))

Step 4 – Configure Nginx as a Reverse Proxy For MEAN

Next, you will need to install and configure Nginx as a reverse proxy to access the MEAN application.

First, install the Nginx web server with the following command:

apt-get install nginx -y

Once installed, create a new Nginx virtual host configuration file with the following command:

nano /etc/nginx/sites-available/mean

Add the following lines:

server {
listen 80;

server_name mean.example.com;
access_log /var/log/nginx/mean-access.log;
error_log /var/log/nginx/mean-error.log;

location / {
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:3000/;
}
}

Save and close the file when you are finished, then enable the virtual host with the following command:

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

Next, edit the Nginx main configuration file and set the hash_bucket_size:

nano /etc/nginx/nginx.conf

Add the following line below http {

server_names_hash_bucket_size 64;

Save and close the file, then verify the Nginx for syntax errors with the following command:

nginx -t

You should get the following output:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Finally, restart the Nginx service to apply the configuration changes:

systemctl restart nginx

Step 5 – Access MEAN Application

Now, open your web browser and access the MEAN application using the URL http://mean.example.com. You should see your MEAN application in the following screen:

In the above screen, the number will be increased automatically when you refresh the page.

Conclusion

Congratulations! You have successfully installed MEAN Stack with Nginx as a reverse proxy on Ubuntu 20.04 server. You can now easily deploy your own dynamic application with a MEAN Stack on your VPS hosting account with Atlantic.Net.

Get started with 12 months of free cloud VPS hosting

Free Tier includes:
G3.2GB Cloud VPS Server Free to Use for One Year
50 GB of Block Storage Free to Use for One Year
50 GB of Snapshots Free to Use for One Year