CODEWITHSUNDEEP
node.js
James Olaleye
James Olaleye

Reputation: 1

How to return a 404 Not found page in an Express App?

I have an express app, in which I have the following code:

app.get('*', (req, res) => {
  res.send('404', {
    title: 404,
    name: 'James Olaleye',
    errorMessage: 'Page not found',
  });
});

However, My IDE is warning about this message:

express deprecated res.send(status, body): Use res.status(status).send(body) instead

And with the above code, My Browser is returning the following payload as a JSON object:

 {
"title": 404,
"name": "James Olaleye",
"errorMessage": "Page not found"
}

What I want, is to display a 404 Not found page to the user, how can this be achived?

Upvotes: 0

Views: 1763

Answers (2)

Samer Murad
Samer Murad

Reputation: 2756

I updated your question a bit to make it clearer for future references.

the method res.send is deprecated, among other things because it's usages is too ambiguous. A server response, can be a lot of things, it can be a page, it can be a file, and it can be a simple JSON object (which you have here).

In your case, when you run res.send(404,{ /*...*/ }), the express app assumes you want to send a JSON object, so it does just that.

There are multiple possible ways, to achieve what you want, but I will stick to the most simple solution.

If you want to display an HTML page, in the most simplest form, you can actually just change your piece of code to do this instead:

app.status(404).send(`<h1>Page not found</h1>`)

This will essentially, show a page, instead of a JSON object.

You can even define the whole HTML file if you like:

app.status(404).send(
`
<html>
<!DOCTYPE html>
<head>
<title>404</title>
</head>
<body>
 <h1>James Olaleye</h1>
 <h1>Page Not Found</h1>
</body>
</html>
`
)

This would be the fastest way to achieve what you want.

A step further, would be to create an HTML file some where in your app, and to send the HTML file instead.

If your source code looks like this:

/
src/
  index.js
htmls/
  404.html

<!-- htmls/404.html -->
<html>
<!DOCTYPE html>
<head>
<title>404</title>
</head>
<body>
 <h1>James Olaleye</h1>
 <h1>Page Not Found</h1>
</body>
</html>

// src/index.js

const express = require('express');
const app = express();
const path = require('path');
const PORT = 3000;
 
app.get('/', function(req, res) {
    const options = {
        root: path.join(__dirname, '..', 'htmls')
    };
    res.sendFile('404.html', options, function (err) {
        if (err) {
            next(err);
        } else {
            console.log('Sent:', fileName);
        }
    });
});

This would allow you to have multiple HTML files which you can send around.

There are like I stated, other options as well, but that would make this answer way too long and out of scope. If you are interested, you can research Using template engines with Express and start with the following link.

Happy coding :)

Upvotes: 0

Sarkar
Sarkar

Reputation: 1879

You have two seperate problem

1: you are using an old way to response to the request insted use this res.status(STATUS_CODE).send(BODY)

2: you are sending a json yet you want to display a 404 page in this case you need to send a html template

so your code should look like this

app.get('*', (req, res) => {
  res.status(404).send("<div>404 Not Found</div>");
});

Upvotes: 1

Related Questions