react) after deploy using github pages, there are nothing on the page - reactjs

before deploy, on the localhost
after deploy, on the github pages: https://joo168.github.io/goal_tracker/
it's react.
before deploy, on the localhost, it works.
but after deploy using github pages, there are nothing on the page..
as you can see, NOTHING
why did it happen?


i did
yarn build
yarn run deploy
package.json

Related

Failed to deploy react app on github pages, netlify and heroku

I am trying to deploy my react app but its not deploying anywhere, I have tried on Github pages, Heroku and Netlify. This is the repo link please someone help.
LINK:- https://github.com/harsh021102/hackat1

Heroku works. https://murmuring-anchorage-77354.herokuapp.com/
1- remove "homepage" from your package.json
2- npm run build
3- copy example project https://github.com/aydink88/heroku-express-spa
4- replace the example project build folder with your build folder
5- push only the express project repo to heroku (netlify and github doesn't work this way)

React fails to make build with default app

React fails to make proper build, even with default app.
I ran commands npx create-react-app my-app then npm run build.
When I open index.html in /build, the site doesn't work and I get following logs:

You can just open a React (or Angular) build by clicking on the HTML file.
What you have to do is the following:
Install any static server module (i.e. serve):
npm install -g serve
In the root directory:
serve -s build
And then your app will be served.
It would be wise to do that before you deploy to any cloud storage or even your own server, but if you are 100% your app works, you can just deploy in on Vercel, Heroku or GitHub pages, they are free.

My react app in the gh-pages is only showing the read.me not the index.js;

My react app is not loading the index.js, you can see my repository at https://github.com/Vitorrrocha/Star-Wars-info and the gh-pages: https://vitorrrocha.github.io/Star-Wars-info/ .
package.json: https://github.com/Vitorrrocha/Star-Wars-info/blob/master/package.json

Which branch are you trying to serve as a GitHub page? I see you have just a master branch.
You could make a branch called gh-pages and push your build there. I see you have gh-pages installed as a devDependency. You can use gh-pages -d build it will do everything for you. (build is the output folder of react-scripts build.)

React deploy not serving images

I have an issue where I deploy my React app the images are not showing. Works fine locally. I've set the homepage to a GitHub site http://ryandixon555.github.io/react-board-game and run
npm build
then
npm deploy
but still no images. I've also specified the homepage in the package.json:
"homepage": "http://ryandixon555.github.io/react-board-game"

In the end I gave up and deployed using netlify, following this link and then copying my code over.

Github pages still shows README after deploying React app

I have a create-react-app project (https://github.com/khpeek/beomaps/tree/master) which I'd like to deploy to Github pages using gh-pages. Following this tutorial, https://medium.com/#serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6, I've added the following to my package.json:
However, if I run npm run deploy, it is published,
but the Github page, https://khpeek.github.io/beomaps/, still shows default content based on the README.md. Do I perhaps need to change the deploy directory?

In the Options page of the repository, I had to select the gh-pages branch instead of the master branch:
(I also re-installed gh-pages as a normal dependency, not a development one (i.e. npm install gh-pages --save instead of npm install gh-pages --save-dev), though I'm not sure whether this was important).
Now the page is visible on Github pages:

I think this has to do with github not knowing which branch it should use (master vs main or idk). Changing my deploy script as follows solved the issue for me:
"deploy": "gh-pages -b main -d build"
This tells github pages that it should use branch main.

I had the same error even after selecting gh-pages branch, but then I again changed it to master branch and it worked!!!

In my experience, it was simply a latency issue. I was able to see the correct page, after few minutes.

I had the same problem - when I deployed my React app to GitHub pages, it showed the README.
Then I pushed the build directory I had created locally to my remote repository. When I did that, my React app worked with GitHub pages.

if you with gh-pages, you have to select it as defualt branch for this repo. It worked for me.

Resources