Deploy a React App to GitHub Pages

Deploy a React App to GitHub Pages

Let's deploy react application on GitHub by using GitHub Pages.

Prerequisites

You need to have Node, yarn, and npm installed on your machine. To check if they are installed, open up a terminal window and type the following:

npm -v
yarn -v
node -v

If these commands print out a version number in the terminal, you are good to go. If not, you need to go ahead and install what is missing.

• Node (contains npm)
• Yarn

Am assuming you already have a Github account. if not create here

Create a project

To create a project, you need to type the following in the terminal:

npx create-react-app my-react-app

Once the operation finishes, you will have a boilerplate React project, ready to go. To see if it works properly run the command:

cd my-react-app

and run below command

yarn start or npm start

If everything runs properly, you will see a message in the terminal that says that your application is running on a local server at this address: http://localhost:3000

Deploy Project to GitHub

In order for us to be able to upload our built application to GitHub Pages, we first need to install the gh-pages package.

yarn add gh-pages

OR

npm install gh-pages --save-dev

This package will help us to deploy our code to the gh-pages branch which will be used to host our application on GitHub Pages.

To allow us to use the gh-pagespackage properly, we need to add two keys into scripts value in the package.json file:

"scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build", 
    "deploy": "gh-pages -d build", 
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Next, we need to modify our package.json file by adding the homepage field

{
  "name": "my-react-app",
  "homepage": "https://<username>.github.io/my-react-app/",
  "version": "0.1.0",
  /....
}

Replace <username> with your own username.

This is URL of your hosted app.

Ready to go

To deploy our application, type the following in the terminal:

npm run deploy

Running the command above takes care of building your application and pushing it to a branch called gh-pages, which GitHub uses to link with GitHub Pages.

Woohoo!!!!! 🥳

Access the linkhttps://<username>.github.io/my-react-app/

Note: It can take few hours to publish for the first time.

<Happy Code />