Problem With Deploy React App With Gh-pages
I've got a problem with deploying my react app with gh-pages. I tried all guides from YT and those from the first site of Google. And my GitHub pages don't show an app still. link to my repo: https://github.com/maksymilianMroz/react-todo-app
the question is Where is the problem? I didnt write smth in the code? How can I fix this? (I want to live preview on my react app by ghpages)
Answer
When you open your project site https://maksymilianmroz.github.io/react-todo-app/ and do a full refresh with the developer tools of your browser enabled, you will see that all javascript and css references result in a 404. This is because all url all prefixed with maksymilianMroz
.
eg https://maksymilianmroz.github.io/maksymilianMroz/react-todo-app/static/css/main.fbf7fb8c.chunk.css
where it should be https://maksymilianmroz.github.io/react-todo-app/static/css/main.fbf7fb8c.chunk.css
This is caused by the homepage property of your package.json file, as shown in the output of npm run build
If you adjust that property in the package.json your build will be fine.
{
"name": "react-todo-app",
"version": "0.1.0",
"private": true,
"homepage": "https://maksymilianMroz.github.io/react-todo-app",
...
}
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?