how to deploy React App to Github Pages

Hello guys,

In this post, we will be deploying our react app on GitHub using GitHub pages. so let’s get started.

Let’s understand what is github pages:

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub,optionally runs the files through a build process, and publishes a website.

Types of Github Pages:

1.project
2.user
3.organization

Project sites are connected to a specific project hosted on GitHub, such as a JavaScript library or a recipe collection. User and organization sites are connected to a specific GitHub account.

 for more information visit github official site

 We will be focusing on user github pages.

Let’s Create User Github Pages:

Pre-requisites:

1. GitHub Account.(create one if you dont have on github login )
2. setup git on local machine(github setup on local)
3. node & npm installation(node official site) on your local machine(node version> 8.0 npm version >5.2)

Steps:

1.create react app using CRA tool by facebook.

npx create-react-app app-name

2. install github pages in your project using below command:

cd app-name
npm install gh-pages --save

3. create a repository on your github account,because we need it in next step.

4. Update package.json:

There are 2 changes we need to do:
1.We need to add the URL for your hosted website in package.json.

"homepage":"http://{username}.github.io/{repository-name}"

Here username is your github username & repository-name is your repository name that you createde in step 3.

2.Inside the script we need to add “predeploy” & “deploy” properties.

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

Now,this is how the package.json looks after all changes in step 4

{
  "homepage":"https://{username}.github.io/{repository-name}", //add this
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "gh-pages": "^3.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },
  "scripts": {

    "start": "react-scripts start", //add this
    "build": "react-scripts build", //add this
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

5.Initilize the repository & add remote repository in your local git repository.

To initilize local git repository use below command:

git init

Now let’s add your remote git repository to local git repository for use

 git remote add origin https://github.com/{username}/{repository-name}.git

Note: be careful,dont add local project name in above url instead add ur remote repository name.

6. deploy project on github pages:

To deply your app on github pages use 

npm run deploy

this command will create a new branch named ‘gh-pages’ & host your app.

you can preview your site on the url you mentioned in package.json as “homepage”.

optionally you can check whether your application is live on URL in GitHub account in the settings under pages section as shown below: