while hosting react web page on GitHub pages it shows only white pages even though I used the instruction on the deployment of react page on Github.
I think it is due to the react-router-dom (Switch and route ) methods I used to redirect to its page. please give me a solution regarding this.
I tried to edit the package.json file but it not be solved and I also tried to push the file again to that repo branch
Related
https://itsmenick.github.io/my-portfolio/ this is my url
I did all the changes regarding the deployment ie changes in script and all but still not reflected in this.
https://github.com/ItsMeNick/my-portfolio/ this is my github path to repository
Can anyone say what is the mistake ?
That is odd. and the development build works just fine? I noticed there is a cors error from you github page and this could be your issue.
After uploading my react app on gitHub pages its showing a blank page, and there is no error displaying in console. When I inspected the pages it says:
You need to enable javascript to run this page
but when I checked by browser settings it shows my javascript is enabled.
Here is my console
Here are the elements
Here is the Package.json
Also when I tested with a basic react app(no routes only single page) it was displaying properly
If gitHub is not publishing, is there any other alternative to publish my work?
Thanks
It looks good from my side. You should try with another browser to see if the problem persists.
I have a question.
I created a react website and everything works perfectly on local development.
So if I go to localhost:8080/about I get on the about page.
When I build the website only an index.html gets made.
When I navigate the website from the index page, it all works, also the urls changes to /about when I go to the about page through the menu.
But when I go to www.website.com/about by typing in the address I get an error page.
Who can help me with this?
JayD
You need to setup your react router accordingly. Usually you need to add one extra file in your build files. Below is the tutorial on how to setup react router using fierbase and netlify. If you deploy somewhere else, please let me know. I can help you with that.
Firebase
Netlify
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
The problem: When i go to any internal root, and press f5, it broke, givin 404. Like for example:
https://josuevalrob.github.io/jeval-web/sign-in. But if I go to the root it works fine: https://josuevalrob.github.io/jeval-web
I don't know how to solve this problem. There is a bunch of documentation about this, and I cant handle it.
This is the github repo: https://github.com/josuevalrob/jeval-web
This is the github Page: https://josuevalrob.github.io/jeval-web
And you can see, the package json have the home key:
"homepage": "https://josuevalrob.github.io/jeval-web",
Also the .env is currently empty, but i can add this:
PUBLIC_URL = "https://josuevalrob.github.io/jeval-web"
Nevertheless, it doesn't work.
I had added the homepage or the public_url, neither work.
Github pages doesn't really support single page applications. Single page applications require a server that serves the same page at every url and then the client renders the appropriate content based on the url. Hence the "single page". Github does not allow you to run server side code, so you can't write a server to serve your index.html at every route.
There is, however, a hack you can use to make this work. When you navigate to a route other than the root url, Github will serve a 404 page as you can see. Github allows you to customize this 404 page. So, you can make the custom 404 page your single page application and then it will be served at every route as required.
This repo explains the required steps to serve your single page as a custom 404 page on Github pages.
Basically it amounts to...
Copy this 404.html page to your repo as is
Add this redirect script to your index.html page
The only drawback is that the url is forced to redirect and quickly flashes the incorrect URL before redirecting. You can see an example of this by refreshing this page. If you want to avoid this, you need to look for hosting somewhere else that allows you to edit server side code and serve your index.html at every route
I had a similar issue with react app. I fixed it by using HashRouter instead of BrowserRouter in App component