I am using Stencil JS and Gather Content to consume data for our site. The site is deployed in Netlify. I have implemented a custom 404 page which is getting the content from Gather Content but i am not able to override the default netlify 404 page. Locally is working fine but when i deploy i am still redirected to the default 404 page of netlify.
I have added the following code to the netlify.toml file but no luck:
[[redirects]]
from = “/*”
to = “/page-not-found”
status = 404
Can you provide a working example where the custom 404 page is tsx file with configuration example?
hi there, are you hoping to load a tsx file directly? not sure that would work - i don’t know much about tsx but if it isn’t being transpiled into html or js then i doubt our service would know what to do with it.
Hi, I am looking for any solution… As i said i have a component containing tsx file which is consuming the content for the custom 404 page from Gather Content. Can you come with a working example where i can override the default netlify 404 page?
Hi @coelmay, the problem is that i am retrieving the data for the custom 404 page from external source(Gather Content) and in order to display the content correctly i need to pass properties and metadata - this is why i need component(page-not-found.tsx) which has inline html markup. Your example shows a static 404 page where i need a dynamic one.
I don’t believe you can. I didn’t mean to pull data from the .tsx file, rather to use client-side JS to pull data from Gather Content.
If you need to dynamically generate data on a 404 page, it is possible you could use a serverless function to do so.
If you can give more details about what you are doing and how, this would help greatly in assisting you. If you can share your git repository, this would likely help even more.
I believe you’d have to rely on client-side JS for this. The gist of the way Netlify’s 404 works is this:
If a custom 404 rule exists:
Check if that destination exists (as a static HTML page - not dynamically rendered) →
If yes, redirect to that page
If not:
Check if a 404.html exists in the root of the website →
If yes, redirect to that page
If none of the above:
Show the Netlify 404 page
So I know you’re not looking for a solution, but I think you could get it working instead of we trying to setup an example to replicate your use case. What you could do it:
Create a static HTML page for page-not-found route and once that page loads, you could fetch the data from Gather Content and render the page. However, if I may ask, why do you need a 404 page to be dynamic? It can simply be a static page, correct - in most cases, all it needs to do it say that a page doesn’t exist.
@coelmay i have added 404.html to my project but does not seems to be picked up. I have mirrored your example but still getting redirected to the default netlify 404page. A screenshot attached.
Not having used Stencil @Ivakaaaa I can’t say for certain, but based on these docs I suggest simply putting the 404 page in the root of your project is not the solution as it likely doesn’t copy it to the output directory.
Have you tested building locally? Does the 404.html file end up in the output directory?
If building on Netlify, download your deployed files and see what is in there. If there is no 404.html then that would explain why you continue to receive the default 404 page.
@coelmay i have downloaded the deployed files and the 404.html was not there. Also we use stencil-router for all routes exactly as per the example you provided. I have implemented the notfound-page few weeks ago but it’ was working only locally, when deployed the default 404 netlify page was shown…