Deploying React Apps to GitHub Pages

Github has this great feature where you can host SPAs (Single Page Applications) for free. You can make calls to firebase, pull in json files and have other external integrations. There are limitations, such as react-router and related packages do not work. But static and relatively simple html, css, and javascript sites can be hosted without issues.

So, how do we do this?  Well, it's pretty simple.

1. CREATE A GITHUB PROJECT REPOSITORY

Once you create a new Github project that will hold your code, you will need the HTTPS or SSH link. You can get this by clicking the Clone or Download" button. Copy that link for step #2.

2. LINK YOUR LOCAL FOLDER TO GITHUB PROJECT REPOSITORY

Usually, when working in a group, most companies require an SSH key for linking to Github. Here, we are independent and really only use HTTPS for linking to Github repositories.

In case you don't already have GIT For Windows installed, here is the link. This will install all the git commands you need to execute from a command widow.

Open a command window and navigate to your project folder. Here, you will link your folder to the Github repository you created in Step #1.

>>git remote add origin https://github.com/tanyamiranda/sample-app.git 

3. ADD GITHUB PAGES PACKAGE TO THE PROJECT

Use either yarn or npm to install the gh-pages package in your project folder. You can see the package details for gh-pages here. This will update your package.json file.

>> yarn add gh-pages

4. UPDATE PACKAGE.JSON FILE

Open the package.json file in an editor. At the object's root, add the object that defines the location of the website on github. Usually this is in the form of your account Id and the name of the repository. So, for example, if my account is tanyamiranda and my app's repository is "sample-app", then this is the json object I will create at the root.

"homepage": "https://tanyamiranda.github.io/sample-app",

Make sure you are keeping the json format clean. Once that is set, move down to the "scripts" object and add the "predeploy" and "deploy" commands as follows:

     "scripts": {
         ... (existing scripts),
         "predeploy": "yarn build",
         "deploy": "gh-pages -d build"
     }

Save and close the file.

5. DEPLOY PROJECT TO GITHUB

In the command window, type in the following to deploy the application to Github:

>>yarn deploy 

Your output should look something like this, depending on your setup:

yarn run v1.22.4
$ yarn build
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:
56.19 KB (-343 B) build\static\js\2.b2217fd9.chunk.js
11.15 KB (+159 B) build\static\js\main.4e57fd5e.chunk.js
1.11 KB (-71 B) build\static\css\main.c7399a56.chunk.css
779 B build\static\js\runtime-main.cd8959cd.js

The project was built assuming it is hosted at /sample-app/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:

bit.ly/CRA-deploy

$ gh-pages -d build
Published
Done in 26.75s.

Now visit the URL that you specified for the homepage object and you should see your app. 

Happy Deployment!