It’s overt from the title only, we are showing below how to host a MEAN stack app on the AWS EC2 instance serve for free. Before heading towards this tutorial, we will first introduce you all to the technology stacks that we have used here. In the following tutorial, we have set up a production-ready web server from scratch on the Amazon EC2 (Elastic Compute Cloud) service. Then, later we have shown how to deploy the custom Mean Stack hosting application to it which mainly supports user registration as well as authentication.

What do you mean by Mean Stack App?

A MEAN Stack application is a software stack that is developed completely on JavaScript. It is a set of technology layers forming up the modern application. MEAN basically represents the usage of JavaScript as a “full-stack development” language, running every specific thing in the application from the front end to the back end. Every letter in MEAN shows a stack component:

• MongoDB – A database server asked using JSON (JavaScript Object Notation) that gathers the data structures in a binary JSON format.
• Express – Node.js web application framework. (A server-side JavaScript framework).
• Angular – A front-end web application platform.
• Node.js – An environment of JavaScript run-time for server-side.

Also Read | 5 APIs You Need On Your Website

Scope of this hosting tutorial

Here, we have entirely focused on successfully setting up the server on AWS EC2. Then, we concentrated on deploying and configuring the front-end and back-end parts of the MEAN stack application to operate together.

According to Stack Overflow’s Developer Survey Results 2017, the technologies used in the Mean Stack hosting are among the TOP 5 of the most famous technologies. Now, they have hosted it on AWS which is highly popular among modern-day developers.

What is AWS?

Amazon Web Services (AWS) is a complete and evolving cloud computing platform that is offered by Amazon including a perfect blend of infrastructure as a service (IaaS), a platform as a service (PaaS), and also a packaged software as a service (SaaS). The services of AWS are free to connect and you have to only for what you are already using. We know already that Amazon has the heftiest market share in the cloud business, top-most Google, Microsoft, and IBM.

They have started offering their free-tier services and you can avail of them by signing up for an AWS account. While signing up, you have to provide your credit/debit card details. AWS will deduct a tiny amount from your respected account which will be credited back to your account after successful verification.

Let’s dive in with the tutorial.

Steps to Mean Stack hosting on AWS:

1. Making EC2 instances on AWS

Firstly, we require a server on which we can work. So, you just have to follow the steps given below to form a new Ubuntu 18.04 server instance on Amazon Web Services (AWS) EC2.

Also Read | Create a Custom React-native Component From Native Java Component

• Visit Amazon Web Services and then you can simply sign in to the Amazon Web Services (AWS) management console. If you are a beginner to this and do not have an account, then just select the “Create a Free Account” tab and follow the steps.
• Now you have to find the EC2 service section.
• You will see there a “Launch Instance” button. Click that button.
• Select Amazon Machine Image (AMI) – You need to instantly check the “Free tier only” checkbox. Then, type “Ubuntu” there and press enter. Now, you have to select the “Ubuntu Server 18.04” AMI.
• Select Instant Type – There is a term named “t2.micro” (Free tier eligible) instant type. Click on that term and then click “Configure Security Group” visible in the top menu.
• Configure Security Group – Now, add a fresh rule there to permit HTTP traffic. Then you can select “Review and Launch”.
• Review – Now, select the button launch.
• You have to select “Create a new key pair”, and then add a name there for the key pair (e.g. “my-aws-key”). Then, click on the “Download Key Pair” to download the private key instantly. It will help you to connect to the server through SSH.
• Now, click on “Launch Instances”. Then, you have to scroll a little to the bottom of the page and then opt for “View Instances” to see the whole details of the new Ubuntu EC2 instance that you are launching.
• Your EC2 Instance is now good to go.

2. Connect to Ubuntu EC2 Instance through SSH

Once the EC2 instance arrives at a running state, then you can easily connect through SSH with the private key that you downloaded earlier.

Connect from Mac OSX

• To connect, you have to open a terminal window and thereafter update the private key file’s permission. You can use the command for this chmod 400 <path-to-key-file> e.g. chmod 400 ~/Downloads/my-aws-key.pem. Besides, the key must not be viewable to the public for SSH to work properly.
• Now, you need to copy the “Public DNS (IPv4)” property from the instance description tab that you will receive from the AWS Console. Then, you can instantly connect to the instance from the terminal window itself using the command ssh -i <path-to-key-file> ubuntu@<domain name> e.g. ssh -i ~/Downloads/my-aws-key.pem ubuntu@ec2-52-221-185-40.ap-southeast-2.compute.amazonaws.com
• You will see a question there “Are you sure you want to continue connecting (yes/no)?”. Simply enter yes to add that URL to your complete list of already known hosts.

