How can I include css files using node, express, and ejs?

Question

I'm trying to follow the instructions to https://stackoverflow.com/a/18633827/2063561, but I still can't get my styles.css to load.

From app.js

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

In my .ejs, I have tried both of these lines

<link rel="stylesheet" type="text/css" href="/css/style.css" /> <link rel="stylesheet" type="text/css" href="/public/css/style.css" /> 

Neither loads the css. I've gone into the developer's console noticed the type is set to 'text/html' instead of 'text/css'.

My path looks like

. ./app.js ./public     /css         /style.css 

Answer 1

Use this in your server.js file

app.use(express.static(__dirname + '/public')); 

and add css like

<link rel="stylesheet" type="text/css" href="css/style.css" /> 

dont need / before css like

<link rel="stylesheet" type="text/css" href="/css/style.css" /> 

Answer 2

1.Create a new folder named 'public' if none exists.

2.Create a new folder named 'css' under the newly created 'public' folder

3.create your css file under the public/css path

4.On your html link css i.e <link rel="stylesheet" type="text/css" href="/css/style.css">

// note the href uses a slash(/) before and you do not need to include the 'public'

5.On your app.js include : app.use(express.static('public'));

Boom.It works!!