How would I go about switching the ‘Not found’ page on my static site to something else, possibly redirect or change the source for that?
This is what I’m talking about:
I have a static page and I haven’t been able to find something for static pages, only pages that use express. Let me know!
I’m assuming you’re using express, in which case you can handle 404 (Not Found) errors by simply putting a final route after all your other handlers.
Handlers are checked in the order they appear so it’s safe to assume if a request makes it to the final handler, it wasn’t found (404) anywhere else.
I think using a wild card handler at the end of your file like this will accomplish what you’re after:
app.get('*', function(req, res){
// 404 Response Logic
});
@FlantasticDan I think they are just using a static project with folders and lots of index.htmls, in which case adding a not found page is not possible.
Lol it seems I misread the last part of the question.
Glitch static projects are served using lws but because you don’t have access to the configuration I’d agree that a custom 404 isn’t possible with the Glitch configuration.
Might be a good idea for a feature request if Bee is interested.
Thank you both. That’s sad you can’t config stuff like that. Maybe a feature in the future haha.
Actually, adding a 404 page may be possible, assuming they visit a existent page first. Based on how PWAs can work offline by intercepting fetch, you may be able to intercept a fetch request, check if it’s an actual url either by checking it’s existence from a builtin list OR sending a HEAD request to the server, if the page exists pass it through if not send your custom 404 page.
Could you elaborate more on that pls?
@javaarchive is talking about Service Workers which are a browser feature that allows an origin to run JavaScript on the client independent of a loaded document. They are very powerful and allow for modern web features like web push, caching, and of course progressive web apps.
Google’s Matt Gaunt explains what they are and how they work much better than I could and his article is a great starting point if you want to learn more:
With service workers you could use their caching / fetch interception capabilities to implement a custom 404 page on the client side. You’d need the service worker to cache all the assets, including the document itself, required for the custom 404 page at install, and the user would only see the custom version if they’d already been to your site (and thus have an active service worker).
I belive these days they are hosted on s3:
$ curl -I http://hello-webpage.glitch.me/
HTTP/1.1 200 OK
Date: Mon, 11 Jan 2021 13:28:34 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 882
Connection: keep-alive
x-amz-id-2: LsVc3zp0sj4GoducbivTWeDsOLSHc6nqoskHQdJGCwSD3Go08IsJQOhdZmz5RWVG/zHrRhtOfTA=
x-amz-request-id: 9624265F26083C8F
last-modified: Mon, 11 Jan 2021 05:34:10 GMT
etag: "0f6cd1a17b186e4cf100858798d4633d"
cache-control: no-cache
x-amz-version-id: ntv93xfhTf8uWaNx9fO0QB_BP_Meor0u
accept-ranges: bytes
server: AmazonS3
I totally agree with you, it would be really cool if this feature existed! As a VueJS dev, it’s really annoying when your Vue app uses History mode and can’t really really redirect to index.html instead of telling me that “I found a glitch”.
You can use 404 pages on glitch with this simple snippet:
null.config.js
const execSync = require("child_process").execSync;
execSync("npx http-server ./ -p 3000 -c-1");
process.on("beforeExit", code => {
execSync("refresh");
});
process.on("exit", code => {
execSync("refresh");
});
Now make a file called 404.html and place whatever you want into it. Run the refresh command for the changes to take effect.
people reading this, be aware that this is for changing the 404 behavior when the project container is running, i.e., when you’re editing your project and using project hours.
I can try to fix that
Edit: It should be fixed now. Whenever the container attempts to shutoff, it should reload the project and start it again.
I think Glitch would consider it more appropriate to boost the project if you want to keep it online, rather than to keep it online with automatic reloads.
Can I have an explanation of that code snippet, I want to know if it’s possible to redirect to index.html instead of looking for a 404.html.
So the code snippet will launch a server from the package http-server. That same code snippet will block any extra other code execution before the process finishes. When lws launches the server, it will read the config before listening on port 3000 for requests. That blocking code will stop any further reading of the config until glitch shuts down the container. When Glitch shuts down the container, the code will refresh the project and it loops the code over and over again.
Yes, correct.