Hosting any React Application on AWS EC2 using pm2

Here we will discuss systematic procedure to deploy a react application through pm2 (using FileZilla for SFTP) in an AWS EC2 instance running Amazon Linux.

Configuring your EC2 server

For information on how to setup, refer Setting Up with Amazon EC2 in the Amazon EC2 User Guide for Linux Instances.

Once your EC2 instance is up and running, lets SSH into it

ssh -i “my-key-pair.pem” ubuntu@ec2–xx–xxx–xx–xx.compute-1.amazonaws.com

After you connect to the instance, you will need to install following software, required to run your application.

Install Node.js:

sudo apt-get update

sudo apt-get install nodejs

Install npm(Node.js package manager):

sudo apt-get install npm

Install PM2:

sudo npm install pm2@latest -g

Note: pm2is a production runtime and process manager for Reactjs applications; which will be used to run our application instead of npm start

Copying your React app to AWS EC2

At this stage, the instance is ready to host the application so you need to copy the react application files to launch it.

The easiest way to copy files from your local machine to the remote instance is using FileZilla.

Configure FileZilla:

• Got to Edit (Preferences) > Settings > Connection > SFTP
• Click “Add key file”
• Browse to the location of your .pem file and select it.
• A message box will appear asking your permission to convert the file into ppk format. Click Yes, then give the file a name and store it somewhere.
• If the new file is shown in the list of Keyfiles, then continue to the next step. If not, then click “Add keyfile…” and select the converted file.
• Now, go to File > Site Manager. Add a new site with the following parameters:

Protocol: SFTP -SSH File Transfer Protocol

Host: Your public DNS name of your EC2 instance, or the public IP address of the server.

User: For Ubuntu, the user name is ubuntu.(Check the docs)

Note: FileZilla automatically figures out which key to use. You do not need to specify the key after importing it as described above.

***********************************************************************

After configuring and connecting FileZilla to the remote EC2 server, create the directories that will host the files and create a new folder my-app

mkdir /home/my-app

Set permissions on my-app to enable the upload of files:

sudo chown ubuntu /home/my-app/*

To upload, you can simply drag and drop your application folder in the Remote site section, or follow the steps below:

• Go to Transfer > Manual Transfer,
• Under Local File section select the application folder on your local machine following Remote path: /home/my-app

At this point, the files will copy to the remote instance.

Installing dependencies

SSH into the EC2 instance again to install dependencies:

cd /home/my-app

npm install

You can verify that everything is working fine:

Go to my-app and execute the command npm start

Starting the PM2 Processes

The instance is now ready. By default, the application will host on port 3000

In case you need to host your application on a port less than 1024,you can use Authbind.

Type the following command:

pm2 start node_modules/react-scripts/scripts/start.js — name “my-app”

Screenshot below indicates that the react application is running:

The application is now running (to list the status of your application at any point of time use the command pm2 ls, for more commands check PM2 CheatSheet), and if you access the public DNS of the instance, you can see your application up and running.

If you found this article useful to you, please give it some claps so that it reaches others who can benefit from it as well. Please feel free to share your thoughts in the comments below.