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"
    ]
  }
}

Emile, what do you mean? Repository is public, if you meant that — Shota Topchishvili, Nov 27 '19 at 19:04
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, Nov 27 '19 at 19:10
Possible duplicate of [Github pages: Why do I need a gh-pages](https://stackoverflow.com/questions/35978862/github-pages-why-do-i-need-a-gh-pages) — Emile Bergeron, Nov 27 '19 at 19:12
Cool, looks like you fixed the 404 and now it is serving your files (html, js and css). It just looks like the path you're using in your app are wrong, which is a whole other problem. — Emile Bergeron, Nov 27 '19 at 19:24
Everything is all right in a development mode so i'm confused. What path are you talking about? — Shota Topchishvili, Nov 27 '19 at 19:26

score 2 · Answer 1 · answered Mar 12 '20 at 12:41

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

score 0 · Answer 2 · answered Mar 09 '21 at 10:57

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

How can I deploy react app on github pages?

2 Answers2