Deploy Frontend to GitHub Pages and Backend to Heroku - reactjs

I tried deploying my backend to Heroku and after I did that my website was still working on http://localhost:3000/ but after I build the app for deployment on GitHub Pages the website stopped working on the Github page but works on the local environment.
this is my GitHub repo: https://github.com/pranjalchaplot/missedmessage/
My deployed GitHub Page (doesn't work): https://pranjalchaplot.github.io/missedmessage/

Your JavaScript references are not set correctly
as seen in your html javascript references, when you open that in a new tab, it feeds off of the "master" url, and brings you to a 404 page, you need to fix/change your reference path.
Also, the console is showing quite a few errors

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.

when I'm accessing website that I deployed in Netlify it don't show any content

I hosted my react js webesite using Netlify, but when I hosted it that time there was no error in deployment time, but when I'm trying to access it so I'm getting only blank page with no content.
This is my website URL, https://dreamy-lily-038fc8.netlify.app/
this is the production deploy and I don't think there is any error..
So Please guide me what I need to do now..?

React app returning a blank page on github pages

i created a portfolio website and deployed to github pages but it's returning a blank page, i have updated the homepage and scripts in package.json, i tried deploying via vercel and netlify and it's the same error.
the github link is https://github.com/dayolovesruby/MyPortfolio
the github pages link is https://dayolovesruby.github.io/MyPortfolio/
n.b the website is working well in my localhost
Remove the dayolovesruby part from the homepage in package.json.

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.

Resources