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.
In This Article
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.
