Deploy react-webpack to Digital Ocean with Nginx and Github.

4 min readNov 4, 2015

react-webpack, a yeoman generator, builds your app into a dist/ directory which contains the apps index.html, A webpack bundle app.js, and other assets such as images. Although the generator comes with server.js which starts up a webpack-dev-server I decided to have Nginx serve the index.html and assets in the dist/ directory directly instead of proxying to different node server.

I have been a long time Heroku user. I like that I can host my projects on Github and configure Heroku to redeploy every time I push to a specified branch. However, Heroku is expensive and free acounts go to sleep which makes my apps seam sluggish. 😡 The following is what I am using as a replacement. I will use Github and a Nginx server hosted on a Digital Ocean Droplet

You should note that this post is missing something. I will explain how to setup auto deployment using a Github hook in a later post.

Setup a Github Repository

There are many was to create a repository on Github. One way, if you have an account, is to go to https://github.com/new and fill out the form.

Then clone it to your local machine using the url provided by Github.

In my case I would run the following command to preform the clone.

git clone https://github.com/cameronbwhite/ReactWebpackRepo.git

Generate the react-webpack application

Install Yoeman and the react-webpack generator. At the time of writing this the generator’s latest release is version 2.2.7.

npm install --global yo generator-react-webpack

Enter the directory you created above and run the generator. Hit enter when prompted to select the defaults.

cd ReactWebpackRepo && yo react-webpack

Now make sure everything works by starting up the development server.

npm install; npm start

If its working localhost:8000 should open up in your web browser and you should see something like the following.

If everything works commit the changes and push them to Github.

git commit -a -m “yo react-webpack” && git push origin master

Create a DigitalOcean droplet.

I created the least expensive droplet running Ubuntu 14.04 with node v4.2.1.

After your droplet is created you need to be able to log into it remotely. The rest of the tutorial presumes you have done this successfully.

ssh root@<ip-address-of-droplet>

It’s highly recommended that you setup an admin user instead of doing everything as root but for the sake of simplicity I will not be covering this. Go checkout https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-12-04 for how its done.

Since the $5 a month plan only has 512M of memory npm would crash when I tried to update or download a lot of packages. To fix this I added a 256M swap file. For instructions on how to do this yourself go checkout https://www.digitalocean.com/community/tutorials/how-to-add-swap-on-ubuntu-14-04

Clone/build your react-webpack repository on your Digital Ocean droplet.

I like to my keep websites in a top level directory called /www/ to create this directory run the following on your droplet.

mkdir /www

Then in that directory clone your Github repository

cd /www && git clone https://github.com/cameronbwhite/ReactWebpackRepo.git

Now build it

cd ReactWebpackRepo && npm install && npm run dist

If everything went well you should have everything built under /www/ReactWebpackRepo/dist/.

Install and configure Nginx on your Digital Ocean Droplet.

Install Nginx on you droplet with the following command.

apt-get update && apt-get install nginx

With your favorite editor set the contents of /etc/nginx/sites-available/default to be the following.

server {
    listen 80;
    server_name your.domain.com;
    root /www/ReactWebpackRepo/dist;
    index index.html index.htm;
    location / {
    }
}

Start up Nginx