Gatsby redirects - gatsby-cloud

External sources beyond my control link to pages like: somedomain.com/Some-Path which results in a 404 because the path is case sensitive.
I'm getting a "too many redirects" error in production (it works fine local) when using the following:
const url = '/*'
createRedirect({
fromPath: url,
toPath: url.toLowerCase(),
})
For context I'm hosting with Gatsby Cloud and using their plugin gatsby-plugin-gatsby-cloud
The expectation is that somedomain.com/Some-Path will redirect to somedomain.com/some-path

Related

NEXTJS not finding JS when rewriting url to external domain

I am trying to setup a URL rewrite in my next.config.js pointing a path to another subdomain e.g.
localhost:3010/xyz shows localhost:3021/foo/baz/bar
Both are separate NEXT services.
However when trying it just between localhost ports localhost:3010/xyz shows a blank page, if I change the rewrite to look point to our production environment, so:
localhost:3010/xyz shows https://example.com/foo/baz/bar
the page renders but none of the JS or images are loaded.
I see in my Console:
So it looks like it is looking for the JS on the localhost, not the production environment.
I have disabled all security headers but it made no difference

Netlify redirect rule breaking NextJs

I'm building a NextJs site hosted on Netlify. The idea of the site is that it will be a gradual replacement of another site built on older tech, so the NextJs site will return a page if it has it otherwise the request will be re-written to the older site.
I have a Netlify redirect rule setup in the netlify.toml file as follows:
[[redirects]]
from = "/*"
to = "http://old-site-url/:splat"
status = 200
force = false
For the most part this works. If I add a static file to Netlify, then it is returned, the homepage in NextJs is returned, and pages I haven't yet created get rewriten to the old sites url. However every call to anything in the /_next/ folder return a 500 error.
Remove the redirect and it all works again.

Vue Website give 404 error when i try to access with website.com/pagename

I am learning vue and firebase.I just deployed my app on netlify server after build.All ok but i try to directly access my site with page name like this is my app To Vue.It have 5 pages signin, signup, home, global, profile and 404. My app open and work correctly when i open home like like https://vuefire-auth.netlify.app but i try to open with page name like https://vuefire-auth.netlify.app/signup netlify give me error.How to handle it?
Thanks in advance.
Create a _redirects file in your project with the following content:
/* /index.html 200
This rule ensures that every path successfully resolves to index.html and the client has full control over the routing logic.
Read article: Creating better, more predictable redirect rules for SPAs

NextJS hosting on Firebase: how to respond with status 404 on a custom 404 page

Any idea how to make a custom 404.js also return an error code 404 rather than 200?
Hosting is on Firebase hosting so no access to .htaccess or Apache or anything like that.
The trouble is Firebase hosting only allows to rewrite source ** to an html file like /404/index.html which by default returns 200 rather than 404, which is a bad SEO experience.
So the question becomes if Firebase and/or Nextjs has any way for an html file to return a status 404? tried httpEquiv, didn't work, still 200...

Link to a non-gatsby html page on same domain without Gatsby redirecting to 404

I have a Gatsby blog. I am writing a set of tutorial posts for coding games in create-react-app. In my Gatsby post markdown, I'm trying to link to the built version of the demo react app for that post hosted on the same server, but Gatsby keeps giving me a 404 page.
I am using nginx. All the contents of the public folder resulting from gatsby build sit in the var/www/html directory of my webserver.
The create-react-app build sits inside var/www/html/tutorials/01/, and has its own index.html file.
In my markdown I have tried both these formats of links: view the code [here](/tutorials/01/) and view the code [here](//165.227.94.249/tutorials/01/).
If you're viewing the post in your browser at //165.227.94.249/posts/tutorial-01 and click on the link, it'll take you to //165.227.94.249/tutorials/01/ but display a 404 page. But if you refresh the browser at the same URL, the working react app will be served.
How do I keep Gatsby from overriding this request and showing a 404 page instead of just letting the web server serve up the index.html file that exists at that url?
The internal links in your markup are automatically converted into Gatsby Link while you build. Gatsby Link is only for internal ressources from the Gatsby build. Your create-react-app app is on the same server but outside the Gatsby build process.
From the documentation:
This component is intended only for links to pages handled by Gatsby.
For links to pages on other domains or pages on the same domain not
handled by the current Gatsby site, use the normal element.
I think using the full URL inside the markup including https might be successful: https://165.227.94.249/tutorials/01/
PS: When I tried I got a connection timeout from your server.
You should try to disable gatsby-plugin-catch-links. In case this doesn't works try to catch the onClick event, cancel the event and trigger your own redirect.
function processExternalSameDomainLink(event) {
window.location.href = url
event.stopPropagation()
event.preventDefault()
return false
}
<a href={newTo} onClick={processExternalSameDomainLink}>

Resources