CODEWITHSUNDEEP
node.jsexpressstatic-content
Aage Torleif
Aage Torleif

Reputation: 2013

Express: How to serve font-awesome as static content?

I use express to serve static content on my site and I want to incorporate FontAwesome (npm install font-awesome). However in Font-Awesome's css the links to the font files are appended with a query-string containing versioning information witch express doesn't understand.

Has anyone encountered this and found a fix? Is there a simple way to make express ignore the qs for static content?

var express = require('express')
var app = express()

app.use('/static', express.static('./node_modules/font-awesome/css'))
app.use('/static', express.static('./node_modules/font-awesome/fonts'))

// response 200 | /static/font-awesome.min.css
// error 404    | /static/fontawesome--webfont.woff?v=4.6.3

Update As @Denys Séguret points our it's not the qs as I had thought. The actual request is for /fonts/fontawesome--webfont.woff?v=...

Solution

app.use('/fonts', express.static('./node_modules/font-awesome/fonts'))

Upvotes: 7

Views: 8145

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382102

When your browser requests /static/fontawesome--webfont.woff?v=4.6.3, the server is free to ignore the ?v=xxx part. And that's what is done by the express.static module. The point of that part is to prevent browsers and proxies from using an old version of the file.

So the problem isn't where you think it is. The problem is you map the static route to two servers. The first one doesn't find the file and issues a 404.

(Dirty) Solution 1:

Change your mapping

app.use('/static', express.static('./node_modules/font-awesome'))

and change the URLs:

/static/fonts/fontawesome--webfont.woff?v=4.6.3

I say it's dirty because you're serving the unchecked content of a node modules (which is updated when you do a npm update). You should never do that.

 Solution 2:

Create a static directory (the name doesn't matter) and put inside the contents of the ./node_modules/font-awesome/css and ./node_modules/font-awesome/fonts directories then just map it using

app.use('/static', express.static('./static'));

Upvotes: 6

Related Questions