Generate a static 404 page

[ishitatsuyuki]

Most static hosting providers provides an option for custom error page, and it should be possible to prerender the error template too.

_{This question is available on Nuxt.js community (#c833)}

[cesasol]

there is, just read the docs https://nuxtjs.org/guide/views/#error-page

[ishitatsuyuki]

I'm not sure if you understood the issue correctly. I'm aware of the error template, but it is not generated for a static site made with nuxt generate.

[cesasol]

Maybe, adding 404 to the routes in the nuxt.config.js

generate: {
  routes: ['404']
}

and if that does not work try creating a pages/404/index.vue

[ishitatsuyuki]

Sure, it works, but it generates a suboptimal path: dist/404/index.html

[cesasol]

if that does not work out of the box with your server, try adding this to your .htaccess
ErrorDocument 404 /404/index.html

[stefanjudis]

@alexchopin Hey. 👋

I'm looking for the same option, due to netlify's nature I have to generate a dist/404.html. May I ask how you would approach this. I'd love to have a look into nuxt. :)

[alexchopin]

The problem is that a 404.html page is not generated by default.
I usually do this for a static 404 page:

• Add a route path: '/404' into the generate option of nuxt.config.js.
• Rename dist/404/index.html into dist/404.html.
• Copy the dist/404.html into static to save it for the future.

I can add a generate option for a 404 page but not 100% sure if everyone need it?

[ishitatsuyuki]

I would prefer it, with the following reasons:

• it's the default of a lot of static hosting services, including GitHub Pages, Netlify, Firebase Hosting, (that's all services I have used).
• it generates without a verbose console log of error.

[cesasol]

I also would prefer this functionality out of the box, and even for more than a 404 error, any kind of standard error like 400, 500. And manually creating the content with asyncData and conditionals for each code anyone wants to support

[ishitatsuyuki]

Most of the status code won't happen on static websites. 401 and 403 do happen, so at most those could be sensible.

[alexchopin]

For static website, only a 404 page is needed.
The others status code should be handled by a server.
The functionality with the condition below will be available to the next release:
If a /404 route exist, the /404/index.html is renamed as /404.html, that is managed by most of static hosting services.

[ishitatsuyuki]

Sounds good. By the way, is it possible to remove the verbose error message too?

[alexchopin]

The message about files generated?

[ishitatsuyuki]

I mean this one:

==== Error report ====
Route: '404' thrown an error:
{"statusCode":404,"message":"This page could not be found."}
[nuxt] Generate done

[hackuun]

I have the same issue. How to use 404 with npm run generate?

Why this issue is closed? Where's the answer?

[Katarzina]

I've checked...All right,

1. add to nuxt.config.js
   generate: {
   routes: ['404']
   }
2. it's generate /404/index.html
3. then add .htaccess
   ErrorDocument 404 /404/index.html

[hackuun]

@Katarzina so this is webserver issue? I am using nginx. I tried some 404 nginx settings, but still not working. Any tips about nginx?

[Katarzina]

I've checked...All right,

1. add to nuxt.config.js
   generate: {
   routes: ['404']
   }
2. it's generate /404/index.html
3. then add .htaccess
   ErrorDocument 404 /404/index.html

[Katarzina]

I'd made experiment with my nginx local server
nginx:
I add:

error_page 404 /404/index.html;
location = /404/index.html {
         internal;
}

It was enough...
If any way you will have error..look on /var/www/nginx/xx_error.log and explore more this section:

location / {
     root /var/www/kp.cz/dist;        
     index index.html index.htm;    
 }

kp.cz - my name server

[hackuun]

@Katarzina thank you, I will try tomorrow!

[hackuun]

So, at last I tried that. All I need is just one line in nginx config error_page 404 /404.html;

[FabianEllenberger]

Hi @alexchopin, is there a known way to have this automatic 404 generation for multiple 404.html files, in different languages? Like: 404.html and 404_en.html?

EDIT:
This would also mean i would need to have a _redirects file generated inside the dist folder with yarn generate for deploying it the site on netlify for example.

To do something like:

/en/* /en/404/index.html 404
/* /404.html 404

https://www.netlify.com/docs/redirects/

Thanks for any help on this! 🙏🏻

UPDATE:
I was able to get the _redirects file into the dist folder on yarn generate by adding it into the static folder. For now I just generate the basic 404.html in the root directory (which happens automatically 🙂) and for the en version of the 404 page I added the route /en/404 to the genereate/rotues inside the nuxt.config.js which works just fine (adds the route with and index.html which i can access form my _redirects file).

[toyflish]

I have a static generated site with page/404/index.vue generated to /404.html.
Requesting Apache to /not-existant-url.html it serves the 404.html static-generated page but after milliseconds nuxt.js get's loaded into my 404 and tries to load the "not-existand-url" route and makes it a blank page.
How do you avoid nuxt from kicking in on the 404 page?

[gijo-varghese]

generate: {
    fallback: "404.html"
},

this seems to generate 404.html page in the root without any problems. Also working fine with Firebase

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.