Deploying a React Application on Ubuntu 18.04

What is React?

React is a popular JavaScript library for building user interfaces. While React is often used as a frontend for more complex applications, it’s also powerful enough to be used for full client-side applications on its own.

Since a basic React app is static (it consists of compiled HTML, CSS, and JavaScript files), it is easy to deploy from a local computer to a Linode using Rsync. This guide shows how to set up your Ubuntu 18.04 Linode and local machine so that you can easily deploy your app whenever changes are made.

Before You Begin

1. Familiarize yourself with our Getting Started guide and complete the steps for setting your Linode’s hostname and timezone.

2. This guide will use sudo wherever possible. Complete the sections of our Securing Your Server to create a standard user account, harden SSH access, and remove unnecessary network services.

3. Install and configure a web server to host a website on your Linode. This guide’s examples will use the Apache and NGINX web servers. Complete the steps in the Installing Apache Web Server on Ubuntu 18.04 LTS guide or the Installing NGINX on Ubuntu 18.04 LTS guide.

4. This guide assumes you already have a React app you’d like to deploy. If you don’t have one, you can quickly bootstrap a project following the steps in the Create an Example React App section of this guide. This step should be completed on your local system.

5. Update your Linode’s system.

   sudo apt update && sudo apt-get upgrade
   

6. Install Git on your local computer if it is not already installed.

   sudo apt install git
   

Configure your Linode for Deployment

The steps in this section should be performed on your Linode.

Create your Host Directory

1. If it does not yet exist, create your site’s web root directory. Most of the time, it will be located in the /var/www directory.

   sudo mkdir -p /var/www/example.com
   

2. Set permissions for the new directory to allow your regular user account to write to it:

   sudo chmod 755 -R /var/www/example.com
   

3. The Rsync program will execute its commands as the user you designate in your deployment script. This user must be the owner of your site’s web root. Replace example_user with your own user’s name and /var/www/example.com with the location of your site’s web root.

   sudo chown -R example_user:www-data /var/www/example.com
   

   Note

   Depending on how you have configured your web root’s directory, www-data may or may not be the group that owns it. To verify the directory’s group, issue the following command:

   ls -la /var/www/
   

   You will see a similar output:

   drwxrwxr-x 3 example_user www-data     4096 Apr 24 17:34 example.com

Configure your Web Server

In this section, you will update your web server configuration to ensure that it is configured to point to your site’s web root.

1. Update your configuration file to point to your site’s web root.

   Apache

   Modify the DocumentRoot in your virtual host file with the path to your site’s web root.

   File: /etc/apache2/sites-available/example.com.conf

   1 2 3 4 5 6 7 8 9

   <VirtualHost *:80> ServerAdmin webmaster@example.com ServerName example.com ServerAlias www.example.com DocumentRoot /var/www/example.com/ ## Modify this line as well as others referencing the path to your app ErrorLog /var/www/example.com/logs/error.log CustomLog /var/www/example.com/logs/access.log combined </VirtualHost>

   NGINX

   Modify the root parameter with the path to your site’s web root.

   File: /etc/nginx/sites-available.example.com

   1 2 3 4 5 6 7 8 9

   server { listen 80; listen [::]:80; root /var/www/example.com; ## Modify this line index index.html index.htm; }

2. Restart the web server to apply the changes.

   Apache

   sudo systemctl restart apache2
   

   NGINX

   sudo systemctl restart nginx
   

Configure your Local Computer

Install the Node Version Manager and Node.js

You will need Node.js installed on your local computer in order to build your React app prior to copying your site files to the remote Linode server.

1. Install the Node Version Manager (NVM) for Node.js. This program helps you manage different Node.js versions on a single system.

   sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
   

2. To start using nvm in the same terminal run the following commands:

   export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
   [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
   

   Verify that you have access to NVM by printing its current version.

   nvm --version
   

   You should see a similar output:

   0.35.3

3. Install Node.js:

   Note

   As of writing this guide, the latest LTS version of Node.js is v12.16.2. Update this command with the version of Node.js you would like to install.

   nvm install 12.16.2
   

4. Use NVM to run your preferred version of Node.js.

    nvm use 12.16.2
   

   Your output will resemble the following

   Now using node v12.16.2 (npm v6.14.4)

Create an Example React App

If you already have a React App that you would like to deploy to your Linode, you can skip this section. Otherwise, follow the steps in this section to create a basic React app using the create-react-app tool.

1. Use the Node Package Manager to create your React app.

    npm init react-app ~/my-app
   

Create your Deployment Script

1. Navigate to your app’s directory. Replace ~/my-app with the location of your React app’s directory.

   cd ~/my-app
   

2. Using a text editor, create a deployment script called deploy.sh in your app’s root directory. Replace the following values in the example file:

• example_user with the username of your limited user account.

• example.com with your Linode’s fully qualified domain name (FQDN) or public IP address.

• /var/www/example.com/ with the location of your site’s web root. This is where all of your React app’s local build/ files will be copied to on the remote server.

  File: ~/my-app/deploy.sh

  1 2 3 4 5 6 7 8 9 10 11

  #!/bin/sh echo "Switching to branch master" git checkout master echo "Building app" npm run build echo "Deploying files to server" rsync -avP build/ example_user@example.com:/var/www/example.com/ echo "Deployment complete"

  This script will check out the master branch of your project on Git, build the app using npm run build, and then sync the build files to the remote Linode using Rsync. If your React app was not built with create-react-app, the build command may be different and the built files may be stored in a different directory (such as dist). Modify the script accordingly.

  Note

  If your React app’s directory is not initialized as a Git repository, the command git checkout master will return a fatal: not a git repository (or any of the parent directories): .git error. However, the script will continue on to the next commands and the files should still be transferred to your remote Linode server. See our Getting Started with Git guide to learn how to initialize a Git repository.

1. Make the script executable:

   sudo chmod u+x deploy.sh
   

2. Run the deployment script. Enter your Linode user’s password when prompted by the script.

   ./deploy.sh
   

3. In a browser, navigate to your Linode’s domain name or public IP address. If the deploy was successful, you should see your React app displayed.

4. Make a few changes to your app’s src directory and then re-run the deploy script. Your changes should be visible in the browser after reloading the page.

Next Steps

Deployment can be a complex topic and there are many factors to consider when working with production systems. This guide is meant to be a simple example for personal projects, and isn’t necessarily suitable on its own for a large scale production application.

More advanced build and continuous integration tools such as Travis, Jenkins, and Wercker can be used to automate a more complicated deployment workflow. This can include running unit tests before proceeding with the deployment and deploying to multiple servers (such as test and production boxes). See our guides on Jenkins and Wercker to get started.

More Information

You may wish to consult the following resources for additional information on this topic. While these are provided in the hope that they will be useful, please note that we cannot vouch for the accuracy or timeliness of externally hosted materials.

• React - A JavaScript library for building user interfaces
• Deploy a React App with Sass Using NGINX