Step-by-Step Guide: Deploying a React.js Application on AWS EC2

By Anand Mohan

Introduction

Hosting your React.js application on an AWS EC2 instance gives you a powerful and flexible platform to make your app globally accessible. In this guide, I’ll provide a comprehensive, step-by-step walkthrough to deploy your React application on an EC2 Linux instance.

Whether you’re exploring AWS for the first time or want a refresher, this guide ensures a seamless deployment process for your frontend application.

Overview of Topics

1. Prerequisites
2. Setting Up an EC2 Instance
3. Connecting to the Instance via SSH
4. Installing Node.js and npm
5. Cloning and Preparing the React App
6. Building the Application
7. Serving the App with serve
8. Configuring Inbound Traffic Rules
9. Accessing the Application

Prerequisites

Ensure you have the following before starting:

• AWS Account: Sign up at AWS.

• React Application: Either use an existing app or create one with create-react-app.
• Key Pair File: A .pem key pair file to access your EC2 instance via SSH.
• Basic Linux Knowledge: Familiarity with Linux commands will help but is not mandatory.

Step 1: Setting Up Your EC2 Instance

1. Log into your AWS Management Console and go to the EC2 dashboard.
2. Click Launch Instance and follow these steps:

• Choose Amazon Linux 2 or Ubuntu as the base image.
• Select an instance type, such as t2.micro (eligible for the AWS free tier).
• Configure instance details and storage based on your needs.
• Assign a key pair for secure SSH access.
• Create a security group that allows HTTP (port 80) and SSH (port 22) traffic.

3. Click Launch Instance and wait for it to start.

4. Note your instance’s public IP address or DNS.

https://www.youtube.com/watch?v=coXY-aD1ap8&t=14s

Step 2: Connecting to the EC2 Instance via SSH

Connect to your instance using SSH:

ssh -i <path-to-your-key>.pem ec2-user@<your-ec2-public-ip>

For Ubuntu instances, replace ec2-user with ubuntu.

Switch to the root user for easier setup:

sudo su

Step 3: Installing Node.js and npm

Install Node.js and npm, as they are essential for building and running React apps.

For Amazon Linux 2:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash  
. ~/.nvm/nvm.sh  
nvm install 16

For Ubuntu:

sudo apt update  
sudo apt install -y nodejs npm

Verify the installation:

node --version  
npm --version

Step 4: Cloning and Preparing Your React App

Install Git and fetch your React app’s repository:

Install Git

sudo yum install git -y    # Amazon Linux  
sudo apt install git -y    # Ubuntu

Clone the Repository

git clone <your-repository-url>  
cd <your-project-folder>

Step 5: Building the React Application

Install the required dependencies:

npm install

Build the app for production:

npm run build

This generates a production-ready build in the build/ folder.

Step 6: Serving the App with serve

Install the serve package globally:

npm install -g serve

Serve your application:

serve -s build -l 80

The app is now accessible via your instance’s public IP address on port 80.

Step 7: Configuring Security Group Rules

Update your security group settings to allow traffic:

1. Go to the EC2 dashboard.
2. Select your instance and click the Security tab.
3. Edit inbound rules to allow HTTP (port 80) traffic.
4. Save the changes.

Step 8: Accessing the Application

Open your browser and navigate to:

http://<your-ec2-public-ip>

You should see your React app live! 🎉

Optional: Using PM2 for Persistent Hosting

To keep your app running after logging out, install and use PM2:

1. Install PM2 globally:

• npm install -g pm2

2. Serve your app using PM2:

• pm2 serve build 80 --name "react-app"

3. Check the app’s status:

• pm2 status

Summary

Deploying a React.js application on AWS EC2 gives you a scalable hosting solution for your frontend app. With this setup, you can easily host small to medium-sized applications while leveraging the flexibility of the AWS cloud.

If you found this guide helpful or have any questions, leave a comment below!

Feel free to follow and applaud for more in-depth DevOps and cloud tutorials.

Thank you for reading! 💚
— Anand Mohan 🌻✨