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!

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.

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

However, if you prefer another place to put them, you can do that. Another common place is in /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.

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.

Install and Configure Nginx to serve your application

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:

This allows Nginx to serve your React app at your domain or your IP! index.html will be called first whenever 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:

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

For more information on configuring Nginx go here.

Now start up Nginx!

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

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!

CompE @ UIUC.