Desmond Nyamador

Deploying React on Github Pages

Desmond Nyamador

Jul 10, 2020
4 Min read
11,275 Views

Jul 10, 2020
4 Min read
11,275 Views

Web Development

Front End Web Development

Client-side Framework

React

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:

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

bash

Now install the dependencies for the app.

1yarn add # If you prefer yarn
2
3OR
4
5npm install # If you do not have yarn installed

bash

Run the App

Verify the app is running by starting the Development Server.

1yarn start OR npm start
2
3# You should see the following output in your terminal
4
5Compiled successfully!
6
7You can now view styled in the browser.
8
9  Local:            http://localhost:3000
10  On Your Network:  http://10.0.75.1:3000
11
12Note that the development build is not optimized.
13To create a production build, use yarn build.

bash

Visit http://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.

1"homepage" : "https://{yourusername}.github.io/{app-name}
2
3#{yourusername} - Your githhub username
4#{app-name} - Name of your app

bash

Now run the command below to build your app.

1yarn run build
2
3		OR 
4
5npm run build

bash

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.

1yarn add gh-pages
2
3OR 
4
5npm install --save gh-pages

bash

Add Script For Deployment

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

1"scripts": {
2    "start": "react-scripts start",
3    "build": "react-scripts build",
4    "test": "react-scripts test",
5     #new
6    "deploy": "gh-pages -b master -d build",
7    "eject": "react-scripts eject"
8  },

bash

Deploy Your App

Now deploy your app with the deploy script you created.

1yarn run deploy
2
3OR 
4
5npm run deploy

bash

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

1"scripts": {
2    "start": "react-scripts start",
3  
4   "build": "react-scripts build",
5     #new
6     "predeploy": "yarn run build",
7 
8    "deploy": "gh-pages -b master -d build",  
9    "test": "react-scripts test",
10 
11    "deploy": "gh-pages -b master -d build",
12 
13    "eject": "react-scripts eject"
14 
15  },

bash

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.

LEARN MORE