Node JS Tutorial - Custom 404 Page

In this tutorial, we will learn how to create a custom 404 page in Node.js.

By default, when you navigate to a non-existent URL, such as /xyz, you will see a message that says "Cannot GET /xyz".

To create a custom 404 page, we will start by creating a new file inside the views folder.

Creating a Custom 404 Page

Go to the views folder and create a new file. Let's call it "404.ejs".

Inside the 404.ejs file, write the following code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404</title>
</head>
<body>
    <h1>404</h1>
    <p>The page you are looking for is not available.</p>
</body>
</html>

Next, go to the index.js file and add the following code:


app.use(function(req,res,next){ 
    res.status(404)render('404'); 
});

Testing the Custom 404 Page

Save all changes and let's test our custom 404 page.

Go to the browser and navigate to a non-existent URL, such as /sdfsdfsd.

You should see the custom 404 error page that we just created.

That's it! You have now learned how to create a custom 404 error page in Node.js.