Deploy a React Application on Linode

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 Linode and local machine so that you can easily deploy your app whenever changes are made.

1. If you have not already done so, create a Linode account and Compute Instance. See our Getting Started with Linode and Creating a Compute Instance guides.

2. Follow our Setting Up and Securing a Compute Instance guide to update your system. You may also wish to set the timezone, configure your hostname, create a limited user account, and harden SSH access.

3. You will need a web server configured to host a website on your Linode.

4. This guide assumes you already have a React app you’d like to deploy. If you don’t have one, you can bootstrap a project quickly using create-react-app.

5. Make sure Git is installed on your system:

   sudo apt install git
   

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

1. Navigate to your web root, or the location from which you’ll serve your React app, and create a directory where your app will live. Most of the time, this will be /var/www, but you can adjust the path and the directory name for your needs:

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

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

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

1. Ensure your web server is configured to serve from the file path created in the previous step.

   Apache

   Modify the DocumentRoot in your virtual host file:

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

   1 2 3 4 5 6 7 8

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

   NGINX

   Modify the line starting with root in the server block for your site:

   File: /etc/nginx/conf.d/myapp.conf

   1 2 3 4 5 6 7 8

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

2. Restart the web server to apply the changes. Use whichever command applies to your web server:

   sudo systemctl restart apache2
   sudo systemctl restart nginx
   

1. Navigate to the directory where your local project lives. For example:

   cd ~/myapp
   

   If you don’t have an existing project to use, you can create one using create-react-app.

2. Using a text editor, create a deployment script called deploy in your app’s root directory. Replace exampleuser with the username of your limited user account, and mydomain.com with your Linode’s FQDN or public IP address.

   File: ~/myapp/deploy

   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/ exampleuser@mydomain.com:/var/www/mydomain.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.

3. Make the script executable:

   sudo chmod u+x deploy
   

4. Run the script:

   ./deploy
   

   Enter your Unix password when prompted.

5. 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.

6. 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.

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