How to Remove File Extension from URL in Express JS | Render 404 Not Found Page | Express.js Tutorial

📌 What is Clean URL?

💡 Understanding Clean URLs and 404 Pages in Express.js

By default, when serving static files in Express.js, users access pages with their full filenames (like about.html). To make URLs cleaner and more user-friendly, we can remove file extensions like .html and directly serve pages using simple routes such as /about.

Additionally, handling 404 Not Found pages ensures users see a friendly error message when they visit an undefined route.

⚙️ Step 1: Project Structure

Create the following folder and file structure for your project:

📁 project-folder
 ┣ 📁 public
 ┃ ┣ 📄 index.html
 ┃ ┣ 📄 about.html
 ┃ ┣ 📄 pagenotfound.html
 ┃ ┗ 📄 style.css
 ┗ 📄 index.js

🧱 Inside project folder, create public folder, inside it create three files one is index.html and second is style.css and about.html which is static file. Create index.js file which under to project folder.

Inside the public folder, create these files:

Express.js Server

NODE RUNTIME

const express = require('express');
const path = require('path');
const cors = require('cors');
const app = express();

const publicPath = path.join(__dirname, 'public');

app.use(cors());
app.use(express.static(publicPath));

app.get('/', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'));
});

app.get('/about', (req, res) => {
    res.sendFile(path.join(publicPath, 'about.html'));
});

// Catch-all for undefined routes
app.use((req, res) => {
    res.status(404).sendFile(path.join(publicPath, 'pagenotfound.html'));
});

app.listen(8080, "0.0.0.0", () => {
    console.log("Server running at http://localhost:8080");
});

Browser Output

Server logs

🧱 Inside project folder, create public folder, inside it create three files one is index.html and second is style.css and about.html which is static file. Create index.js file which under to project folder.

Inside the public folder, create these files:

Express.js Server

NODE RUNTIME

const express = require('express');
const path = require('path');
const cors = require('cors');
const app = express();

const publicPath = path.join(__dirname, 'public');

app.use(cors());
app.use(express.static(publicPath));

app.get('/', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'));
});

app.get('/about', (req, res) => {
    res.sendFile(path.join(publicPath, 'about.html'));
});

// Catch-all for undefined routes
app.use((req, res) => {
    res.status(404).sendFile(path.join(publicPath, 'pagenotfound.html'));
});

app.listen(8080, () => {
    console.log("Server running at http://localhost:8080");
});

Browser Output

Server logs

📘 How It Works

🔗 express.static() serves all static files like CSS, JS, and images.
🧭 Routes / and /about are manually mapped to index.html and about.html.
🚫 If a user enters a non-existent URL, the app.use() middleware at the bottom sends the custom pagenotfound.html file.
✅ This approach hides file extensions from URLs, creating clean and professional links.

express

Nearby lessons