How to make a custom 404 page (A TUTORIAL)

Glitch Tutorials
, ,
1

Project URL: https://404-example.glitch.me

in the past month, i’ve answered at least 3 questions about a custom 404 page. i have made a simple example and created a glitch for it so you can see how it works.

code:

create a package.json file. this will switch your site from static to server and get rid of the 24/7 uptime provided by glitch. code:

{
  "name": "defresh",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "engines": {
    "node": "8.x"
  }
}

and a server.js file with something like this:

var express = require("express");
var app = express();
app.use(express.static(__dirname));
app.use((req, res) => {
  res.status(404).sendFile(__dirname + "/404.html"); 
});
app.listen(8080);

that’s all. and you have to make the 404.html file, create the 404 page, and then you’re done!

created by

@DerDer56 :speech_balloon:

ps: you can see the example code at gomix.com/#!/404-example

2

How does that work? Because when you do app.use(), you’re creating an Express middleware and Express middlewares are executed before all other routes, meaning, even if you have other routes and endpoints defined, its always going to return a 404. But this doesn’t work for projects already using Express and if you have other endpoints defined in your server.js, you will always be getting a 404 page.

1 Like
3

As long as the middleware is put after all the other routes it’ll work.

4 Likes
4

that’s true.

1 Like
5

@DerDer56 this is what i do:
app.get("*", function(request, response) { response.sendFile(__dirname + "/views/404.html"); });

6

that’s what i’m doing.

7

u use res.send
@DerDer56

8

it’s basically the same thing if done in the right order