Deploying React Applications to Github Pages

Cover Photo Designed on Canva

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 thegh-pages package from npm. On 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.

3. 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": "https://seunzone.github.io/TD-React-Challenge-Test-1",
...
}

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"

4. 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.

5. 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: https://seunzone.github.io/TD-React-Challenge-Test-1/

Note:

• Whilst hosting a more robust app, routing using on gh-pages does not work well with BrowserRouter or ReactRouter, make use of HashRouter from react-router-dom instead. So you’d import { HashRouter } from 'react-router-dom' as opposed to using import { BrowserRouter } from 'react-router-dom’, this will, however, create a # sign on your route.
• Sensitive information (eg .env files) should not be pushed to your online repository. My workaround is usually to git ignore the .env or configfile before pushing to my remote repository, when this is done I then allow git to track the .env or config file before running yarn run deploy, this makes my deployed app to have access to the necessary configuration files I need without compromising the security of the app.

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

Do you need to hire top developers? Talk to Andela to help you scale.
Are you looking to accelerate your career as a developer? Andela is currently hiring senior developers. Apply now.