How can I get rid of the ".html" at the end of the url on every page

Hello!

I am building a website with express and I want to get rid of the “.html” at the end of each url.

I cant use the folder method.

And i tried to use the method with this code for each page

app.get("/home/", (request, response) => {
  response.sendFile(__dirname + "index.html");
});

But that didnt work either.

What else can I do?

Thanks.

what kind of not working happens with that code? 404 when you go to /home/?

1 Like

yes that happens

I checked on __dirname Modules: CommonJS modules | Node.js v18.2.0 Documentation, and it says there’s no trailing slash. So you should probably revise the

__dirname + "index.html"

part

2 Likes

not great with nodejs and i just found this code on this forum so im not sure how to revise it.

What is all your code befote your ‘app.get’

1 Like

I’ve just got some code for my 404 page

var express = require("express"); var app = express(); app.use(express.static(__dirname)); app.use((req, res) => { res.status(404).sendFile(__dirname + "/404.html"); }); app.listen(8080);

Try this instead. Also always place your 404 code at the very end.

const express = require("express");
const app = express();
app.use(express.static("public"));

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});
// put the code for 404 here

// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

Make sure to make a folder called views and place your index.html file there

2 Likes

The website doesnt load anymore.

Im getting this error from glitch on a black background

  failed to start application on simply-travel.glitch.me

  This is most likely because your project has a code error.
  Check your project logs, fix the error and try again.  

Here is what my server.js file looks like now

const express = require("express");
const app = express();
app.use(express.static("public"));

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});



app.use(express.static(__dirname));
app.use((req, res) => {
  res.status(404).sendFile(__dirname + "/404.html"); 
});
app.listen(8080);

// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});


app.use(express.static(__dirname));
app.use((req, res) => {
  res.status(404).sendFile(__dirname + "/404.html"); 
});
app.listen(8080);

What is your project url?

Also get rid of (very bottom of your projects code)


app.use(express.static(__dirname));
app.use((req, res) => {
  res.status(404).sendFile(__dirname + "/404.html"); 
});
app.listen(8080);

delete your server.js and replace it with this:

const express = require("express");
const app = express();
app.use(express.static("public"));

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

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


// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});


You need to use, for example, Express. You can find an example at Glitch.com

They are using express but they just didn’t set it up correctly.

I’ve just used the code you sent but now no subdirectories work at all

Okay… You need to make a folder called public and place all the CSS and javascript files there. Those files in there will then work with directories. Also don’t move server.js though,

Try remixing glitch express template

Can I just drag files into a folder? or do I have to make new files in the folder and copy and paste the code into each new file in the folder.

There is no drag and drop but if you click on the 3 dots next to a file and the file name editor pops up you can do something like this:

/game.html edit it to /public/game.html and hit enter

hold on wait, the css and js files are already their own folders, i could change the name of the css folder and do what you suggested to add the js files to the css folder and change its name to public

1 Like