Deploy a React Application on Linode

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

Before You Begin

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.
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.
You will need a web server configured to host a website on your Linode.
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.
Make sure Git is installed on your system:
```
sudo apt install git
```

Configure your Linode for Deployment

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

Create Host Directory

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
```
Set permissions for the new directory to allow your regular user account to write to it:
```
sudo chmod 755 -R /var/www/mydomain.com
```

Configure Web Server

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;

}

Restart the web server to apply the changes. Use whichever command applies to your web server:
```
sudo systemctl restart apache2
sudo systemctl restart nginx
```

Configure Local Computer

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.

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.

Make the script executable:
```
sudo chmod u+x deploy
```
Run the script:
```
./deploy
```
Enter your Unix password when prompted.
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.
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 Jenkins or Travis 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 guide on Jenkins 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.

Compute

Storage

Databases

Networking

Developer Tools

Delivery

Security

Services

Industries

Pricing

Community

Engage With Us

Search Results

No Results

Filters