How do I make a 404 page

Question: By default, the Replit 404 page says “Not found.” I was wondering if it was possible to write code that redirects you to a 404 page if the requested page does not exist.

Link: https://roverify.helper-mario-bot.repl.co

Code:

const express = require('express');
const path = require('path');
const app = express();
const port = 3000; // You can choose your own port number

// Serve static files from a directory (e.g., CSS, images)
app.use(express.static('public'));

// Define your 404 handler
app.use((req, res) => {
  res.status(404).sendFile(path.join(__dirname, 'errors/404.html'));
});

// Start the server
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

It is, but not in a default HTML/CSS/JS template. I would recommend using Node.js, as that’s what the code you provided is for.

1 Like

How?

The code I tried did not work.

What kind of Repl are you using currently?

2 Likes

HTML, JS, CSS currently

That is why. That template is intended for static HTML/CSS/JS sites. The code you provided above is Node.js code. Please try the Node.js template, and see if that resolves your issue.

2 Likes

Ok. How do I do it with HTML, JS, and CSS?

You cannot make a custom 404 page on Replit unless you use a backend such as NodeJS or Flask. There is a feature request for it though.

2 Likes

You simply don’t. Use the Node.js template as Firepup said:

2 Likes

Additionally, if you’d like a quick drop-in solution, you can use this template:
https://replit.com/@Firepup650/Easy-Nodejs-template?v=1

1 Like

Hello and welcome to the forums, @Gamer11!
There is a way (technically, though it is a bit out of the way), just not in Replit itself. You can still code a website or such in Replit, you just must use Replit’s built-in Git Tab. By using this you can setup a connection to a GitHub Repository, and by running the link on your GitHub Repository, you can create a custom HTML/CSS/JS 404 page.

If this interests you, just reply to this message and I’ll elaborate!

Sure. Please tell me how.

@RedCoder Would the template I provided not be an easier/quicker solution?

@Firepup650 The reason I gave my alternate solution is because some people may be hesitant to learn such extensive libraries such as NodeJS (even if in this case it isn’t too hard to pick up, it can still be easier sometimes to just stick with plain HTML, CSS and JS until you feel ready to move on.

I’ll write up a quick article on how to do it. I’ll share it in a few minutes.

This is why I made the template just as drop-in and run as I could. They don’t have to learn anything, just drop their files in and go.

1 Like

Ok thanks! @Firepup650 it is easier for me to do plain HTML, JS, and CSS because I really only know how to do the basics of discord.js 14.

1 Like

You don’t have to really learn anything to use my template, just place your files in the public folder, and customize 404.html to your liking. You don’t have to touch the Node part at all.

3 Likes

This article should help. I’ll add how to manage it sometime.
I gtg, hope that helps for now.
How To Connect A Git Repo to your Repl! - General / Showcase - Replit Ask

Thx for do that! Have a great day.