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.
Related
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.
how can i upload my React Project to GitHub with proper routing. When I upload to GitHub then I am testing that it properly working or not. then it is not working. I Don't know why this happened that Routing is not support on git hub pages.
Please any one help me, Can I upload my React project on Github with Routing or any other source where i can upload my React Project online and share that project Link?
Per the create-react-app docs:
You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.
Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.
To be honest, better to just use Netlify.
You can deploy your site with a GitHub repo or directly with:
npm run build
and then upload the build folder.
Or if you really want to use GitHub, you can use Github to deploy through Netlify. And about routing - routing is very easy in Netlify. If your using react-router-dom that listen up:
in your public folder add a _redirects file and add in:
/* /index.html 200
and then in your src folder add a file called netlify.toml and add:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Generic: What kind of services must a hosting vendor provide in order to make it possible to have a React app hosted?
More Specific: If I create a website with React and React Router, is it possible to deploy it by just uploading the bundled output folder? This could be for example a dist folder containing index.html, bundle.js and an images folder.
Could this be as simple as deploying a simple web page (like one built with plain HTML, CSS and JS)?
Sure just do: npm run build
and you will have a folder with the static files. Upload those with your choice of file transfer method and set the permissions to the web host appropriately.
100% Working Example.
React App Hosting in Firebase .
You can read this blog
Host Your React Web App in few minutes.
Command runnning in Wrong sequence =>
firebase login
firbase init
firebase deploy
npm run build
Command runnning in Correct sequence =>
firebase login
firbase init
npm run build
firebase deploy
So I have a website and I want to deploy some of my projects on my portfolio website like mywebsite.com/first-project.html
I already ran npm run build so I have a build version with the static files and I put it on my website but the react index.html isn't return anything the div id of root is empty.
I have seen tutorial of deploying them through surge and github pages. I don't want to do that, I want it on my own website. How can I achieve this?
Edit:- I forgot to mention the projects I created are through the npm create-react-app method and I have run the static build through serve -s build on my local computer. I just want to do the same on my website.
Edit2:- In the future if I am creating a react based website with the intention of hosting on my own domain, what kind of groundwork should I lay to make it easier? Any node packages or routing or set up? Also would you recommend create-react-app for this purpose if not what method would you recommend?
I have two things:
a React app running locally (using npm run start)
a Jekyll site hosted on github pages
How do I put my React app onto my Jekyll site?
#streetturtle means just copy all the generated files on your ...my-react-app/build/ folder after executing the command npm build, and place them into the branch of your username.github.io where your GitHub Pages site is currently being built, without using Jekyll to generate a static site, at all!
Instruction for creating GitHub Pages.