Do you have a wonderful product idea that keeps springing into your head? However, not sure which technology or framework to adopt for easier and faster deployment of scalable web applications, you can go for MERN Stack. A MERN Stack is a collection of front-end, back-end, and database components that is best suited for building dynamic application development. In MERN applications, each line of code is written in JavaScript, which is one of the reasons why MERN is gaining popularity among developers. Let’s do this straight and get our hands on our first MERN application on AWS.
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?
- Hands-on
- Conclusion
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
- React.JS – Client-side JavaScript Framework
- Node.JS – Premier JavaScript Web Server
What is MongoDB?
This is the component that is in charge of database management. It’s a schema-less, non-relational document-oriented database. The JSON format is used to alter data in this scenario. However, if the developer is familiar with the necessary libraries, converting it to JavaScript data (or vice versa) is rather simple. Because this approach permits database structures to alter over time, data management is made even easier and more versatile. It becomes simple to scale them.
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?
Node.JS is a lightning-fast and efficient programming language that works well with JavaScript to create scalable network applications. To put JavaScript files together, it uses its own module system (each file is treated as a separate module).
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?
The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.
React.JS Front End
The top tier of the MERN stack is React.JS, the declarative JavaScript framework for creating dynamic client-side applications in HTML. React lets you build complex interfaces through simple Components, connect them to data on your backend server, and render them as HTML.
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.
Express.JS (running on Node.JS) and React.JS make the JavaScript/JSON application MERN full stack, well, full. Express.JS is a server-side application framework that wraps HTTP requests and responses and makes it easy to map URLs to server-side functions. React.JS is a front-end JavaScript framework for building interactive user interfaces in HTML and communicating with a remote server.
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.
Hands-on
Steps:
- 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 https://github.com/workfall/mern-backend.git
- 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
sudo git https://github.com/workfall/mern-backend.git/opt/back-end
- 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 https://github.com/workfall/mern-frontend.git/opt/front-end
- 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 buildThe 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
Conclusion
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.
Meanwhile …
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.
