Page Not Found 404 Error is Coming when pages are refreshed..................i deployed my app on git hub - reactjs

enter image description here
while deploying my Reactjs app on GitHub I am facing page refresh problem, however, on localhost app is working fine, pages are refreshed and get the component.
it seems that this is a project build problem.
I need a solution for it that why this problem is coming on project build.
Also, I did not install my packages using --save flag, I am confused about that flag options.

Related

Can't change the url extension for the deployment of github pages

My repo: https://github.com/Ayse-Sadioglu/Portfolio
website live at: https://ayse-sadioglu.github.io/Portfolio/
I seem to have a problem publishing my website via Github pages. Everything works as it should on localhost but Github pages shows blank page. I’ve seen a few similar posts about this issue but answers not worked for me. According to answers to similar posts, I tried to remove the Portfolio extension from homepage in package.json but it didn't updated on the github pages. I mean it still shows the url that i entered before ands still shows blank page.
I have installed through npm the gh-pages module and done “npm run deploy” from https://github.com/gitname/react-gh-pages. This created my gh-pages branch. I’ve updated my package.json with the appropriate information.

GitHub pages deployed with react-gh-pages updated the gh-pages branch but the app is showing 404

I have a website hosted with GitHub Pages at https://[username].github.io.
I have a separate deployment for the repo [username].github.io and the web page hosted at https://[username].github.io is working fine.
I recently created a react app using create-react-app and wanted to host that to Github pages. The repo name is react-gsap. Now I followed the https://github.com/gitname/react-gh-pages tutorial to deploy the app to Github pages. Once I ran npm run deploy I see that the gh-pages branch is created and it has the index.html and other files that are required to run the web app.
The problem is when I access https://[username].github.io/react-gsap I am getting 404.
Here's the repo that I created: https://github.com/atiqorin/react-gsap
What am I missing?
UPDATE:
It was just a delay. The github pages is working now. I guess it takes some time to have the page ready. Anyone having similar issue might want to wait an hour to see the changes.

Can't deploy react app (issues with build folder)

So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver

Fetching in reactjs doesn't work after deploying in github pages

So I have a reactjs app publish in github pages, is this one https://bernardoolisan.github.io/PyOcr/
The problem is that the app fetch data, but when I deploy it on github pages it give this error:
And it was working:(
And now my page doesn't work too, it was working but right now is blank i dont know why
I guess you are deploying the react project the wrong way to hosting providers such as github or netlify . First you must build your react project and then only push the files inside the build folder to hosting provider . Github pages can only serve static html css js files so it can only serve the build folder of your react project .
Note
To build a react app you can run npm run build and a build folder will be generated . Then you can push the files inside of the build folder to github repository and enable github pages for it .
I was having a similar issue, and I too though gh-pages can't fetch data. But what I did was I added cors to my server. I allowed cross-origin requests. Now it retrieves data from my server on heroku.

Netlify Not Rendering React Component

Here is the link to my React project https://github.com/Count-T/blogfrontend, I ran npm run build and put that folder into netlify but when I check the app it only shows a blank page. I don't know is the problem is react-router but I already put a file to redirect netlify to index.html. This is my second time uploading a project onto netlify but my previous project did not use react-router-dom. Any help would be much appreciated thanks!
Link to netlify website: https://tonyliblog.netlify.app/
Here is an image of the website
I do see an error "Cannot convert undefined or null to object" in the console on the netlify site. I don't know if that could help you to pin down the issue. Did it run without any problem in your local env? Are you using any environment variables/ Keys to access your API?

Resources