How to include CSS files in Express.js views when not using a template engine?

Question

I'm trying to create an Express application. My limitations are that I cannot use any template engine for rendering HTML. There are (at least) two problems:

One of the problems that I foresee is how will I manage to manipulate the data based on what I need to show to the user. E.g. I have a transactions table in my database and I need to display an HTML table of all those transactions. The traditional way that I'm used is to utilize a template engine, where I can put a for loop that goes through the records.
I'm sending an HTML file when I call a specific route, but it cannot get the CSS files from another folder.

For problem 2. I've tried:

 app.get('/transactions', (req, res) =>
    res.sendFile(path.join(__dirname+'/public/assets/html/transactions.html')))

and then in transactions.html I have

<link rel="stylesheet" href="../stylesheets/shared/constants.css">

and other links to stylesheets.

When the page is displayed, it doesn't apply any of the styles. When I checked the source code in the browser, and I click the link for constants.css it shows the message:

Cannot GET /stylesheets/shared/constants.css

This doesn't seem like the right logic. What things should be changed?

you need to setup static routes: expressjs.com/en/starter/static-files.html — Get Off My Lawn
– Get Off My Lawn, Commented Apr 19, 2019 at 20:59

1565986223 · Accepted Answer · 2019-04-20 04:34:00Z

2

Simple example:

Assuming your folder structure:

app.js
|   +-- public
|   |   +-- stylesheets
|   |   |   +-- shared
|   |   |   |   +-- constants.css
...

You could simply server public folder as static like:

app.use(express.static(__dirname + "/public"))

// In your html
<link rel="stylesheet" href="/stylesheets/shared/constants.css">

With express, it's better to use absolute path over relative path.

Or set up virtual path for your static files like:

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

// In your html
<link rel="stylesheet" href="/static/stylesheets/shared/constants.css">

answered Apr 20, 2019 at 4:34

1565986223

6,7483 gold badges24 silver badges34 bronze badges

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

Comments

Adrian Mole · Accepted Answer · 2021-02-24 13:39:04Z

1

Simple Example worked for me:

app.use(express.static(__dirname + "/publlic"))
app.get('/', (req, res) => {
app.engine('html', cons.swig);
app.set('view engine', 'html');
res.render('index');
})

// In your html
<link rel="stylesheet" href="/static/stylesheets/shared/constants.css">

With this method, I use engine like you.

edited Feb 24, 2021 at 13:39

Adrian Mole

52.2k193 gold badges61 silver badges101 bronze badges

answered Feb 24, 2021 at 13:12

Axel Menard

111 bronze badge

Collectives™ on Stack Overflow

How to include CSS files in Express.js views when not using a template engine?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related