Deploying create-react-app with Nginx and Ubuntu

So you finished your React app and you are ready to release it to the world, but you have no idea how to deploy it. There are plenty of options of deploying a react app like using Amazon S3 or using Now(which is actually pretty cool but requires you to pay more), but in this guide, we will deploy it using our own Ubuntu server and Nginx.

The technologies we will use are:

• Nginx: Lightweight and high performance Web server or Reverse Proxy. It is mainly used to act as a reverse proxy to quickly serve static files and send requests to proxied web servers or act as a load balancer.
• Ubuntu 16.04: A very popular Linux Distro. Version 16.04 is the latest Long Term Support Version and will be until 2021.
• DigitalOcean: A Cloud Infrastructure Company that allows you to create a droplet/server in the “cloud”. It starts off at $5/month, making it very affordable.

First off, follow this tutorial made by DigitalOcean themselves about setting up an Ubuntu server. I’m not going over it because it should be pretty simple — creating an account, a couple button clicks, and boom you have a server in the “cloud”! Isn’t that awesome? Any Cloud service that allows to deploy a server, such as Amazon AWS or Google Cloud would also work. Also, if you would like to add a domain pointing to your server, check out this.

Now that you have setup your Ubuntu machine, SSH into it and update!

sudo apt-get update

Install Node.js & npm

I like using the Current Stable version of Node.js, which is currently in version 8, but if you want to install a different version you can change the 8 to whatever version you’d like.

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs 

What setup_8.x does is check whether your operating system version is supported and adds the correct repository. This command also installs npm so you don’t have to worry about that.

Clone your repository on your machine

I have been using the LAMP stack for a while so I like putting my web app files in /var/www/.

sudo mkdir /var/www
cd /var/www/

However, if you prefer another place to put them, you can do that. Another common place is in /www/.

sudo mkdir /www 
cd /www

Since you wouldn’t want to use sudo every time you interact with files in /var/www or /www, let’s give your user privileges to these folders. Constantly using sudo increases the chances of accidentally trashing your system.

sudo gpasswd -a "$USER" www-data
sudo chown -R "$USER":www-data /var/www
find /var/www -type f -exec chmod 0660 {} \;
sudo find /var/www -type d -exec chmod 2770 {} \;

If you decide to use /www, change the /var/www in those commands to /www.

Now that you are inside either /www or /var/www and have given your user privileges, let’s clone your repository, install dependencies, and build your React app. You can either clone it with HTTPS or set up a deploy key and clone it via SSH.

git clone [Your repository URL]
cd [Your Repository Name]
sudo npm install
sudo npm run build

Install and Configure Nginx to serve your application

sudo apt-get install nginx

To configure Nginx, go /etc/nginx/sites-available/. There will be a template default file so if you would like to keep it, copy it. After you do that, use your favorite text editor(I’d recommend vim) and change /etc/nginx/sites-available/default to:

server {
   listen 80 default_server;
   root /var/www/[Your repo name]/build;
   server_name [your.domain.com] [your other domain if you want to];
   index index.html index.htm;
   location / {
   }
}

This allows Nginx to serve your React app at your domain or your IP! index.html will be called first whenever yourdomain.com/ is accessed. If you put your repository inside /www instead of /var/www, change the text after root.

If you’d like to serve other static files, such as a pdf document inside a folder like /var/www/[your repo name]/files/, you can do that by adding this inside the configuration file:

location /files/ { 
   autoindex on;
   root /var/www/[your repo name]/files;
}

So /etc/nginx/sites-available/default will look like this:

server {
   listen 80 default_server;
   root /var/www/[Your repo name]/build;
   server_name [your.domain.com] [your other domain if you want to];
   index index.html index.htm;
   location / {
   }
}
location /files/ { 
   autoindex on;
   root /var/www/[your repo name]/files;
}

For more information on configuring Nginx go here.

Now start up Nginx!

sudo service nginx start

If you changed up your repository or made any changes to the configuration, you can restart Nginx with:

sudo service nginx restart

And you’re done! If you go to your browser and type in the IP address of your server or your domain, you should see your React app live!

If you enjoyed reading it, please leave a clap/comment! I’m pretty new at this and I’d like to get better — any response is welcome :)

Also, check out my other posts!

Timothy Ko - Medium