'browser won't load css stylesheet for my local website using express and node

enter image description here

enter image description here

And the app.js screenshot: enter image description here

I tried every possible combination of href and express.static(""); adresses. I either get a response from a browser saying browser wont allow me to load local files or I get this: enter image description here

javascriptcssnode.jsexpressnodes


Solution 1:[1]

Since the folder name public is already contained in the URL of your stylesheet, you must write

app.use("/public", express.static("D:\\Igor\\Desktop\\Angela\\todolist-v1\\public"));

Note also that backslashes must be doubled in Javascript strings.

With your current code, the stylesheet is looked up at D:\Igor\Desktop\Angela\todolist-v1\public\public\css\styles.css, where it does not exist. This leads to an HTML error page ("Cannot GET ..."), hence the browser complaint about the wrong mime type.

Solution 2:[2]

. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve.

Have you installed "path" module??

If not first install it.

  1. Do

    const path= require('path')

  2. To use a static directory in your app do,

app.use('/public' , express.static(path.join(__dirname, 'public')))

  1. Now to access assets under public folder in any directory use,

    public/css/style.css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Heiko Theißen
Solution 2 Ali Raza

Related Questions