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!
Then delete any references in the index.js file.
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 https://USERNAME.github.io/REPOSITORY-NAME 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
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.