Welcome to the first episode of the "Build & Deploy" series, where we will walk through the process of building and deploying various web applications. In this inaugural episode, we will focus on a React application and deploy it on an Amazon EC2 instance. This guide is intended for DevOps engineers and developers who wish to gain a comprehensive understanding of the build and deployment process for a React app on a virtual machine.

1. Prerequisites

Before starting, ensure you have the following prerequisites:

Node.js and npm installed on your local machine.
An AWS account.
Basic knowledge of React, JavaScript, and AWS EC2.
SSH client to connect to the EC2 instance.

2. Setting Up the Development Environment

Installing Node.js and npm

Download and install Node.js from the official website. npm is included with Node.js, so it will be installed simultaneously.

Verify the installation by running the following commands:

node -v
npm -v

Verifying the installation

Installing Create React App

Create React App is a command-line tool that allows you to set up a new React project with a sensible default configuration. Install it globally using npm:

npm install -g create-react-app

3. Creating a React Application

With Create React App installed, we can now create a new React application.

npx create-react-app my-react-app
cd my-react-app

The above commands create a new directory named my-react-app and install all the necessary dependencies.

Running the React Application Locally

To verify that everything is set up correctly, start the development server:

npm start

Open your browser and navigate to http://localhost:3000 to see the default React application.

4. Building the React Application

Before deployment, we need to create a production build of the React application. This optimizes the app for performance and prepares it for deployment.

npm run build

This command creates a build directory containing the production-ready files.

5. Setting Up the EC2 Instance

Creating an EC2 Instance

Log in to the AWS Management Console.
Navigate to the EC2 Dashboard and click on "Launch Instance".
Choose an Amazon Machine Image (AMI). For this example, we'll use the Ubuntu LTS 20.
Select an instance type. The t2.micro instance type is suitable for this tutorial and is free-tier eligible.
Configure instance details, add storage, and add tags as needed.
Configure security group settings:
- Allow SSH (port 22) from your IP address.
- Allow HTTP (port 80) from anywhere.
Review and launch the instance.
Download the key pair (private key file) for SSH access.

Connecting to the EC2 Instance

Use the SSH client to connect to your instance:

ssh -i /path/to/your-key-pair.pem ec2-user@your-ec2-public-ip

6. Deploying the React Application on EC2

Installing Node.js and npm on EC2

Update the package index:
```
 sudo apt update
```

Install Node.js and npm:

 curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
 sudo apt install -y nodejs

Transferring the Build Files to EC2

On your local machine, create a compressed archive of the build directory:
```
 tar -czvf build.tar.gz build/
```

Use SCP to transfer the build archive to your EC2 instance:

 scp -i /path/to/your-key-pair.pem build.tar.gz ubuntu@your-ec2-public-ip:~

SSH into your EC2 instance and extract the build files:
```
 tar -xzvf build.tar.gz
```

7. Configuring a Web Server

To serve the React application, we will set up an Nginx web server.

Installing Nginx

Install Nginx:
```
 sudo apt install nginx -y
```

Start and enable Nginx to run on boot:

 sudo systemctl start nginx
 sudo systemctl enable nginx

Configuring Nginx

Create a new Nginx configuration file for the React app:
```
 sudo nano /etc/nginx/sites-available/react-app
```

Add the following configuration to serve the React app:

 server {
     listen 80;
     server_name your-ec2-public-ip;

     location / {
         root /home/ec2-user/build;
         try_files $uri /index.html;
     }
 }

Create a symbolic link to enable the configuration:

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/

Remove the default Nginx configuration if it exists:

sudo rm /etc/nginx/sites-enabled/default

Restart Nginx to apply the new configuration:

sudo systemctl restart nginx

8. Verifying the Deployment

Open your browser and navigate to the public IP address of your EC2 instance to verify that the React application is running.

http://IP-of-your-Ec2/

9. Conclusion

In this episode, we covered the essential steps to build and deploy a React application on an EC2 instance. We set up the development environment, created a new React app, built it for production, and deployed it using an EC2 instance with Nginx. Future episodes will delve into more complex deployment scenarios and other web frameworks.

Stay tuned for the next episode, where we will explore the deployment of a Node.js application.

✉Endcard:

❤ If you found this blog helpful and informative, don't forget to give it a like!

🔄 Share this valuable knowledge with your friends and colleagues, so they can also benefit from understanding the power of DevOps!

👉 Stay updated with my latest posts and never miss out on exciting content! Click that Follow button to join and stay in the loop!

💌Thank you for following along. If you have any questions or feedback, feel free to leave a comment or reach out via my LinkedIn - abdallah-qamar.

Happy building and deploying!

Build & Deploy Series: Episode 1 - Building and Deploying a React Application on EC2

Introduction to React apps

Table of contents