Setting up a React Web Application on AWS — On an EC2 Instance

So after a long time thought of writing a medium article. But what do I write about 😡 😡?? When I was doing my work for the day, had to host a React Web Application for a demo. Voila!! and now I’m writing about it so that you also might come across that sort of a situation and this guide might come in handy. And who knows I might also search on Google “How to host a React web application on AWS” in future and come across the same article that I have written here 😂 😂😂😂.

In this article, I’m not going to tell you what is a web application and what is React. I hope you all know about them better than me.




In this article, I will walk you through creating a sample React Web Application and hosting it on AWS. When talking about web application hosted on AWS (not the static web page hosting), I have come across two ways to do that on AWS. But there might be more other ways also 😆. One way is to host the application in AWS EC2 instance and the other way is to use AWS Elastic Beanstalk. In this article, I’ll tell you how to do that with AWS EC2. Will cover web application hosting with Elastic Beanstalk in a separate article.

So these will be the steps that I will go through.

  1. Creating a Sample React Web Application
  2. Setting up an AWS EC2 instance.
  3. Hosting the Web Application and Access from Browser.

Creating a Sample React Web Application

So we will start creating the sample web application using React.

It is possible to manually create a React app, but Facebook has created a node module create-react-app to generate a boilerplate version of a React application. So we will first install it. Run the following command to install it globally.

sudo npm install -g create-react-app

Then we will be able to generate a React boilerplate app from it. Run following to generate the template.

create-react-app react-demo

This will create a project folder with the name “react-demo”.

Next, we will add this project to GitHub.

Now since we have a project to host, we will go and create the AWS EC2 instance.

Setting up an AWS EC2 instance

First, you need to login to the AWS Management Console. I’m not explaining here how to create an AWS account. If you a newcomer, you can create an account and there is a free tier that you can use.



Once you log in, you will see all the AWS Cloud Services. Select EC2 listed under “Compute” Category.




Click on “Launch Instance” button. It will take you to a screen where you can select the OS that needs to be running on the instance that you set up. I’ll be using Ubuntu 16.04 AMI. Then after selecting the AMI, you will be taken to another screen where you can choose the instance type, the memory, no. of CPUs and those kinds of configurations. Since I’m not focusing more on creating EC2 instance in this article, I’ll go with the Free Tier option and Launch the instance.

Then you will be asked to select an existing key pair or to create a new key pair. I’ll create a new key pair. Once you give the name to the new key pair, you will be able to download the key pair to your computer. Keep it in a secure place. Then hit on “Launch Instance”. It will take a few minutes to spin up your new instance. Once it’s ready you will see the Instance Status flag as “running”. So that’s it on how creating the EC2 instance. But in order for you to host the web app, you need to access the EC2 instance from your command line. So how to do that??

Hosting the Web Application and Access from Browser

In order for you to access the EC2 instance, you need to SSH to the instance. Before doing that you need to allow SSH web traffic in the new EC2 instance coming from port 22. For that go to Security Groups under EC2. Select the relevant security group from there. Then in the bottom of the page, you will see the security group details. Select the “Inbound” tab from there. Then click on Edit and add a rule to there allowing SSH web traffic on port 22. You can limit SSH access only to your IP or you can allow anyone to access it from any IP.



So we have allowed SSH connections to the newly created EC2 instance. So let’s go ahead and get connected to it.

To connect to the instance you need the previously downloaded key file(The one you downloaded when creating the EC2 instance). Go to the location where it’s stored.

You need to keep this file secure because by using this anyone can access the EC2 instance. First, you need to give proper permissions to the file.

chmod 400 <key_file_name>.pem

Then to connect to the instance you also need to know the public DNS of your instance. You can get that from AWS console. After that to connect to the instance run following command.

ssh -i <key_file_name>.pem ubuntu@<public_DNS_of_instance>

Voila!! Now you are connected to the EC2 instance from your terminal. To run the React app you need to set up a few dependencies on the EC2 instance. So set up and configure, git, NodeJS and required dependencies on the instance that you just connected. Once you are done you need to take a checkout from the GitHub Repo of the project that you are going to host. So clone the project and run

npm install

to install required dependencies.

After installing the dependencies run npm start so that the web app will start running.

Now the web app is running and how to access that through the browser.

To see the running app from the browser you need to paste the Public DNS of the EC2 instance on the browser. That’s not all!!. The application is running on port 3000 normally. So you need to add that part to your URL too. So the URL will look something like following.

http://<public_DNS_of_instance>:3000

So you will be able to see your web app running from the browser. Is it really???

Noo. Still, you won’t be able to see your web app through the browser and browser will keep looting until it gets a timeout.

So what’s wrong with the application??

Nope. it’s not the applications that are causing the issue. You have to allow the EC2 instance to be accessed through port 3000. Remember you set up SSH permissions for your instance? In the same way, add a “Custom TCP Rule” from the Inbound rules allowing web traffic on port 3000.

That’s it and you will be able to see your application from the browser now onwards!!.

Remember that the stuff that I explained here is only for development purposes only. Some additional steps need to be added to you are doing this pro production environment.

Hope you had a good reading!!

Thanks for reading!!




Comments

Post a Comment