Run a Static React Application on Linode/Ubuntu

I had a personal project where I wanted to create small portfolio site. Nothing special or spectacular, basically an “About Me” page with some links to things like github, twitter, etc.

The layout is extremely basic but there is some navigation that is internal and I may potentially expand it. With that in mind, I used a react starter kit that I have (https://github.com/jslnriot/react-webpack2-bootstrap4-sass-demo). For this site, react is probably a bit much, but I had two other motives to use it.

1: I wanted to add font-awesome for usage in the demo build
2: Get a React app running on my VPS

Building the app was very straight forward once I loaded the font-awesome npm module, and the sass loader for it. Beyond that, it was breaking the app into a few components, adjusting CSS, then moving the code to my server.

I have a few node apps running in this and other production servers. In order to start them up and keep them running I use the PM2 library for process management. For some reason, I kept trying to start the app with PM2 and it kept failing. After a few minutes of trying that I realized it was not the way to go (because it was wrong), so I solved the problem this way ….

Running Locally

The app is a React app built using Webpack 2, Bootstrap 4/Sass.When you run the following locally it builds the application (creating a /dist directory that contains an index.html file) and runs a local webpack dev server.

npm run dev

This is accomplished via the package.json file and is setup on this line

"scripts": {
    "clean": "rimraf dist",
    "dev": "npm run build && ./node_modules/.bin/webpack-dev-server",
    "prod": "npm run clean && webpack",
  },

Running on Live Web Server (ubuntu/nginx)

In my production environment I am running Ubuntu 16.04 and I have nginx setup as my HTTP server. Keeping in mind what I mentioned earlier about the build process creating a /dist directory that is essentially the bundled up compressed files that run the site, we can add a prod command package.json in the scripts portion.

"scripts": {
    "clean": "rimraf dist",
    "dev": "npm run build && ./node_modules/.bin/webpack-dev-server",
    "prod": "npm run clean && webpack",
    "prodVPS": "NODE_ENV=production npm run clean && webpack"
  },

Now, assuming you have Node and NPM installed on the server, you can run

npm run prodVPS

That builds the /dist directory in prod mode. Once you have that you can simply add this piece to the nginx config file for the site you are working on in the sites-available directory.

All this is doing is making sure index.html (in the /dist directory) is loaded initially and when each link it hit.

Summary

1: Move project to a production server
2: Add a build rule to your package.json
3: Run npm install
4: Run npm run prod (to create the /dist directory
5: Add nginx rule