Search code examples
javascriptreactjsgithubgithub-pages

After deploying on GH pages the app doesn't work


I have such problem, after deploying my React app on GitHub it works only in my PC. When I open link where is my App have to be deployed using my PC or LapTop link - it works, but when I tried to open it with phone or send this link to my friend - there is empty page (with my background). So how to solve this problem?

There is my repository link

Code of my package.json

{
  "name": "worktests",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://dmitriykulikovskiy.github.io/MyWeatherForecast",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.0",
    "font-awesome": "^4.7.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "shortid": "^2.2.15"
  },
  "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 dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^2.2.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2"
  }
}


Solution

  • The problem is this line:

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ in store.jsx

    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ is only available if you have Redux Web Tools installed on your browser. Your app didn't run for me locally either. However, once I installed the extension, it ran correctly both locally as well as on your deployed site.

    This thread might help find the right way to use composeEnhancers in production. Ideally, in production, you shouldn't be depending on properties populated by the dev tool plugin for debugging but you should be using compose directly from redux.