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

Question

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'))

Plexiform

Answer 1

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'));

Roentgenoscope

Thanks, I do see now it's looking for the font's in /fonts/fontawesome-webfont.ttf?v=... – Plexiform

"You should never do that." I disagree. If you lock into a specific semver of the dependency, I see no issue with using it as a static path, even if node_modules is not checked. – Ingroup

@PatrickRoberts Even if you think you can do it "safely" due to semver locking, there's no point in serving a complete node module. The least that can be said is that it's excessively lazy and dirty. – Triecious

@DenysSéguret it really depends on the node module. I do agree it would be much better to serve only the "dist" folders within the module, since no end-user should ever need access to things like its package.json, but if the node module is formatted similarly to a bower package, then serving just the "dist" folders is actually much preferable, and more "clean" than checking them into your project. Think of CDNs. They exist to externalize static files. If you think that not checking a static folder is dirty, then by that argument CDNs are a dirty solution as well. – Ingroup