Tutorials

Deploy ReactJS Application on an EC2 Instance

Posted in AWS Tutorial

Updated on Dec 29, 2023

By Mari Selvan

👁️ 90 - Views

⏳ 4 mins

💬 1 Comment

Deploy ReactJS Application on an EC2 Instance

Photo Credit to CodeToFun

🙋 Introduction

Deploying a ReactJS application on an Amazon Elastic Compute Cloud (EC2) instance allows you to host your application on a scalable and reliable cloud infrastructure.

In this tutorial, we'll walk through the process of deploying a ReactJS application on an EC2 instance.

📚 Prerequisites

Before we begin, make sure you have the following prerequisites:

AWS Account and EC2 Access:

Ensure you have an AWS account with access to the EC2 service.
Running EC2 Instance:

Make sure you have an EC2 instance that is up and running.
Elastic IP Association:

Associate an Elastic IP with your EC2 instance to provide a static IP address.
File Transfer with Filezilla:

Set up Filezilla with a connection to your EC2 instance for easy file transfer.
Secure Shell Access with PuTTY:

Configure PuTTY to establish a secure shell connection to your EC2 instance.
Node.js and NPM Installation:

Ensure Node.js and NPM are installed on your EC2 instance for running your Node.js application.

🖥️ Creating a Simple ReactJS App

Let's create a simple ReactJS web application using the specified commands:

Open a terminal or command prompt and run the following command to create a new React app using Create React App:
```
npx create-react-app your-app-name
```
For me npx create-react-app react-js
Change your working directory to the newly created React app:
```
cd your-app-name
```
For me cd react-js
Run the following command to start the development server:
```
npm start
```
This will launch your React app in your default web browser. The development server will automatically reload the page whenever you make changes to your code.
Upon executing the 'npm start' command, the default ReactJS app created by our command will be accessible at http://localhost:3000/. ReactJS automatically opens this URL in your default browser.

Photo Credit to CodeToFun
Open your code editor and navigate to the project folder. The main React components are located in the src directory. You can modify the src/App.js file to make changes to the default app.
We will now proceed to deploy the React application on an AWS Ubuntu EC2 instance.

🚀 Launching an EC2 Instance

After completing the prerequisites, proceed with the following steps to deploy your ReactJS application on an EC2 instance.

Make sure that your EC2 instance is operational and running.

Photo Credit to CodeToFun
Establish a connection to the EC2 instance using PuTTY.

Photo Credit to CodeToFun
Make sure that Node.js and npm are installed on your Amazon Ubuntu Instance.

Photo Credit to CodeToFun
Create a directory on your Amazon Ubuntu EC2 instance with the provided command.
```
sudo mkdir reactjs-website
```
Photo Credit to CodeToFun
Grant permission to the directory to enable file uploads.

Before granting permission, the directory name appears in blue color with transparent background.

After granting permission, the directory name appears in blue color with green background.

Run the following command to grant permission.
```
sudo chmod 777 /home/ubuntu/reactjs-website
```
Photo Credit to CodeToFun

Set Up Express Server to run ReactJS application.

The index.js file below should be located at the root of your ReactJS application.

index.js

Copied

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Transfer your website files and folders from your local machine to an EC2 instance using Filezilla, excluding .git and node_modules folder.

Photo Credit to CodeToFun
Next, use PuTTY to globally install PM2. Use the following command to install PM2.
```
sudo npm i -g pm2
```
Photo Credit to CodeToFun
Navigate to the website directory and run the following command:
```
sudo npm i
```
Before deploying, you need to build your React app. If you haven't built it yet, you can do so with the following command:
```
sudo npm run build
```
Now, initiate the application with pm2 by executing the following command:
```
sudo pm2 start index.js
```
Photo Credit to CodeToFun

Congratulations! We have successfully initiated our ReactJS application using pm2 and express.js. You can now close PuTTY.
Proceed to step 1, where you should copy the Public IPv4 DNS or Public IPv4 address, then paste it into the URL and press Enter.

Photo Credit to CodeToFun

Our ReactJS application is running successfully on our Amazon Ubuntu EC2 instance.

🎉 Conclusion

Congratulations! You've successfully deployed a ReactJS application on an EC2 instance. Remember to monitor your application, set up security measures, and consider using a domain name for a production environment.