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
Related
I have a react app that runs perfectly on the local port, but when I upload it to github pages through npm I get nothing but a blank screen.
Failed to load resource: the server responded with a status of 404 ()
I receive many 404 errors like these with no clear source. the page built fine, but it doesnt render anything.
heartlocket.github.io/IF
The problem is that you reference resources(js, css) using absolute urls, with site route as base url, like /static/js/main.b9eb92d4.chunk.js, but your gh-pages actually published to subdirectory /IF/, so real location of your resources is like /IF/static/js/main.b9eb92d4.chunk.js
You can fix it several ways:
change all links to relative - i.e. remove leading slash character, like static/js/main.b9eb92d4.chunk.js
add directory to your absolute urls - like /IF/static/js/main.b9eb92d4.chunk.js
I am working on a gatsby hybrid app that has several client-only routes with dynamic server data.
Strangely when navigating to one of the client-only routes at I am getting the 404 page and the message that there is no page found.
Visiting the client-only URL directly, eg. mysite/auth/login works, and the issue only happens when using an internal Link component or navigate('/auth/login').
I am using the gatsby-plugin-create-client-paths setup
and Router component to handle the client-routing
I am have tried different approaches but couldn't figure out why I am being redirected to the 404 page.
The issue happens only on the inial page visit. Once the page has been loaded internal navigation works without errors and also only happens in development mode. The production build works just fine.
Any ideas what could cause this behavior??
I guess you are using reach router navigate.
If thats the case, try and use navigate from gatsby.
import { navigate } from 'gatsby'
Similar issue exists in the "simple-auth" example in Gatsby git repository. After initial startup by running yarn develop at background, the click on 'log in' will go to Gatsby development 404 page.
The reason behind this is this example, and quite a lot demo around blog spots use the "Link" from #reach/react, which normally doesn't handle SSG or static routing thing, but "Link" from gatsby knows very well how to handle these.
So, the fix is:
to replace // import { Link } from "#reach/router" with import { Link } from "gatsby".
I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/
How is routing handled in a built react app?
Specifically, in a development environment, we can simply hit <host>:<port>/<some-path> and the corresponding component is loaded, but once the app is built, we get a bunch of static files and single index.html file, which are then served by some server.
Now, upon hitting the url <server-host>:<server-port>, the app works as intended, but upon entering the path, say <server-host>:<server-port>/<component-path>, a 404 error is returned.
If there is, say a button, upon clicking which, the same /<component-path> is to be redirected, the app works, but then again upon refreshing that page, 404 error occurs.
How can this be solved? What is the correct way to serve such apps having many components at different routes?
approach1:(recommended)
In server config you should point all urls ( http://ipaddress:port/<* any url pattern>) to index.html of react-app . this is known as fallback-mechanism.
And when any request comes,index.html of React app will take care of that automatically because it is single page application.
approach2:
Use HashRouter in React app. So You will not have to configure anything.
Depending on which server you are deploying to, you should redirect all errors to the index.html look for the configuration maybe htaccess or for example if it an AWS S3 bucket you just specify the error page to the same index.html file that is served. Then you handle actual error in your code using a routing library like maybe react-router-dom to take care of actual error. Your failure is because in normal circumstances in a static host when you provide a URL like <server-port>/<component-path> the assumption the server makes is that there is a folder with name component-path in your root directory which has an index file from where to load and display but in the case of React single page application, everything is managed by the index.html. So every request has to pass via the index.html
When I refresh the page on some url like "page/sub/url/" I get an error because this is send to the server and not to the bundle in index.html. From here I understand that it is possible to configure the server to just ignore such request and serve index.html. No problem here. However, in such case after refresh the user gets the default Indexroute, for example: "/" instead "page/sub/url/" where he requested the refresh initialy. Is there a way to send the "page/sub/url/" to the bundle.js and route the user to this location after he refreshed the page?
OMG .. that was just super easy. Once i defined the routes on the server side and directed them to index.html the pages reloaded normaly without any errors. Begginers mistake.