How to publish on Github Pages with create-react-app and react-router

Now I will be assuming a couple of things:

  • You have a GitHub account and you created a repository for your app.
  • You created a react app either with `npx create-react-app <appName>` or `npx create-react-app <appName> –scripts-version=react-scripts-ts`
  • Then let’s get started.

Add gh-pages

Run npm i -D gh-pages

Configure your package.json

First, you need to tell the react app where it will be hosted. You need to add to your package.json the attribute ‘homepage’:

{ ...
"homepage": "https://<UserName>.github.io/<RepositoryName>/"
}

Additionally, you need to adjust the scripts attribute.

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

Now you can run npm deploy and it will automatically create a branch, build the app and deploy it into your repository. It will even configure your github repository that the branch gh-pages will be now hosted.  So you can simply navigate to  https://<UserName>.github.io/<RepositoryName>/ and see the result.

Configure React-Router

Before we can publish we probably have to change a couple of things in the configuration of the react-router.

  1. We need to set the basename. The basename ensures that all links of the Router are relative to this basename. To configure the basename you can use the variable process.env.PUBLIC_URL this ensures that you only need to configure the url via the package.json.
  2. We need to ensure that we are using aHashRouter instead of the typical BrowserRouter . The difference is that the hashRouter adds a ‘#’ into the url and upon a refresh of the page you will not see a 404 Github Error

 

Your index.js should look something like this:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router } from 'react-router';
import createHashHistory from 'history/createHashHistory';

const hashHistory = createHashHistory({ basename: process.env.PUBLIC_URL });

ReactDOM.render(
    <Router history={hashHistory}>
      <App />
    </Router>,
  document.getElementById('root') as HTMLElement
);

Deploy

Now can simply run npm deploy and your site should be published on https://<UserName>.github.io/<RepositoryName>/

Note: Since the build is published on a separate branch, your main repository may contain different src than what is published. So you still need to ensure that you commit your changes to your repository.