css doesn't load with node JS server despite using express.static

Question

It is so ridiculous but i'm stuck for days in a very meaningless code situation.

I can't have the css, the image to load on my nodejs server.

I tried many things (express.static, etc.) but nothing seems to work.

Can you help me ?

app.js

const express = require('express')
const app = express()
const port = 3000
app.listen(port, () => {
    console.log(`app running on port ${port}`)
})

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

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Découvrez ma newsletter pour acquérir les bases du marketing digital et du growth. Zennit est une agence Growth spécialisée en scraping et génération de leads.">
    <title>Agence Growth - spécialité scraping et leads generation</title>
    <link rel="icon" type="image/png" href="assets/images/favicon.png" />
    <link rel="stylesheet" href="./assets/css/web_version.css">
    <link rel="stylesheet" href="./assets/css/mobile_version.css">
    <link rel="stylesheet" href="./assets/css/tablet_version.css">
</head>

File structure

Thank you for your help :)

You aren't using express.static() anywhere? All you're doing is responding to every request with index.html — Phil
– Phil, Commented Mar 15, 2022 at 0:30
No i'm using it. I just did not put it on the file i delete it from app.js cause it doesn't work. — Mohamed Necib
– Mohamed Necib, Commented Mar 15, 2022 at 0:34

Phil · Accepted Answer · 2022-10-15 20:32:57Z

4

To statically server your assets directory as /assets, you'll want something like this

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

This means any request to /assets/* will serve static files from your assets directory, eg

<link rel="stylesheet" href="/assets/css/web_version.css" />
<img src="/assets/images/some-image.png" />
<script src="/assets/js/some-frontend-script.js"></script>

You're also serving index.html for every single request. Change it to the following to only serve it for GET / or GET /index.html

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

I'd recommend keeping all static files, including index.html in one directory to serve statically. For example, with this directory structure

app/
├─ public/
│  ├─ assets/
│  │  ├─ css/
│  │  ├─ js/
│  │  ├─ images/
│  ├─ index.html
├─ app.js
├─ package.json

All you'd need is

app.use(express.static("public"))

There would be no need for res.sendFile() at all.

edited Oct 15, 2022 at 20:32

answered Mar 15, 2022 at 0:34

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mohamed Necib Over a year ago

Ok cool for your insight, can you tell me how the css link should look like. I fell that I also have a problem here. As I like to learn, can you tell me more regarding the every single request. What do you mean by that ? There is something I'm missing.

Phil Over a year ago

@MohamedNecib app.use((req, res, next) => { ... }) is basically middleware that runs on every request.

Mohamed Necib Over a year ago

Ok, I've tried your solution, but can this message : Cannot GET /web_version.css I mean it is weird cause the file is there...

Phil Over a year ago

What does your <link> element look like?

Abhinav Das Over a year ago

Missing closing parenthesis in first code snippet ;)

Collectives™ on Stack Overflow

css doesn't load with node JS server despite using express.static

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related