A friend contacted me recently, he hosts some of his websites on Github and points his domain name to hosted projects on gh-pages. He just built an app using react and was having a hard time deploying it to GitHub pages, most folks are used to deploying static web pages to gh-pages but react applications seem a little more difficult to deploy.

Well, it’s simpler than you might think, in this article I’ll be showing you how to deploy your react applications to gh-pagesin no time.

This tutorial assumes that you have some sort of knowledge on how to use react and git.

Let’s get started…

For this tutorial, I’ve created a simple app, it’s a react application that contains an editable and non-editable text input sharing the same state. Anything the user puts in the editable field is been displayed in the output (nothing too fancy)d

I have created this using create-react-app.

Screenshot of our Application. View the Demo Here

Find the link to the repository here: https://github.com/seunzone/TD-React-Challenge-Test-1

Now follow these steps to publish your react application on gh-pages:

  1. Build a react application or just fork and clone the above repository on Github.
  2. Install the gh-pagesfrom npm. In the terminal, run:

npm install gh-pages or yarn add gh-pages

This package would help us to create a gh-pagesbranch on Github and also serve our bundled react files on the branch.

  1. Locate the package.json file in your root directory, add this line of code to your script: "homepage": "link-to-your-repository", and save. In my own case it would look like this:

       "name": "jv",
       "version": "0.1.0",
       "private": true,
    "homepage": "

Note: If you are linking your domain name to your Github pages, this line would be a little different, it should be: "homepage": "your-custom-domain"

  1. In your package.json file, locate “scripts” add these lines of code:

    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build",

So your "scripts"should look like this:

"scripts": {    
"start": "react-scripts start",
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
eject": "react-scripts eject"

The predeploycommand helps bundle the react app whilst the deploy command fires up the bundled file.

  1. In the terminal, run this command npm run deploy OR yarn run deploy.This command pushes your built file to the gh-pagesbranch on your remote repository.

And voilà! we now have our app hosted on gh-pages:


Thanks for reading and I do hope you found this article somewhat helpful.