Deploying React on Github Pages

Jul 10, 2020 • 4 Minute Read

Introduction

Hey there! If you're reading this, then you're probably trying to figure out how you can deploy your React App to Github Pages or you want a quick way to get your React app running on the public web. Say no more! In this guide, you'll learn how to deploy your React App to Github Pages.

What you need to follow along:

Node js
Npm (Pre-installed with Node) or Yarn
A Github Account
Git

Prepare the App

I have already prepared a demo application with Create-React-App so that you can follow along quickly. If you prefer deploying a custom app you've built with Create-React-App , these steps should also work perfectly for you. To clone the app, open your terminal and run:

      git clone https://github.com/Nyamador/ps-ghpages.git && cd ps-ghpages

Now install the dependencies for the app.

      yarn add # If you prefer yarn

OR

npm install # If you do not have yarn installed

Run the App

Verify the app is running by starting the Development Server.

      yarn start OR npm start

# You should see the following output in your terminal

Compiled successfully!

You can now view styled in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.75.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

Visit https://localhost:3000 to view the app in your browser

Create Your Repository

Create a Github repository for your app. This is where your built app will be deployed. You can do that here.

Build the App

The app you have running in your development environment runs on a server, but your deployed app running in the browser will not be able to spin up a webserver to serve your static assets. To generate the necessary static assets (HTML, CSS, and JavaScript) needed to make your app run in the browser, you have to run a build to generate the assets for you. Luckily, Create-React-App has this configured already, so all you need to do is to run the build script and your production-ready bundle will be generated for you. Let's see how that works. Run the following command at the root of your app (Where package.json lives).

But before that, add homepage to package.json. Create-React-App will use the given URL to determine the root URL in your build.

      "homepage" : "https://{yourusername}.github.io/{app-name}

#{yourusername} - Your githhub username
#{app-name} - Name of your app
    

Now run the command below to build your app.

      yarn run build

		OR 

npm run build

Notice the new build folder generated for you at the root of your project.

Install the Github Pages Package

Now that your app is ready to be published, you need to configure it for Github Pages. To do that, install the github pages package by running the following in your terminal.

      yarn add gh-pages

OR 

npm install --save gh-pages

Add Script For Deployment

In your package.json file, add a deploy script to your scripts section. It should look like this so far.

      "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
     #new
    "deploy": "gh-pages -b master -d build",
    "eject": "react-scripts eject"
  },
    

Deploy Your App

Now deploy your app with the deploy script you created.

      yarn run deploy

OR 

npm run deploy

You can further tweak your build scripts to automatically build and deploy your app for subsequent deployments like this:

      "scripts": {
    "start": "react-scripts start",
  
   "build": "react-scripts build",
     #new
     "predeploy": "yarn run build",
 
    "deploy": "gh-pages -b master -d build",  
    "test": "react-scripts test",
 
    "deploy": "gh-pages -b master -d build",
 
    "eject": "react-scripts eject"
 
  },
    

Conclusion

Whew! That's it. You should now be able to deploy any React app to Github Pages anytime you want.

You can read more on Create-React-App deployments here.

Feel free to ping me on twitter @DesmondNyamador.