How to get your React app on GitHub Pages

The Short Version

Posted by Tyler Maxwell on May 14, 2019

This is a quick how to get your React app on GitHub Pages.

Step 1

Create your project’s directory

$ mkdir day23
$ cd day23

Step 2

Generate your React app

Now my working directory is day23. So, inside that directory I create a new React app:

$ create-react-app .

The . basically means ‘here’ so, instead of passing a name to the create-react-app command you are telling it to make the app inside the current directory.

Step 3

Remove the Service Worker!!!!

Skip this step at your peril! I don’t know why, but the service worker that comes with create-react-app will keep your app from deploying to GitHub Pages. So, delete that shit!

delete this file!!!
delete this file!!!

Then delete any references in the index.js file.

delete the highlighted text!!
delete the highlighted text!!

Step 4

Install the gh-pages npm package

$ npm i gh-pages

As long as you are using the current version of node and npm, you don’t need the –save flag.

Step 5

Change the package.json file

DO NOT cut and paste the following:

So YOUR-WEBSITE will most likely be unless you set up GitHub to point to a domain that you own. So this is what my package.json file looks like:

Step 6

Push it to your Repo

If you don’t know how to do this, check out this post. There are instructions for how to sign up for GitHub and creating a repository.

Step 7

Run npm run deploy

Run the following command from the root of your react app.

$ npm run deploy
finished product!
finished product!

I got half-way pissed off the first time I tried this. At this point you may have to git push again. From here, you can make any changes you want. All you have to do is repeat steps six and seven. Thanks for reading, and feel free to reach out to me if it doesn’t work.