Connect from Windows

If you have joined through Windows, you can easily connect to your instance through SSH using the PuTTY SSH client. In case of instructions, you can go through the Connect Using PuTTY in the AWS docs.

Also Read | Top Productivity Private Video Hosting Platforms For Business

3. Setup Web Server with Node.js + MongoDB + NGINX

The command mentioned here makes a specific script to automatically set up and then configure a production-ready Mean Stack hosting web server on Ubuntu comprising NGINX, UFW, Node.js, and MongoDB.

You have to run the below-given command while staying connected to the new AWS EC2 instance in the terminal window:

curl
https://gist.githubusercontent.com/cornflourblue 	
 	/f0abd30f47d96d6ff127fe8a9e5bbd9f/raw
 	/e3047c9dc3ce8b796e7354c92d2c47ce61981d2f/setup
    -nodejs-mongodb-production-server-on-ubuntu-1804
    .sh
| sudo bash

4. Deploy Node.js + MongoDB Back-end API

In order to successfully set up the Node.js API on the server and then configure NGINX to get the access available to it, you require to follow the below steps:

• Initially, clone the Node.js + MongoDB API project into /opt/back-end the directory by using the command sudo git clone https://github.com/cornflourblue/node-mongo-registration-login-api /opt/back-end
• Now, you need to navigate into the back-end directory and there you can easily install all necessary npm packages by using the command cd /opt/back-end && sudo npm install
• Then, commence the API with the PM2 process manager along with its command sudo pm2 start server.js

So, now the API is running on Node.js under the PM2 process manager and listening to it on port 4000. Also, only port 80 (HTTP) is accessible to the public on the server so can’t knock the API yet. It can only be achieved if we will configure NGINX as a reverse proxy to pass via HTTP traffic to the API.

Also Read | Sparkplug- A JavaScript Compiler improved Google Chrome 91

5. Develop and Deploy the Angular Front-end app

You need to follow the below steps to develop the Angular application on your local machine. Then, you can deploy it to the AWS server further.

How to develop the Angular App

1. You have to clone the Angular project in a folder on your local machine using the command git clone https://github.com/cornflourblue/angular-8-registration-login-example.git. Moreover, if you do not have the Git CLI installed, you can visit this URL https://git-scm.com/downloads to download it.
2. Now, navigate into the cloned directory and install every needed node package available there using the command npm install. If you require Node.js (including npm) to install, you can easily download it from https://nodejs.org/
3. Then update the application to utilize the real backend API:

For this, first, open the Angular application module file (/src/app/app.module.ts) in a text editor.

You need to delete the below lines from the file to delete the fake backend that the Angular application uses by default:

// used to create fake backend import { 
 		fakeBackendProvider } from './_helpers';

// provider used to create fake backend 
 		fakeBackendProvider

4. You have to configure the path to API. For that:

• First, open the webpack config file (/webpack.config.js) inside a text editor.
• Then, you can change the config property of the apiURL to '/api' like given below:

// global app config object config: JSON.stringify({ 
 		apiUrl: '/api' })

5. Now, develop the Angular application using the command npm run build.

Deploy the Angular App from Mac OSX

• You need to connect to the server through SSH as already mentioned above. Then, make a new folder there for the front-end application by using the command sudo mkdir /opt/front-end
• Now, there is a demand to change the owner of that particular folder to the ubuntu user and group them by using the command sudo chown ubuntu:ubuntu /opt/front-end. This helps us to easily transfer the front-end files in the subsequent step.
• Then, transfer the compiler application to the server itself through SSH using the command:

scp -i <path-to-key-file> -r <path-to-local-dist-folder>/* ubuntu@<domain name>:/opt/front-end. E.g. scp -i ~/Downloads/my-aws-key.pem -r ~/Downloads/angular-8-registration-login-example/dist/* ubuntu@ec2-52-221-185-40.ap-southeast-2.compute.amazonaws.com:/opt/front-end

Deploy the Angular App from Windows

If you have reached this step, it shows you have already followed all the instructions on how to connect from Windows using PuTTY in the AWS docs.

• You have to connect to the server through SSH as mentioned above and then make a fresh folder for the front-end application using the command sudo mkdir /opt/front-end
• Now, just change the owner of that folder to the ubuntu user and also group it with the following command sudo chown ubuntu:ubuntu /opt/front-end. It basically permits us to transfer the front-end files in the upcoming step.
• Transfer the compiled application to the server through SSH with the PuTTY Secure Copy client using the command:

pscp -i <path-to-key-file> -r <path-to-local-dist-folder>\* ubuntu@<domain name>:/opt/front-end. E.g. pscp -i C:\Downloads\my-aws-key.ppk -r C:\Downloads\angular-8-registration-login-example\dist\* ubuntu@ec2-52-221-185-40.ap-southeast-2.compute.amazonaws.com:/opt/front-end

Configure NGINX to serve the Node.js API and Angular front-end

Since the MEAN Stack app is developed with two different projects both demands to be accessible through the same port (HTTP on port 80). Here, we will be using NGINX as our public-facing web server to get requests from the back-end and front-end. Then, we will decide later when to send every request based on its route. Requests that are commencing with the path /api/* will be proxied through to the Node.js api that is already running on port 4000. While the other requests will cater to the Angular front-end application and the files associated with it (js/css/images).

Steps to configure NGINX for the MEAN Stack Application

• Initially, you need to delete the default NGINX config file using the command sudo rm/etc/nginx/sites-available/default
• Now, just launch the nato text editor to make a fresh default site config file with sudo nano /etc/nginx/sites-available/default
• Then, you just have to paste the below config:

server { charset utf-8; listen 80 default_server; server_name _; #
 		angular app &
front-end files location / { root /opt/front-end; 
 		try_files $uri /index.html; }
# node api reverse proxy location /api/ { proxy_pass 
 		http://localhost:4000/; } }

• Press Ctrl + x for saving the file and choose Yes to save it.
• Now, restart NGINX using the command sudo sydtemctl restart Nginx.

NGINX Config Reference

server {...} is a server that has the configuration for a virtual server inside NGINX. charset utf-8; it utilizes the charset directive to mainly configure the virtual server to dispatch all content with the help of UTF-8 encoding. Certainly, it protects any Unicode characters that are inside your JavaScript from being directly converted before being delivered to the browser which can later cause many errors (e.g. invalid regular expression errors).

listen 80 default_server; it uses the listen directive to configure the virtual server to receive all the requests on port 80. It later sets it as the default virtual server on this NGINX server. server_name_; it mainly uses the server_name directive to perfectly set the server name to an underscore (_) to create this server block a catch-all block that equals any domain name that does not equal another more particular server block. Considering, this example has only one server block and it will equal all domain names.

location / { ...}; it shows a location block including the configuration for the requests that have a URI starting with a forward slash (/) unless that request URI equals another more particular location block. root /opt/front-end/dist; it uses the root directive to mainly set the root directory to the front-end dist folder (/opt/front-end/dist)

try_files $uri /index.html; it uses the try_files directive to initially check for the presence of a file matching the request URI ($uri) and returning it if there is one already. Moreover, if no file matches that request URI, then it automatically defaults to returning /index.html.

location /api/ { ...} refers to a location block including the configuration for requests that contain a URI starting with /api/. proxy_pass http://localhost:4000/; uses the proxy_pass directive to proxy requests beginning  /api/ through to the Node.js API running at http://localhost:4000/.

Test your new MEAN Stack application running on AWS

Now, after numerous steps, you have to enter the hostname of your AWS EC2 instance in a browser to instantly access and then test your new MEAN Stack application. The hostname is the “Public DNS (IPv4)” property existing on the instance description tab in the AWS Console.

Wrapping Up

Voila!! Now, you have hosted your MEAN Stack App and launched it successfully. Note that you have to ensure to stop your instance on AWS once you get done with the tutorial and have tested your application. There are limited numbers of hours per month with the free account, so do not run the server all the time. The billing gets started when you exhaust your free usage limit.

For more information related to hosting your MEAN Stack app on AWS, you can contact our best dedicated Codersera team of developers.