Ads Top

Run a Static React Application on Linode/Ubuntu

Read

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

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.