So, you want to host your React App on GitHub pages?

The reason I'm writing this blog, is that I have tried multiple blogs to find out about how to host my first React App on GitHub pages and none of them worked as a single starting point. Then, I tried to mixing a little here and a little there, and came up with this solution.

GitHub has a feature called GitHub Pages that converts a GitHub repository into a website with the click of a button, as long as this page is written in Frontend language only. These languages are: CSS, HTML and JavaScript.

I've been teaching myself React for the past two weeks. As I started building React apps, my first challenge was to build a React hangman app. I also decided to deploy it to GitHub. The following method will get you going.

Reaching for the Stars

You can find the GitHub hosted working React App code here.

This is a quick solution for those of you who had the same issue as I did.

Log in to your GitHub account and create an empty repository

• For this example I created react-hangman
• Make sure it's empty. No README.md file, a .gitignore file, a LICENCE file, or any other.

If you have a finished React App go to the next step, if not create a new React App.

• $ npx create-react-app react-hangman

create-react-app takes a while. Go grab a cup of coffee.

We are going to run npm install

• $ npm install

I am not sure why at this stage we are running npm install but it worked for me.

npm install (in package directory, no arguments): ... In global mode (ie, with -g or --global appended to the command), it installs the current package context (ie, the current working directory) as a global package. By default, npm install will install all modules listed as dependencies in package.json.

We need to add some properties to app's package.json file.

• At the top level, add a homepage property. Its value should be a string.

            
            {
              "homepage": "https://(username).github.io/repo_name",
              //...
            }
            
          

• In the scripts property, add predeploy and a deploy property, values shown below.

              
            "scripts": {
              //...
                "predeploy": "npm run build",
                "deploy": "gh-pages -d build"
            }     
              
            

Initiate git repository in your local environment.

• $ git init

We need to install a npm package called gh-pages. You can find the detail of this package here.

• This package is needed to deploy the React App. Run the following command.
• $ npm install gh-pages --save-dev

Attach your remote GitHub repository to your local project.

• $ git remote add origin https://github.com/(username)/hangman-react.git

Again I am using my own React App name, change it to your user name and app name.

We need to run the following command. This will create a bunch of JavaScript, HTML and CSS files that GitHub will use to convert your project in to files so that GitHub pages understand how to handle them. Run production build.

• $ npm run build

The Final Frontier

This is the last command you will use for this deployment.

• $ yarn run deploy or $ npm run deploy

Well that is it! Your app should be accessible at the URL you specified.

References by, gitname, Facebook's tutorial.