Link Static Files using Express

Code Help Node JS
1

Hi,

The Website Commissions website has been having a couple of issues, and @SalladShooter allowed everyone to work on their own version of the site in the meantime. I’ve been working on my backend with Express, and it’s going pretty well up until now, as I’ve been having trouble linking two other HTML documents that aren’t index.

What is the best way to link up my two other HTML documents (request.html, and pricing.html)? My current backend looks like the following, and I would rather not use a hacky solution.

const express = require("express");
const path = require("path");
const app = express();

PORT = process.env.PORT;
IP = process.env.IP;

app.use("/", express.static(path.join(__dirname, "views")));
app.use("/public", express.static(path.join(__dirname, "public")));

app.listen(PORT, IP, () => {
    console.log(`Listening on ${IP}:${PORT}`);
});

If you need more information, I’ll link my GitHub repo below. Thank you!

2

As in, how to link from the main page to the other two? If so, try just removing the / from the beginning of the links. (EX: /pricing → pricing)

1 Like
3

The reason I did /pricing and /request was that I wanted my backend to send the corresponding HTML files. Not sure if HTML even works like that though, and I would rather have my backend do it than simply redirect the user to another HTML doc, which will have the .html in its URL.

Sorry if I have no idea what I’m talking about :laughing:, still pretty new to Express and not sure what the best way is to accomplish this

4

It would still send the correct files, /pricing means to send the pricing page from root, and pricing means to just send it from the current directory.

1 Like
5

Thank you! Seems to work correctly now. I’m a bit skeptical if I should be using res.sendFile() though. Is there a better way to do it?

Here’s my current index.js now:

const express = require("express");
const path = require("path");
const app = express();

PORT = process.env.PORT;
IP = process.env.IP;

app.use("/", express.static(path.join(__dirname, "views")));
app.use("/public", express.static(path.join(__dirname, "public")));

app.use("/pricing", (req, res) => {
    res.sendFile(path.join(__dirname, "views", "pricing.html"));
});

app.use("/request", (req, res) => {
    res.sendFile(path.join(__dirname, "views", "request.html"));
});

app.listen(PORT, IP, () => {
    console.log(`Listening on ${IP}:${PORT}`);
});
6

You shouldn’t need to explicitly send pricing and request I don’t believe. Let me double check something.

2 Likes
7

Why not put the files in the same directory?

2 Likes
8

They are in the same directory, but I’d rather link /pricing than have to link the document itself, cause it will show .html in the URL.

2 Likes
9

I know you don’t like nginx, but it’s really easy to make nginx do that (it should already be set up in the original website repl)

1 Like
10

StackOverflow suggests this code:

const root = path.join(__dirname, '/views');
app.use("/public", express.static(path.join(__dirname, "public")));
app.use((req, res, next) => {
  const file = req.url + ".html";
  fs.exists(path.join(root, file), (exists) =>
    exists ? res.sendFile(file, {root}) : next()
  );
});

which would replace:

(Just edited to work with your existing code)

1 Like
11

I didn’t even know I didn’t like nginx :laughing:, I had googled how to set it up and it was very confusing along with Express

1 Like
12

You just seem to prefer not using it, I noticed :slight_smile:

2 Likes
13

@bobastley Could you link the original repl to your git repo, by chance?

14

(https://replit.com/@website-commissions/Website-Commissions, I mean)

15

Ah my bad, will do that now.

1 Like
16

I get Cannot Get “/” displayed when trying to access root. It also seems like its adding .html to the URL. Is it possible to access the document and not display .html in the URL bar?

17

Ok, I just added it to the README.

18

Did you add the GitHub repo to the repl?

1 Like
19

I’ll tweak it, here:

const root = path.join(__dirname, '/views');
app.use("/public", express.static(path.join(__dirname, "public")));
app.use((req, res, next) => {
    const file = (!(req.url == "/") ? req.url : "/index") + ".html";
    fs.exists(path.join(root, file), (exists) => {
        exists ? res.sendFile(file, { root }) : next()
    });
});

Edit: Should actually work now, I’m dumb ¯\_(ツ)_/¯
Edit 2: Removed my debugging console.log calls

2 Likes
20

Oops! I understood you wrong :laughing: Will add it to the Repl now

Edit: What file do you want me to add it to? There isn’t a readme or anything