Express.js - 404 Error

A 404 error, also known as "404 Not Found", is an HTTP status code that occurs when the requested resource cannot be found on the server.To handle 404 errors in Express, you can create a middleware function that is executed when no other route matches the request.

File and Folder Structure

Express 404 error project folder structure

Setting up Express

This Express app uses Handlebars (hbs) for dynamic views, rendering home and shop pages while handling 404 errors gracefully for a seamless user experience. This middleware should be defined after all other routes to ensure it only catches unmatched requests.

index.js

const express = require('express');
const path = require('path');
const hbs = require('hbs');

const app = express();

// Set up handlebars as the view engine
app.set('view engine', 'hbs');

// Set the location of the views
app.set('views', path.join(__dirname, 'views'));

// Index route
app.get('/', (req, res) => {
    res.render('index');
});

// Shop route
app.get('/shop', (req, res) => {
    res.render('shop');
});

// Middleware to handle 404 errors
app.use((req, res, next) => {
    res.status(404).render('404');
});

const PORT = 5000;

app.listen(PORT, () => {
    console.log(`Server is running at http://localhost:${PORT}`);
});

Create hbs Templates

views/index.hbs

This index page offers a welcoming design with a bold heading, engaging text, and a clear shop button, guiding users effortlessly. The layout ensures a smooth, intuitive, and user-friendly browsing experience.

views/index.hbs

<html>
    <head>
        <title>Home Page</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body class="bg-light">
        <div class="container text-center py-5">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <h1 class="display-4 mb-4">Welcome to Our Store</h1>
                    <p class="lead mb-4">Discover amazing products at great prices. Start shopping now!</p>
                    <a href="/shop" class="btn btn-primary btn-lg">Visit Shop</a>
                </div>
            </div>
        </div>
    </body>
</html>

views/shop.hbs

<html>
    <head>
        <title>Shop Page</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body class="bg-light">
        <div class="container py-5">
            <div class="row">
                <div class="col-md-12 text-center mb-5">
                    <h1 class="display-4">Welcome to Shop Page</h1>
                    <p class="lead">Explore our wide range of products.</p>
                    <a href="/" class="btn btn-primary btn-lg">Go Back</a>
                </div>
            </div>
        </div>
    </body>
</html>

views/404.hbs

This 404 error page provides a simple and user-friendly design with a bold error message and a helpful prompt. A clear home button ensures easy navigation back to the main page.

views/404.hbs

<html>
    <head>
        <title>404 Error</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body class="d-flex align-items-center justify-content-center vh-100 bg-light">
        <div class="text-center">
            <h1 class="display-4 text-danger">404</h1>
            <p class="lead">Oops! The page you're looking for doesn't exist.</p>
            <a href="/" class="btn btn-primary">Go Home</a>
        </div>
    </body>
</html>

Run the Server

Run the server using the command is given below.

node index.js

D:\my-app>node index.js
Server is running on http://localhost:5000

Output

Index Page Output

The index page displays a welcoming message with a bold heading and a call-to-action button. Users can easily navigate to the shop section for a seamless experience.

Shop Page Output

The shop page presents product listings or relevant content in a clean layout. It ensures users can explore and browse available items effortlessly.

404 Page Output

If you open the /dashboard link in the URL, it will display a 404 error to inform the user. A home button is provided for easy redirection to the index page.