Deploy a React Application into a Web Server.

Task:

Deploy a React app into a Web Server

Project Description:

A Dev app team recently developed a React JS application, which they will like to host on a web server. The app is not ready for production but they still want to you to create a POC on how the react app will be deployed into a web server. As a temporary solution, they have created a sample react app that you can use for the POC.

The app is available at this https://github.com/techchak/techchak-sample-react-app-1. The team will like you to quickly spin up a web server to host the application for testing. Here is what is needed from you, create an amazon Linux server in a default VPC.

The server should be publicly accessible, Configure the security group to allow ssh on port 22 (Its just for testing) and open port 80 HTTP of the ec2 instance. Start the application and make sure you can access the app via the EC2 instance public IP or public DNS.

Project source:- Techchak

Project Prerequisites

• You should know how to Clone a Repository.
• Have an AWS account with the appropriate User permission
• You should know how to create an ec2 instance
• You should know how to run a react app on a server.
• Familiar with Web Applications, their dependencies, and how they work.
• Should be familiar with NodeJS and React.
• Should know about Docker and Dockerfile.
• Must be familiar with the commands for creating and building Docker Images.
• Must have an idea of Docker Hub so that after creating the image we should push images to DockerHUB.
• Code Editor of choice.

Firstly we need to clone the repo with the react app and build our Dockerfile locally, Test on the local machine and push to docker hub so we can pull it when needed on our EC2 instance on AWS. please refer to my walk-through where I gave a detailed step on how this is done in my last blog https://medium.com/@tobyadu/build-docker-image-from-react-app-6026e0ed477b

Next Log in to your AWS account, Search EC2 on the console and navigate to Lunch instance, give your instance a name, select the Amazon Linus 2 AMI, I am using the free tier instance type t2micro.

Select a keypair or create a new keypair if you don't have one.

In the networking section, We will be using a default VPC and a public subnet and will configure our security group to allow ssh access on port 22 and http on port 80 from anywhere to allow public access to our web server. Also don't forget to enable auto-assign public IP and then click on lunch instance.

You should observe your instance up in the instance API and running

ssh into your instance, update the package manager, install git, nodejs, npm, docker and their dependencies. Step by step guild was covered in my last project Build Docker Image from React App : https://medium.com/@tobyadu/build-docker-image-from-react-app-6026e0ed477b

Now lets us clone the source code repo from https://github.com/techchak/techchak-sample-react-app-1 into our running instance

Change directory into the directory containing react app. Run the npm start command and then the npm build command. Steps to building and pushing the image to docker hub where it can be accessed.

Now we need to log in with our docker hub credentials (username and password) on our instance to be able to pull the docker file from the docker hub registry. We use the command docker login it will prompt us to provide credentials and if correct you should see login succeeded. With the docker pull command and the name of our dockerized image which in this case is adutoby/saidatech:saidatech we should be able to pull our react app image to our running instance.

Use docker images command to confirm image is present in your instance

Now we need to run the image exposing port 80 so that it is accessible by the public as we earlier configure our security group to allow public access through the internet.

Finally, head on to a browser and enter your EC2 instance public IP address or the Public DNS address you should be able to access your React web application .

We have come to the end of this project, Congratulations if you made it this far. We cloned a react app repo to our local machine, built an image, tag the image, and pushed it to docker hub registry. We then pulled the image to our AWS EC2 instance and exposed it for public consumption by configuring our firewall to allow public access through the internet on our public IP address via HTTP on port 80.

Please lookout for the concluding part of the project series where we will Deploy a Load Balancer in Front of React Server

Thank you for reading.

I will appreciate your feedback and comments please.

#KLAP

#Keep #learning and #practicing