How to Simply Deploy a React App on Digital Ocean

Today, for the first time, I deployed a React based website. It seemed a steep learning curve, and took me a few attempts to get it going, but now that I have - I am really excited to have my new website up and running. This tutorial is going to focus on the steps that I took to get it done, and as a place to compile other resources on the matter of deploying a React app on Digital Ocean. We'll be deployed with a github repo as well in this tutorial.

As a final note, this is as simple of an deployment as I could devise and find. That being said, make sure you follow up with securing your server, any private information, and what not.

It's time to buckle up and get coding!

EDIT: I've been looking into nginx, the server we use in this tutorial to serve our website from. In the sources below you'll find a link to some more materials on the topic of setting up your server while I work on getting my own tutorial put together on how to properly set up the server.

Step 1: Creating our Droplet

The first thing we are going to need to do is create our droplet on DigitalOcean. If you haven't already set up an account, you can head on over with this link to sign up and you'll get a $10 credit for your own projects, and you'll support me at the same time!

Create the droplet is pretty easy, click the new droplet button at the top of your fresh new account, and then select the ubuntu server. For the sake of this tutorial we'll be using the $5 server, based in New York.

After your droplet's been set up you'll want to open up the console by clicking on the "more" option, then selecting access console ( or by clicking console in your droplet settings ). Once you're here, set up your access by following the directions in the email you received when you droplet completed set up.

Now that your droplet is ready, and you have root access let's get started.

Step 2: Perform updates and install software

Now we're going to get everything we need installed and up to date. Let's start with updating apt-get. In your droplets console, input:

$ sudo apt-get update

Now that we've got it up to speed, let's use it to install git and nginx, which we'll be using in a little bit:

$ sudo apt-get install git 
$ sudo apt-get install nginx

Next we need to get Node and NPM installed and functioning properly, to do that we are going to be navigating to the root folder, downloading the latest version of node (which you can find here, and then extracting it into a node directory:

$ cd ~
$ wget https://nodejs.org/dist/v4.4.5/node-v4.4.5.tar.gz
$ mkdir node
$ tar xvf node-v*.tar.?z --strip-components=1 -C ./node

Next (per the official Digital Ocean instructions) we want to configure the global prefix of npm and create the symbolic links to the Node packages in the default path. From our root directory:

$ mkdir node/etc
$ echo 'prefix=/usr/local' > node/etc/npmrc

Let's now move some files around and assign ownership to our node directory:

$ sudo mv node /opt/
$ sudo chown -R root: /opt/node

Did something go wrong?

Personally, I had some issue with this string of commands, as it was moving the contents of my node directory into the /opt folder, not the whole node folder. Make sure that the node directory in your root location is moved into a node directory in the /opt folder. You can navigate to the /opt directory and check it's contents with:

$ cd /opt
$ ls

If it returns the contents of the node directory (ie: bin CHANGELOG.md etc include lib LICENSE README.md share) you can move them into a node directory with this command:

$ mkdir node
$ sudo mv bin CHANGELOG.md etc include lib LICENSE README.md share node

Now assign the root as owner of the node directory again:

$ sudo chown -R root: node

Back on track

Now just a few more things to finish up our installation of node:

$ sudo ln -s /opt/node/bin/node /usr/local/bin/node
$ sudo ln -s /opt/node/bin/npm /usr/local/bin/npm

With some luck, node should be functioning properly now, check it with:

$ node -v

If your console returns something like v4.4.5 you're all set! We're going to want to update NPM now, luckily it's much easier than installing it in the first place:

$ npm install npm -g

NOTE:

If you're installing a Node.js application or server you'll need to also install PM2:

$ npm install pm2 -g

You can find more detailed instructions from the very well written docs over at Digital Ocean.

Step 3: Creating swappable memory

The next thing we are going to want to do is add something called 'swappable memory' to our droplet. Our current droplet only comes with 512mb of ram, and we're going to need more than that to get our application installed. NPM install requires a significant amount of memory to install the entirety of most package.json files, so we're going to help it out by creating swappable memory. This will allow our droplet to handle issues concerning lack of RAM space. This basically works by allocating a piece of our storage and then using it as RAM.

Let's create our allocation and set it's size to 2gb by executing these commands:

$ cd ~
$ sudo fallocate -l 2G /swapfile

Now, check that it was created successfully by typing:

$ ls -lh /swapfile

You should get a little read out that returns the date it was created and the size of the swapfile.

Now we want to enable our swapfile and give it the right permissions (to prevent any risk to our security).

$ sudo chmod 600 /swapfile
$ sudo mkswap /swapfile
$ sudo swapon /swapfile

Verify that it's working with:

$ sudo swapon -s

Once we've confirmed that our swapfile is working, let's make it a permanent feature of our droplet so that we don't have to enable it each time we boot up our server. Open up the fstab document with this command:

$ sudo nano /etc/fstab

Then all the way at the bottom append:

/swapfile none swap sw 0 0

There are a couple settings on our swappable memory you should tweak as well, but it isn't required to make our server run but they will improve the performance for larger applications. If you'd like to, you can follow the official docs here to learn about "swappiness" and "cache_pressure".

Step 4: Install our repo and configure nginx

It's time to download and install our repository from github! Navigate to the root directory and create a www directory where we'll install our application.

$ mkdir /www
$ cd /www
$ git clone https://github.com/SOME_REPO.git
$ cd SOME_REPO
$ npm install

Lastly we need to configure nginx to tell our droplet how to handle traffic to our public ip address. Navigate to the nginx sites-available directory where we'll move the existing default configuration and create a new one:

$ cd /etc/nginx/sites-available
$ sudo mkdir old
$ sudo mv default old
$ sudo vi default

vi FILENAME will open up the editor where we can add the following code:

server {  
    listen 80; //your port here
    server_name your.domain.com; //your domain name here, or the public ip address if you don't have one yet
    root /www/SOME_REPO; //your application directory
    index index.html index.htm;
    rewrite ^/(.*)/$ $1 permanent;
    location / {
       try_files $uri index.html;
    }
}

You'll want to save this and exit by hitting the escape button, then typing :x and hitting enter. Now let's start our nginx server;

$ service nginx start

And that's that! Using nginx we are able to serve our application to clients. A very simple deployment for a very simple React application. As I continue to learn more about deployment processes, security, and more I'll add them below to the sources part of my article. Until then, enjoy and best of luck on your deployment - code on!


Sources

The official Digital Ocean deployment directions

Another set of directions I used from Medium.com

How to create swappable memory per official docs

Configuration Pitfalls in NGINX

David Meents

React.js developer, web designer, and business owner.

Subscribe to David Meents

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus