Deploy React app on GITHUB pages

1–2 minutes

read

Deploying react app on github

Hosting apps/websites on internet is an important part when it comes to show casing your work or may be deploying your app for a small scale work. Github provides hosting for the websites for free using Github pages where anyone can deploy the webpages.

Coming on to the todays topic : Hosting react app on github pages. Assuming that you are ready with the react app which is working fine on the local host. Lets begin this simple process-:

  1. npm install gh-pages --save-dev
    Use this command to install and save the dependency of the github pages.
  2. Adding properties to package.json file.
    a. “homepage”: “http://{github-username}.github.io/{repo-name}”
    b. "scripts": { //...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    }
    Adding these lines inside script block.
    So, the final outcome should be like:
{
  "homepage": "http://djmayank.github.io/wheather-app",
  "name": "wheatherapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cors": "^2.8.5",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-loader-spinner": "^3.1.14",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  }
}

3. When you are done with this. Push your code in github. How?? Hoping you know how to create new repository on github. After creating one. Run these commands in terminal.
git init
git remote add origin https://github.com/djmayank/wheather-app.git
git branch -M master
git push origin master

Now, after the code is pushed in github, this is the time to host on github pages.
On the terminal run command : yarn run deploy
which will deploy app on the url:

http://{github-username}.github.io/{repo-name}

Leave a comment