In this blog, we will demonstrate how to build and deploy your first MERN Stack Application on AWS. This application is demonstrating the user registration and login process with the required validations. You can get the complete source code of this application on our GitHub.
In this blog we will cover:
- What is MERN Stack?
- What is MongoDB?
- What is Express.JS?
- What is React.JS?
- What is Node.JS?
- How does MERN Stack work?
- Why choose MERN Stack for full-stack application development?
What is MERN Stack?
MERN stands for MongoDB, Express, React, and Node, after the four key technologies that make up the stack.
- MongoDB – Document Database
- Express.JS – Node.JS Web Framework
What is MongoDB?
What is Express.JS?
Express is a Node.JS web application framework. Developers may use the Express framework to create sophisticated web apps and APIs. It adds another degree of efficiency to the coding process by allowing developers to create server-side code using Express rather than Node.JS in its entirety. This eliminates the need for the same code to be repeated as it is in the Node.JS HTTP module.
Express allows you to create a REST API that allows you to retrieve data using HTTP queries, which are then executed by React.JS.
What is React.JS?
React.JS is the component of the MERN stack. It is responsible for a website’s front-end. It’s a popular library for web developers that want to achieve quick page loading times and smooth animations and transitions.
Because views produced in HTML using React are declarative, developers aren’t required to handle any changes in the view’s state or data. Additionally, React enables the execution of the same code on both the server and the browser.
What is Node.JS?
In essence, Node.JS unifies web application development by allowing developers to use a single programming language for both the server and client sides, rather than having to utilize separate languages for each.
How does MERN stack work?
React.JS Front End
Express.JS and Node.JS Server Tier
The next level down is the Express.JS server-side framework, running inside a Node.JS server.Express.JS has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses.
MongoDB Database Tier
If your application stores any data then you’re going to use a database that’s easy to work with as React, Express, and Node.
That’s where MongoDB comes in: JSON documents created in your React.JS front end can be sent to the Express.JS server, where they can be processed and stored directly in MongoDB for later retrieval.
Why choose MERN stack for full stack application development?
MERN is a full-stack, following the traditional 3-tier architectural pattern, including the front-end display tier (React.JS), application tier (Express.JS and Node.JS), and database tier (MongoDB).
Let’s start with MongoDB, the document database at the root of the MERN stack.
MongoDB works extremely well with Node.JS, and makes storing, manipulating, and representing JSON data at every tier of your application incredibly easy. For cloud-native applications, MongoDB Atlas makes it even easier, by giving you an auto-scaling MongoDB cluster on the cloud provider of your choice, as easy as a few button clicks.
The combination means that JSON data flows naturally from front to back, making it fast to build on and reasonably simple to debug. Plus, you only must know one programming language, and the JSON document structure, to understand the whole system!
Hence, the MERN stack is the choice for today’s web developers looking to move quickly, particularly for those with React.JS experience.
- Create a new Ubuntu server instance on EC2
- Connect to Ubuntu server via SSH
- Setup web server with Node.JS +MongoDB+ NGINX
- Deploy backend API
- Deploy Front end API using React
- Configure NGINX to serve the Node.JS API and React front-end
- Test your MERN stack application running on AWS
Create a new Ubuntu server instance on EC2:
- Sign into the AWS console, go to the EC2 section
- Follow the steps to launch an Ubuntu AMI EC2 instance
- Configure the security group to allow HTTP traffic, click preview, and launch
- Download the key pair, click launch instances then scroll to the bottom and click on View instances to see the instance in running state.
Connect to the Ubuntu server via SSH:
- Using windows, using PuttyGen to convert. pem keypair file to private file (.ppk)
- Use Putty to connect to the EC2 instance via SSH
Setup web server with Node.JS +MongoDB+ NGINX:
While connected to the new AWS EC2 instance in the terminal window:
- Clone the Node.JS + MongoDB API project with the following command:
sudo git clone
- Run the bash script (script.sh) file present in the home directory of the repo
It executes a script to automatically set up and configure a production-ready MERN Stack web server on Ubuntu that includes Node.JS, MongoDB, PM2, NGINX, and UFW.
Deploy backend API:
Follow these steps to set up the Node.JS API on the server and configure NGINX to enable access to it.
- Clone the Node.JS + MongoDB API project into the /opt/back-end directory with the following command
- Navigate into the back-end directory and install all required npm packages with the following command
cd /opt/back-end && sudo npm install
- Start the API using the PM2 process manager with the following command
sudo pm2 start server.JS
The API is now running on Node.JS under the PM2 process manager and listening on port 4000.
Deploy Front-end API using React:
- Clone the React + Redux project into the /opt/front-end directory with the following command
sudo git clone
- Navigate into the front-end directory and install all required npm packages with the following command
cd /opt/front-end && sudo npm install
- Update the app to use real backend API:
- Run the following command to open the main react entry file in the nano text editor. Delete the lines remove the fake backend
sudo nano /opt/front-end/src/index.JSx
- After changes, your code should look like as shown in the following image.
- Configure the path to API:
- Run the following command to open the webpack config file in the nano text editor.
sudo nano /opt/front-end/webpack.config.JS
- Change the apiUrl config property to ‘/api’ like below so it points to the public path we configured in NGINX in the previous section, save the file
- Build the front-end app with the following command
sudo npm run build
The React app is now built and ready to be served from the /opt/front-end/dist directory, in the next step we’ll configure our NGINX web server to enable access to it.
Configure NGINX to serve the Node.JS API and React front-end:
Since our MERN Stack application is made up of two separate projects that both need to be accessed via the same port (HTTP on port 80), we’re going to use NGINX as our public facing web server to receive requests for both the front-end and back-end, and decide where to send each request based on its path. Requests beginning with the path /api/* will be proxied through to the Node.JS api running on port 4000, while other requests will serve the React front-end app.
Follow these steps to configure NGINX for the MERN stack app.
- Delete the default NGINX site config file with the following command
sudo rm /etc/nginx/sites-available/default
- Launch the nano text editor to create a new default site config file with the following command
sudo nano /etc/nginx/sites-available/default
Write required code in this file. After updating the file with code, it should look like as shown in the below image.
- Save the file and restart nginx using the following command
sudo systemctl restart nginx
Test your MERN stack application running on AWS:
Enter the public DNS name of your AWS EC2 instance in a browser to access and test your new MERN stack application.
- Registering User
- Registration Successful
- Existing user -Login
- Logged In User -Successful
In this blog, we explored the concept of MERN, and the different technologies involved in building an application using the MERN stack. MERN is a full-stack, following the traditional 3-tier architectural pattern, including the front-end display tier (React.JS), application tier (Express.JS and Node.JS), and database tier (MongoDB). We also learned how we can build and deploy a MERN-based application on AWS. Stay tuned to keep getting all updates about our upcoming new blogs on AWS and relevant technologies.
Keep Exploring -> Keep Learning -> Keep Mastering
This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At Workfall, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you’re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at workfall.com/partner today.