View All Products
Compute
Storage
Networking
Databases
Services
Developer Tools
Industries
Pricing
Community
Engage With Us

Deploying a React Application on CentOS 8

Updated Originally authored by Linode
Select distribution:
Traducciones al Español
Estamos traduciendo nuestros guías y tutoriales al Español. Es posible que usted esté viendo una traducción generada automáticamente. Estamos trabajando con traductores profesionales para verificar las traducciones de nuestro sitio web. Este proyecto es un trabajo en curso.
Create a Linode account to try this guide with a $ credit.
This credit will be applied to any valid services used during your first  days.

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

Before You Begin

  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. 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 CentOS 8 guide or the Installing NGINX on CentOS 8 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. Install the Rsync program on your Linode server.

     sudo yum install rsync

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

    sudo yum install git

  7. Install the SELinux core policy Python utilities if you have not already done so. This will give you the ability to manage SELinux settings in a fine-grained way.

     sudo yum install -y policycoreutils-python-utils

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:example_user /var/www/example.com

  4. Use SELinux’s chcon command to change the file security context for web content if you have not already done so.

     sudo chcon -t httpd_sys_content_t /var/www/example.com -R
 sudo chcon -t httpd_sys_rw_content_t /var/www/example.com -R

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. Open the firewall for traffic if you have not already done so.

     sudo firewall-cmd --zone=public --permanent --add-service=http
 sudo firewall-cmd --zone=public --permanent --add-service=https
 sudo firewall-cmd --reload

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

This page was originally published on

web applications apache nginx centos

Your Feedback Is Important

Let us know if this guide was helpful to you.

Join the conversation.
Read other comments or post your own below. Comments must be respectful, constructive, and relevant to the topic of the guide. Do not post external links or advertisements. Before posting, consider if your comment would be better addressed by contacting our Support team or asking on our Community Site.
The Disqus commenting system for Linode Docs requires the acceptance of Functional Cookies, which allow us to analyze site usage so we can measure and improve performance. To view and create comments for this article, please update your Cookie Preferences on this website and refresh this web page. Please note: You must have JavaScript enabled in your browser.