404 support in `eleventy serve`

[clottman]

I'm trying to set up an eleventy site in Glitch, which doesn't have default 404 routing like Github Pages and Netlify do. I've tried futzing around with some advanced Glitch configuration options to set up 404 routing, but it's trickier than I'd like.

It would be really cool if people who are using the browser-sync server provided by eleventy serve could configure it to provide 404 routing. This issue suggests how it could be done in each of the places that this.server.init is called in src/EleventyServe.js.

I want to work on creating a pull request for this behavior, but I'm not sure how it fits into configuration of eleventy - should it be on by default, or off by default and configured through an option passed in to serve? Or an option provided in .eleventy.js?

[zachleat]

Looks like we need to expose a configuration option for the browsersync init callback here (a method to set this callback if you want to use it): https://www.browsersync.io/docs/api#api-init

would be used here https://github.com/11ty/eleventy/blob/master/src/EleventyServe.js#L146

Config stuff is here https://github.com/11ty/eleventy/blob/master/src/UserConfig.js

[zachleat]

(Oh, also to answer your question yes I would be happy to merge this into core after we get it figured out 👍)

[clottman]

Thanks for the pointers! While I was digging into the UserConfig options, I noticed setBrowserSyncConfig and wondered if it was possible to pass the callback to browserSync in the options object. It is!

eleventyConfig.setBrowserSyncConfig({
    callbacks: {
     ready: function(err, bs) {
       const content_404 = fs.readFileSync('_site/404.html');
       bs.addMiddleware("*", (req, res) => {
        // Provides the 404 content without redirect.
        res.write(content_404);
        res.end();
      });
     }
    }
  });

I combined this 11ty doc on the browserSyncConfig option and the browserSync callbacks option to make eleventy --serve provide a 404 page with no extra configuration from the host. 🎉

You can see a working demo at https://11ty-eleventy-base-blog.glitch.me/. (Add whatever to the end of the url to see the 404 page).

Since this is already supported by 11ty, my suggestion would be to add info on this configuration option to the quick tip on 404 support. I can create a PR doing that!

[zachleat]

Thank you so much for this! Great addition!

[zachleat]

This addition was added to the default eleventy-base-blog. Thanks! 11ty/eleventy-base-blog@e2be859

[andersk]

You should do res.writeHead(404) before res.write(content_404), so as to actually serve the 404 page with status 404, not 200. (Submitted 11ty/eleventy-base-blog#84, clenemt/eleventy-webpack#6, 11ty/11ty-website#887).