How to Deploy a ReactJS Web Application on DigitalOcean

Photo by Florian Olivo on Unsplash

DigitalOcean is a cloud provider that offers services structured around different cloud service models — infrastructure-as-a-service (IaaS),platform-as-a-service(PaaS), software-as-a-service(SaaS) and so on.

This article is a walkthrough on how to deploy a ReactJS web application on DigitalOcean’s IaaS offering — DigitalOcean Droplets — with Nginx.

CAVEAT: Creating a React app is outside the scope of this article. However — after you are done writing code for your React application — you will need to run npm run build to bundle your React application into a /build directory — in order to optimize your application for best performance within a deployment environment.

For this article, the main highlights are:

• Create a DigitalOcean Droplet.
• Install Nginx on it.
• Get source files from Git repository.
• Modify configuration files
• Serve web content from source files for React app.

Now, let’s get into it.

Setup a DigitalOcean Droplet

DigitalOcean offers an infrastructure-as-a-service (IaaS) option in the form of virtual machine instances called Droplets.

Provision a droplet with an Ubuntu 20.04 image, with the lowest payment plan ($5/month) — since we will be using the instance for demonstration purposes. Also, choose password-based authentication at this stage. This droplet is our host machine for the Nginx server.

Note that the default username is root@<droplet-external-IP> ; that is, root@xxx.xx.xx.xx . Your password is whatever value you pass in while creating the droplet.

Once the droplet is created, set up SSH keys for secure log in to your droplet.

Install Nginx

After you set up SSH-based authentication, create a new user with administrative privileges.

Switch to the new user:

$ su <username>

Install Nginx:

$ sudo apt update 
$ sudo apt install nginx

Configure firewall

You need to set firewall rules using the firewall service ufw to allow web access to the Nginx server. View a list of firewall configurations with the following command:

$ sudo ufw app list

You should get this output:

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

To allow HTTP traffic, use the actual profile name — rather than the value 80 for HTTP and 443 for HTTPS. Run the command:

$ sudo ufw allow 'Nginx HTTP'
$ sudo ufw allow OpenSSH

Verify that the configuration is active:

$ sudo ufw status

This should be the output:

Status: active
To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
Nginx HTTP                 ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
Nginx HTTP (v6)            ALLOW       Anywhere (v6)

If your output says status:inactive, run the command sudo ufw enable

Run the following commands to restart the server (for the changes to take effect) and check the status of the Nginx server:

$ sudo systemctl restart nginx
$ sudo systemctl status nginx

Nginx should be active and running as shown:

nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Tue 2021-09-07 17:20:37 UTC; 23h ago
       Docs: man:nginx(8)
   Main PID: 6448 (nginx)
      Tasks: 5 (limit: 9513)
     Memory: 5.1M
     CGroup: /system.slice/nginx.service
             ├─6448 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
             ├─6449 nginx: worker process
             ├─6450 nginx: worker process
             ├─6451 nginx: worker process
             └─6452 nginx: worker process

Enter your droplet’s IP address on your browser to confirm that Nginx is running properly. You can retrieve your IP address using the command:

$ curl -4 icanhazip.com

If Nginx is running properly, the default Nginx start-up page should display on your browser.

Deploy React application

Generally, Nginx serves web documents from the /var/www directory — the default start-up page originates from an index.html file in the /var/www/html directory.

Therefore, as a rule, place the web documents for your website in a named directory within the /var/www directory.

Let’s add the source files for the ReactJS application.

Clone your Git repository (for the React app) the /var/www directory:

$ cd /var/www
$ git clone <git-repo-link>

This should create a directory /var/www/<your-directory-name> containing your source files/directories.

The /build directory for the React application — within /var/www/<your-directory-name> — is the most important here because it contains the index.html file to be served.

TIP: You may delete all other files and directories except the /build directory that contains the index.html file — since that is the only directory needed.

Change ownership of the /var/www/<your-directory-name> directory to ensure you have the permissions to modify files within the directory. Run the command:

$ sudo chown -R $USER:$USER /var/www/<your-directory-name>

This will assign ownership to the new user you created above.

Next, let’s create a server configuration for our React application.

Add server configurations

All Nginx configuration files are within the /etc/nginx directory:

• The main configuration file for global Nginx settings is the nginx.conf located in /etc/nginx/.
• Configuration files for each domain(website) hosted on the server are located within /etc/nginx/sites-available.

The configuration files in /etc/nginx/sites-available usually end with the .conf extension — however, you may choose to name them without the extension. These configuration files help Nginx identify and track the websites that it hosts.

Navigate to /etc/nginx/sites-available . It should contain a default or default.conf file. Create your own .conf file:

$ touch <filename>.conf

Open the newly created file in any text editor — we’ll be using vi :

$ vi <filename>.conf

The configuration for the React application will be placed in a server block. This block specifies how requests to the IP address or domain should be handled.

Paste the following configuration snippet:

# Virtual Host configuration for <your-domain-name>
server {
       listen 80;
       listen [::]:80;
#       server_name <your-domain-name>;
       root /var/www/<your-directory-name>/build;
       index index.html;
       location / {
               try_files $uri $uri/ =404;
       }
}

• The listen directive specifies the HTTP port to allow web access — 80 for IPv4 and [::]:80 for IPv6 .
• The server_name directive specifies the domain name or website address the server handles requests for. (This directive can be omitted if you do not have a domain name).
• The root directive points to the location of the web documents — html , css , js files. The line below the root directive specifies the possible html files to look for and read from.
• The location directive takes a URL parameter and matches it with whatever is specified — / in our case — to enable the server to respond with the appropriate content for that URL.

Run the command :wq to save and exit the editor.

Create a symbolic link between your/etc/nginx/sites-available<filename>.conf file and /etc/nginx/sites-enabled directory:

$ ln -s /etc/nginx/sites-available<filename>.conf /etc/nginx/sites-enabled

Some information on symbolic links:

A symbolic link creates a special type of file that contains a pointer to a referenced file or directory.

Both the symbolic link and the file being referenced are indistinguishable from one another — whatever is written to the original file reflects in the symbolic link.

A common use case for symbolic links is in managing multiple versions of a single software. The symbolic link can point to the latest version of the software even though previous versions are available on the system — this way all files that depend on the software can just use the symbolic link instead of having to worry about versions.

Symbolic links to the configuration files are in the /etc/nginx/sites-enabled directory. The global Nginx configuration file nginx.conf reads from this directory — through the include directive — in order to ensure that only the current versions of configurations are applied.

Run the following command to confirm that there are no issues with your configuration:

$ sudo nginx -t

The following output indicates a satisfactory configuration:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Now, restart the Nginx server. Run the command:

$ sudo systemctl restart nginx

Refresh your browser. The React application should be successfully deployed.

Conclusion

Deploying an application on the cloud makes it possible to easily get an application up and running with minimal cost. You can take this process a step further by setting up a CI/CD pipeline to automate the build/deploy process.

You can also explore DigitalOcean’s App Platform — a PaaS offering — here.

~~~~~~~~~~ ~~~~~~~~ Thank you for reading! ~~~~~~~~~~~~~~~~~