A MEAN Stack is a free, open-source, popular JavaScript software stack for developing dynamic websites and web applications. It consists of four components: MongoDB, Express, Angular, and Node.js. Frontend development is handled by Angular, while Node.js, Express, and MongoDB handle backend development. MEAN stacks are based on JavaScript language, which makes them capable of handling all aspects of an application.
This tutorial will show you how to install a MEAN stack on Ubuntu 20.04.
Requirements:
- A VPS with freshly installed Ubuntu 20.04 OS
- Root access
Step 1: Update the Packages
First login to the VPS as root and run the following command to update each outdated package as well as dependencies in your VPS
# apt-get update -y
Step 2: Installing MongoDB
By default, the latest Mongodb package is already added in the Ubuntu repository. So, to install Mongodb, you can simply run the following command:
# apt-get install mongodb -y
Next, to start the mongodb service and make it start automatically when the system reboots, run the below commands:
# systemctl start mongodb
Install and Configure Mean Stack on Ubuntu 20.04
Step 3: Installing Node.js
Before we proceed further, we will install the dependencies with the below command:
# apt-get install make unzip gcc git curl gnupg2 g++ -y
Unlike MongoDB, the Ubuntu repository doesn’t come with Node.js. So, you can add the Node.js repository in your system using the following command:
# curl -sL https://deb.nodesource.com/setup_14.x | bash -
We have now added the Node.js repository. So, to install Node.js run the below command:
# apt-get install nodejs -y
To verify, run the below command, and you should be able to see the Node.js version:
# node -v
The output of the above command, in my case:
v14.21.3
Now, we also require other packages such as gulp, pm2 and yarn. So in order to install that, run the below commands one by one:
# npm install -g gulp
# npm install -g pm2
# npm install -g yarn
Step 4: Installing and Configuring MEAN stack
To download the latest version of MEAN, run the following command:
# git clone https://github.com/meanjs/mean
After the installation is completed, navigate to the mean directory and install other dependencies with the following command:
# cd mean
# yarn install
Now, edit the server.js file with the below command:
# vi server.js
Remove all the lines and add the below lines:
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;
Now save and close your file by pressing:
‘Esc’ then type “:wq!” and hit Enter
Now start the server using the below command:
# pm2 start server.js
The following output will be generated:
Now run the command to start server.js at every system reboot:
# pm2 startup
After completing all the above steps, MEAN stack should be installed and listening on port 3000. To verify it, run the below command:
# ss -antpl | grep 3000
The output should be like this:
LISTEN 0 511 *:3000 *:* users:(("node /root/mean",pid=20120,fd=20))
Step 5: Configuring the Nginx server as a Proxy for MEAN
Firstly, you will be required to install the Nginx web server. So to do that, run the following command:
# apt-get install nginx -y
Now create a new Nginx virtual host configuration file by:
# nano /etc/nginx/sites-available/mean
Add the following lines to it:
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 the file and exit.
The next step is to enable the virtual host file. To do so, run the following command:
# ln -s /etc/nginx/sites-available/mean /etc/nginx/sites-enabled/
Now to set the hash_bucket_size, edit the Nginx main configuration file by the following command:
# nano /etc/nginx/nginx.conf
Add the below lines http{
server_names_hash_bucket_size 64;
Save and close the file.
To verify if there aren’t any syntax errors, run the below command:
# nginx -t
You should be able to 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
To apply the changes made in the configuration file, restart the Nginx service by using the following command:
# systemctl restart nginx
All done!
Now open the browser and type the following in the URL bar:
http://ip_address:3000
You should see: Page Hits: 1
The number will increase every time you refresh the page.
That's all.
