How to build and deploy a React app to Github pages in less than 5 minutes

Anil Kumar

Jul 13, 2020·4 min read

Understanding React deployment

After all your development and unit testing, there comes a time when you need to deploy your application on a testing or production server and ask yourself: “how?”.

Choosing the correct server

First thing you need to figure out is what kind of server / hosting environment will you need.

There’s generally one rule — if your app is using server-side rendering you must go with a node server.

In other cases, you can basically deploy your application on anything you want — apache, nginx, express or host it on a CDN like S3 (Amazon) or gh-pages. This article will focus on the last one i.e., deploying to Github pages.

• Deploy react application on Apache/ Nginx ( or production server)
• Deploy react application on Docker
• Deploy react applications using Netfly or buddy works
• Deploy react application using GitHub pages

Prerequisite:

• Github account and git installed
• Node.js and npm installed in your machine(Node 8.10.0 or later versions are accepted)

Fork the following GitHub repo to get the project files: https://github.com/anil-pace/react-toDoApp

Getting Started

Skip these steps and move to the deployment section if you’ve already built the React app

Step1: Create the React app: npx create-react-app your-app-name

Step2: Go to the project repo: cd your-app-name

Step3: Copy the src and public folder from the following repo https://github.com/anil-pace/react-toDoApp (You can customize the files according to your preferences) and substitute them in the your-app-name folder.

Step4: Run your application: npm start

You can now see the app running in the localhost browser popup like this:

Congratulations, you’ve created your react app, let’s move to deployment for building a website out of it.

Deployment

Make sure your react app code is already pushed to the GitHub account under some {Github-repo-name}.

Step 1: Install the gh-pages package as a “dev-dependency” of the app

npm install gh-pages — save-dev

Step 2: Add homepage property to package.json file

Open package.json and add

“homepage”: “http://{Github-username}.github.io/{Github-repo-name}"

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"

Step 3: Deploy scripts under package.json file

In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

“scripts”:{
   ...
   "predeploy": "yarn run build",
   "deploy": "gh-pages -d build",
   ...
}

The predeploy command helps to bundle the react app while the deploy command fires up the bundled file.

Step 4: Create a remote GitHub repository

(Skip this step if your remote GitHub repository is already initialized)

Initialize: git init

Add it as remote: git remote add origin your-github-repository-url.git

Step 5: Now deploy it to GitHub Pages

npm run deploy

This command will create a branch named gh-pages at your GitHub repository. This branch hosts your app and homepage property you created in package.json file hold your link for a live preview.

Go to {your-GitHub-code-repository} -> settings -> GitHub pages section and setup source to the gh-pages branch.

Step 6: Update your repository code (optional)

Commit and push your updated code commit to GitHub

git add .
git commit -m “Your commit message”
git push origin master

That’s it! You have successfully deployed your app to the website URL defined in Step 2 of this Deployment section.

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.