404 Page not working

So I create a file called 404.html and used this code in the index.js file:

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const port = process.env.PORT || process.env.port || 3000;

app.use(express.static(__dirname + "/public"));

app.get("/", (req, res) => {
	res.sendFile(__dirname + "/index.html");
});

app.get("*", (req, res) => {
	res.sendFile(__dirname + "/404.html");
});

server.listen(port, () => {
	console.log("Server listening on port:", port);
});

But when I visit a url that doesn’t exist, for example, https://node-app.qwertyqwerty54.repl.co/about, the 404 page doesn’t show up, instead this shows up:

I’ve found the fix to change this line of code:

res.sendFile(__dirname + "/404.html");

to this:

res.sendFile(__dirname + "/public/404.html");

But my question is, why doesn’t the first version work?

It works for the index.html page, so why not the 404 page?

Almost forgor to include Repl link XD
https://replit.com/@QwertyQwerty54/node-app

So at the top, you are putting this line.

app.use(express.static(__dirname + "/public"));

Essentially this is making the server return any files inside the public folder before anything else. So if you have a file called hello.html, when you go to yoursite.repl.co/hello then it will send that html file. index.html is a special name and it will return that file when you path is just /. So now that you see that, this line is completely pointless.

app.get("/", (req, res) => {
	res.sendFile(__dirname + "/index.html");
});

Because that other line is already returning index.html when you are on the / path.
As for why this doesn’t work…

app.get("*", (req, res) => {
	res.sendFile(__dirname + "/404.html");
});

So actually, if you were to go to yoursite.repl.co/404, the first line would catch it and return the 404 page. But if you want it to catch anything, then you need to make it the correct path. __dirname is the current path your code is running from, so you need to put /public/404.html so that it uses the correct path.
There are two ways to fix this.

Get rid of first line

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const port = process.env.PORT || process.env.port || 3000;

app.get("/", (req, res) => {
	res.sendFile(__dirname + "/public/index.html");
});

app.get("*", (req, res) => {
	res.sendFile(__dirname + "/public/404.html");
});

server.listen(port, () => {
	console.log("Server listening on port:", port);
});

Or alternatively. You would have to move 404.html to another folder and do it like this.

Move 404.html

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const port = process.env.PORT || process.env.port || 3000;

app.use(express.static(__dirname + "/public"));

app.get("*", (req, res) => {
	res.sendFile(__dirname + "/otherfolder/404.html");
});

server.listen(port, () => {
	console.log("Server listening on port:", port);
});
2 Likes

Thanks, that works, but when I link a css file it doesn’t seem to work.

I added this line of code to the HTML files:

<link type="text/css" href="/public/style.css" rel="stylesheet">

But it’s not linking lol. Help would be appreciated c:

just put "style.css" in the href

1 Like

Still doesn’t work :upside_down_face:

”./style.css”?

1 Like

Nope lol :laughing: stilll not workin

The reason it doesn’t work is probably because you are using the first option I showed you, where you need to make an app.get("/yourfile"); for every file. Instead, you should structure your files like this.

  • project folder
    • public
      • script.js
      • style.css
      • picture.png
      • (any other files that aren’t html basically)
    • views
      • index.html
      • 404.html
    • index.js

And then index.js would look like this.

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const port = process.env.PORT || process.env.port || 3000;

// handle js, css, and image files
app.use(express.static(__dirname + "/public"));

// handle requests to main page (index.html)
app.get("/", (req, res) => {
	res.sendFile(__dirname + "/views/index.html");
});

// handle ALL other requests
app.get("*", (req, res) => {
	res.sendFile(__dirname + "/views/404.html");
});

server.listen(port, () => {
	console.log("Server listening on port:", port);
});
4 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.