Deploy a web application in production in just six steps
By: Viplove Prakash
Tags: Web Development, AWS, React, Software Development, Frontend Development

We all have a few passion web projects which we built, but very few are actually available on the internet. Most of those projects are in our local disk or uploaded on Github.

I have also built many projects over the years and uploaded them in a GitHub repository. Few projects were created as a hands-on learning project for new programming languages like Python and Typescript, or frameworks like React and Angular. However, there are also a few projects which I created to actually build a web solution to solve user problems.

Deploying these applications in production will not only be a great achievement for you but also a great learning/solution for others.

This article will help you in understanding how to deploy code in production in just 6 steps. It will also provide details about each step, a sample code based on an example, and finally various tools and services available for a simple, cost-effective process.

Some codes are based on the web application technology stack, but the information is applicable for every type of web application. Finally, for this article, I am using a MERN Stack web application (MongoDB, Express, React, and NodeJS) I have built as an example.

Web applications interact with clients using HTTP protocols, so it needs a web server that can understand the HTTP request sent by the clients and then send an HTTP response to the client.

Check out the Web application architecture post if you want more details.

Step 1. Create a Virtual Machine

Since Web servers need computation power to perform their task in a fast, successful, and consistent manner, Virtual Machines(VMs) becomes an integral part of Web Application Architecture.

Many cloud-based virtual machines provide just in time, cost-friendly solutions. One of the most popular options is Amazon EC2.

How to create an Amazon EC2 VMs

— Select AWA EC2 Instance to create a virtual machine

— Select machine configuration — OS, Ram, Storage etc.

— Select network/secutrity protocols to connect with the VM — SSH 20, HTTP 3000, Node 5000

— Create a user for the VM — AWS automatically creates a user (Ec2user)

— Create a keypair for authentication and authorization — Public key(Saved in AWS) and Private key (Saved in local)

How to connect to the newly created Amazon EC2 VMs

Windows:

— Putty — SSH: 22 username PPK Key ipadress

— WinScp — SSH: 22 Username PPK Key ipadress

Linux/Mac:

— CMD Line — SSH:22

Web Browser:

— browser(http) — http 80 ipadress

Step 2. Install Web Server on the VM

Web servers have the capability to communicate using HTTP Protocol. They can receive and process client requests and send responses back to the client.

There are many Web servers available in the market. Each web server has its own unique advantages. The most popular web servers are — Ngnix, Apache, IIS.

Install Ngnix

sudo yum -y install nginx

Install Apache

sudo yum -y install httpd

Step 3. Set up an environment on the Web Server

Again, this will depend on the technology stack of the web application.

Step 4. Deploy web application code to the Web Server

If I have only a front-end web application, then it’s a very simple step. Since front-end applications are static websites containing HTML, CSS, and JS, we don’t need to install additional libraries.

Even if you have built a front-end application using React or Angular, once you build the project, it merges and compresses all code into HTML, CSS, and JS and publishes it under the dist folder.

Deploy a Front-end only Project

- Build the front-end project code in the local

- Update local server config to use the the right location for entry point

- Copy the dist/build code to server entry point

- start the local server service

Apache can be used for a front-end-only project. Entry point for Apache is located at /var/www/HTML.

AWS S3 can also be used to host a front-end-only project.

Github pages can also be used to host a front-end-only project for free.

sudo su

yum update -y

yum -y install httpd

mv front-end-project/build/* /var/www/html

service httpd start

Deploy a back-end Project

- Install Node/npm (if applicable)

- Install Database (MongoDB if applicable)

- Install PM2 (production process manager for Node.js)

- Copy the back-end project code in the server using curl/git clone

- Install all project dependency

- Run the project forever using PM2

- Update local server config to use the the right location for entry point

The above example is for a Nodejs, MongoDB back-end project. Instead of local MongoDB, MongoDB Atlas (a cloud DB solution) can also be used. Nginx is the most popular local web server option. Apache can be used for a static/front-end project.

Step 5. Map the virtual machine Public IP address with a unique domain name

- Go to service where the domain name is registered

- Go to the DNS section, and create a new record to map the VM’s Public IP adress with the given domain name

Step 6. Access the web application

Open Browser and go to the public IP address/registered domain name.