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
Related
When i try to deploy my react app to github pages with the package gh-pages, the result page is blank.result page
The page I am trying to deploy is here: LINK
I don't know if it matters but I am currently using the free domain given to me by GitHub: www.elvas.me
I tried following the react official docs: Link, but it didn't work for me... Perhaps it's because I am using vite and not create-react-app?
*Edit*
Found out that the site is trying to get the .js and the .css from the wrong place.
I just don't know what I am doing wrong...
Ok, so to solve this the only thing that I had to do was to add base:"{repName}" to the vite.config.ts file.
Source: https://vitejs.dev/guide/static-deploy.html
The images were not loading, I used this to fix them:
Github pages vite JS build not showing the images
I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:
First things first, make sure that your ".git" folder and your project are in the same folder.
Run npm run build. You should have a dist folder now.
Open the file vite.config.js (or .ts).
Add the base file with your repository name. Include the two /.
Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.
export default defineConfig({
base: "/react-beautiful-dnd/",
plugins: [react()],
});
Open your .gitignore file and delete the dist line from it. You want to make sure that the dist folder is pushed to github.
git add .
git commit -m "deploy"
git subtree push --prefix dist origin gh-pages
Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this: https://atlassian.github.io/react-beautiful-dnd
In case it's still showing a blank page, it's very likely to do with the step number 3. Ensure you added the correct repository URL and that it begins and ends with the / sign.
That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.
Here's the link to my portfolio website that I'm trying to deploy on github-pages: https://github.com/AbhishekM2001/AbhishekM2001.github.io
The site is working properly when deployed locally but when I try to deploy on github pages I get the error: 'Syntax Error,Unexpected <' on the line where React Router is implemented in index.js file. I've also used Hashrouter instead of Router but to no avail.
Any help would be appreciated.
For anyone else stuck on the issue,
I had bundled all my files using parcel bundler so the index.html in dist folder was being served instead of the index.html in root folder.
Using gh-pages to set dist as root folder worked for me.
Refer the commands in https://stackoverflow.com/a/42501045/11566161
Courtesy: Shri Hari L in comments.
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.
I'm just starting with react and I built my first application and now I'm trying to deploy it on github pages but the page is completely blank. The steps I followed are:
Install gh-pages: npm install gh-pages --save
Add homepage to package.json: "homepage": "https://milind452.github.io/my-reads/"
Add scripts: "predeploy": "npm run build", "deploy": "gh-pages -d build"
Deploy: npm run deploy
I can see that the gh-pages branch is created and a deployment is also created; but the page is blank and nothing shows on the console. I checked the sources in the dev-tools and all the files are there.
I also checked my repo pages settings and the source for deployment is set to gh-pages branch. I'm not sure what is happening.
I also checked out this stackoverflow question but none of the answers there seemed to solve it for me.
Here is the github repo and the deployment link
Never use BrowserRouter on GitHub Pages. There are some issues with it, it always shows blank screen. Use HashRouter instead, that will most probably work.
import { HashRouter } from "react-router-dom";
// some code here
return (
<HashRouter base="/">
<App />
</HashRouter>
)
The create react app documentation says that:
GitHub Pages doesn’t support routers that use the HTML5 pushState
history API under the hood (for example, React Router using
browserHistory). This is because when there is a fresh page load for a
url like http://user.github.io/todomvc/todos/42, where /todos/42 is a
frontend route, the GitHub Pages server returns 404 because it knows
nothing of /todos/42. If you want to add a router to a project hosted
on GitHub Pages, here are a couple of solutions:
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.
Therefore you should use hashHistory if you want to host your site on GitHub Pages.
Here is the link to documentation.
If you don't wish to change router, try deploying it on Netlify which is also another free hosting provider. But again for Netlify deployment, follow the documentation, which says:
To support pushState, make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
I've managed to deploy a react app (create-react-app) to Bluemix using cloud foundry with a sataticfile, everything is working fine except form one thing: routing.
I'm using BrowserRouter to manage routing so when you write the url's path manually I get a 404 error. I know I have to configure the staticfile to use the index.html as default, the question is how to configure this file on bluemix.
My build configuration looks like this:
And my deploy:
For now I've solved it using HashRoute, but that hash is awful and really bad for SEO as I read somewhere here.
I solved it, just create a file called: Staticfile with pushstate: enabled and save it on the public folder. I was saving it on the src folder so, when the react-app was built the Staticfile wasn't on the root directory.