Hosting a React App on Digital Ocean with NGINX

Grant Van Horn
Jul 23, 2017 · 2 min read

One of the goals I have set out for myself is becoming proficient in understanding NGINX. This is the first step in that path. My goal is to host a React application on Digital Ocean while using NGINX as the server.

Facebook has been maintaining a very popular project called Create React App. This project lets users get started developing quickly by giving a lot of features right out of the box: ES6, dev server, CSS and image import within JS, a build script for production (which we will be using) and a suggested file structure. The README for this project also has many instructions on how to add other features to your project.

Digital Ocean will let us quickly spin up a server that is suitable for hosting a React project. There are many preset OS builds and hardware allocations to be chosen from and they have a $10 a month plan that is perfect for React.

NGINX will tie all of this together and serve the production built files created with the Create React App build script.


Create React App

Fire up terminal. Let’s get our app running locally.

Install crate-react-app globally. Create and name your project. Start it up.

The sooner we push to the server and establish a working build the better. From there a build process and workflow can be established.


Digital Ocean

The thing that makes DO so great is how many options they have. It is easy to pick your OS and get a server spun up quickly.

The feature we will be taking advantage of is the “One-click apps”.

Select “Node JS 6.11.0 on 16.04” to get things going.

This will give us everything we need. The reason we did not go with the $5 a month plan is because npm requires more memory to run without getting into the details of setting up a larger swap space.

The next step is login into your server, setting up any domains you would like and getting your code onto the server.

Once your code is on the server navigate to the root directory of your create react app directory. From there we can build the project so NGINX can serve the files needed.

$ npm run build

Within the build directory we have all of the needed files ready to be served.


NGINX

Install NGINX and edit its config to look like so.

Make sure the path directory ends in /build.

From here you should see your app running when you hit your servers IP address or domain name if you have one.


The goal was to learn more about NGINX. I would consider running my create react app via DO using NGINX a success.

Grant Van Horn

Written by

Web Developer located in Atlanta, Georgia.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade