How to deploy React app on AWS Lightsail, and build your own website

Deploying and configuring your React app and Lightsail instance to showcase your website!

Photo by Igor Miske on Unsplash

Introduction

This is the first article and step in a 4 steps walkthrough to help anyone who would like to learn to build a website from scratch without bundled tools and website templates such as Squarespace, Wix and etc. The 4 parts are broken down as the following:

1. Registering a domain name with Google Domains.
2. Server hosting with AWS Lightsail.
3. Coding your website in ReactJs.
4. Installing your ReactJS app on the server and configuring Lightsail.

This is broken down into 4 parts to keep each article short and separate, and so that anyone who may have issue with 1 part, may just read through that particular article.

With the introduction out of the way, let’s get started.

What we’ll cover in this part

We’ve reached the final part of the series. We’ve prepared all the tools and now we just got to deal with the tricky part of deploying our React app on our Lightsail Server and configuring the settings to make it accessible by the rest of the internet.

But don’t worry, I’m here to guide you through step-by-step and to make sure that we can get our app hosted on our Server and accessible by the internet.

By the end of it, you’ll have a React app and website successfully deployed on Lightsail, and accessible by the public through your domain name.

Recap of previous parts

At this stage, we have a React app on our local machine, an unconfigured Lightsail instance with an attached staticIP that is running on AWS, and a domain name that is set up to point to our Lightsail instance’s IP address. If you do not have these things in place, you may review the previous parts on how to get it.

Configuring Lightsail

Let’s start off with configuring our Lightsail instance. Let’s log into to our AWS console using our IAM user and go to our Lightsail page and access our instance through AWS’s web SSH terminal by clicking this button:

Click this button to access our Lightsail instance through AWS’s web SSH terminal

You may also download a SSH client such as PuTTy, and use the SSH key to access it, but that’s more complicated. To learn how to do so, here is aws’s guide on it.

NGINX

Once we’re in Lightsail, the first thing we want to do is to install NGINX. NGINX is a power and popular web server that works very well with React.

Back on your terminal, update your package listings and install the latest version of NGINX with apt-get:

sudo apt-get update
sudo apt-get install nginx

Node.js and NPM

Then we want to install Node.js and NPM. We can do so with the following command. This will download and install node 18.x using apt and nodesource on your Lightsail instance. (For future upgrades, you may follow the documentation here)

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Add project files to Lightsail Server

Before we continue with the rest of the Lightsail configuration, we need to add our React app project files to Lightsail. To do so, we’ll rely on GIT to make sure all everything is copied over, and so that you may continue to use GIT for version control and working on your project with different machines.

We’ll start with creating a GitHub account so that we’ll have a remote repository that we can push and download updates from different machines.

Head over to GitHub and create an account.

Once that is done, create a new repository for your React app. You may name it as anything.

Do not add a README file and .gitignore when creating. We can add it locally.

Once you’ve created your GitHub repository, you will be able to see a HTTPS link that we’ll use to upload our local React app to.

When we use “create-react-app” it automatically initializes a Git file for us, so what we need to do now is to add the Github remote repository link and push our local files to it.

$ git remote add origin <REMOTE_URL>
# "origin" is the name of the Github repository or remote repository. You can change the name to something else.
# Sets the new remote
$ git remote -v
# Verifies the new remote URL
$ git push origin main
# Pushes the changes in your local repository up to the remote repository you specified as the origin
# if you've changed your default branch to "master" on Github, then you should change "main" to "master" here

Once that is done, your cmd/terminal should show that you’ve pushed your React app files to Github and when you refresh your Github repository, you should see the files there too.

Lastly, to complete this step, we need to pull the files from Github into our Lightsail instance. Now we need to go back to our Lightsail terminal, and type in the following lines

cd ../..
# change directory to the root
cd opt
# change directory to /opt so we can install our React app here, as recommended by linux documentations.
sudo git clone https://github.com/your_username/your_repository_name.git
# Clone our React app to our /opt folder from our Github repository
# Need sudo as we need root user permission here
cd your_repository_name
sudo npm i
# If the process hangs here, you may have selected the 512 Lightsail instance. Change it to a 1gb instance, and this step will work.
# This installs all the node module dependencies that our React app requires
sudo npm run build
# This creates a production build that our server will be serving to our visitor's browser.

Back to NGINX

Now we have built our React app on our server, and we can configure our NGINX settings to display our React app when anyone visits our website. We do this with the following lines.

cd /var/www/
sudo mkdir your_domain.com
# Create a folder for your website
sudo rm -r html
# Remove the default html file in /var/www/
sudo ln -s /home/your_username/your_repository_name/build/* /var/www/your_domain.com/
# Make a symbolic link to your project's build folder with the ln -s command
# This will mirror all the information from your build folder to the your_domain.com directory

Then we modify the NGINX configuration files

cd /etc/nginx/sites-available
sudo rm -r default
# Delete the default file here
sudo vi your_domain.com
# "vi" is the command for opening VIM, which is a text editor
# Press "I" to go into insert mode, where you can edit the file. Then press "ESC" to exit insert mode. A
# And when you're ready to save it, type ":wq" to write and quit VIM.

Then copy the following code within the new file. Make sure to be in “Insert mode” by pressing “i”.

server {
 listen 80 default_server;
 listen [::]:80 default_server;
 root /var/www/your_domain.com;
 index index.html;
 server_name your_domain.com www.your_domain.com;
 location / {
   try_files $uri $uri/ /index.html;
 }
}

Lastly, we need to copy this new server file to the sites-enabled folder, and we can do so with another symbolic link

sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/your_domain.com

Let’s check our work by running:

sudo nginx -t

And if it’s successful, restart our server:

sudo systemctl restart nginx

If everything is done, you should be able to view your site by entering your domain name in a browser, when you type in http://yourdomainname.com.

It wouldn’t work for https connection because we’re still lacking a SSL certificate and configuring our Lightsail firewall.

SSL certificate

We shall use a free service called Let’s Encrypt to get our SSL certificate. And these are the steps to get it:

# Add CertBot repository for the latest version
sudo add-apt-repository ppa:certbot/certbot
# Update the package list afterwards to pick up the new information
sudo apt-get update
# Install CertBot's python/NGINX package
sudo apt-get install python-certbot-nginx
# Run the certbot plugin.
sudo certbot --nginx -d your_domain.com -d www.your_domain.com

# Enter your email address and agree to the terms of service if required. Certbot will then present you
# with some options, and select [2] in the case for "Redirect".
# If everything went smoothly, CertBot will update your configs, reload NGINX and confirm success with a message.

Last step!

This is the last and final simple step to configure our Lightsail firewall to allow HTTPS port.

We do so by clicking into our instance page, and selecting the Networking tab.

Then under the IPv4 Firewall, we add a rule for HTTPS and click on “Create”

And we’re done! Now, if you type in yourdomainname.com into your browser, you should be able to see your react app there. Congrats!

Review

Congratulations on building your own website with all the base services instead of relying on bundled services! If you wish to review the previous steps, you may use the links below. And now, you can simply iterate on your app by working on your local React file before pulling it into your Lightsail instance using Git.

Here are the links to the rest of the parts:

Part 1: Register your Google domain

Part 2: Setup AWS Lightsail

Part 3: Create your React app

If you have any questions, please feel free to drop a comment in the story, and I’ll do my best to help you answer them. Thank you!

Let’s stay connected. Follow me on Medium if you like this article. You may also view my website at yuhaocooper.com to view my result of building my own website using the above steps.