How can I deploy react app on github pages?

Question

I try to deploy my react web app to github pages but when i can't find website online In the console, it says that the app is ready to publish and i should run command npm run deploy but i see the same message every time i run that command Here's package.json file:

{
  "name": "weather-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://shotiko-forecast.github.io/weather",
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-scripts": "1.1.4",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

In the repository configuration, you have to explicitely enable github pages, and there are a few choices on how github should serve the files (gh-pages branch, docs directory, etc) — Emile Bergeron
– Emile Bergeron, Commented Nov 27, 2019 at 19:10
Possible duplicate of Github pages: Why do I need a gh-pages — Emile Bergeron
– Emile Bergeron, Commented Nov 27, 2019 at 19:12

Rajesh Mule · Accepted Answer · 2020-03-12 12:41:36Z

3

install dependencies to the project.

> npm i gh-pages

In your package.json add script and homepage

"homepage": "https://username.github.io/repo-name",
"scripts": {
    "deploy": "gh-pages -d build"
}

run build Script to build for production

npm run build

run deploy script to deploy your code to the-pages it automatically push on git-hub gh-pages branch and auto-selected on gh-pages branch you can check settings > GitHub pages.

npm run deploy

now it time to check your

https://username.github.io/repo-name

answered Mar 12, 2020 at 12:41

Rajesh Mule

334 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lijo M Loyid · Accepted Answer · 2021-03-09 10:57:48Z

0

The name of your React app is weather-app. I assume that the github repository for the app is named as weather-app. There is an error in your package.json file. The homepage property is set incorrectly. It should be set as,

"homepage": "http://<<github-user-name>>.github.io/<<github-repo-name>>"

In your case, change weather to weather-app and everything should work fine

answered Mar 9, 2021 at 10:57

Lijo M Loyid

115 bronze badges

Collectives™ on Stack Overflow

How can I deploy react app on github pages?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related