Cannot serve static files with express routing and no trailing slash

Question

I want a route called 'main' which will serve static files:

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

However when i do:

http://my.site.dev/main

The CSS and JS files won't download because it is trying to get them from

http://my.site.dev/css/styles.css

It should be getting the files from:

http://my.site.dev/main/css/styles.css

However, if I access my site with a trailing slash:

http://my.site.dev/main/

All files come through fine

Any ideas why not having a trailing slash messes up resources like CSS and JS from coming in?

Answer 1

This is an http problem, not just an Express-related challenge. The problem is discussed at:

• Relative URLs and trailing slashes
• http://www.bizcoder.com/the-mystery-of-the-trailing-slash-and-the-relative-url

If your URL is /main and your relative URL is css/style.css, it will resolve to /css/style.css; but if your URL is /main/, the relative URL resolves to /main/css/style.css.

My strategy for dealing with this is to redirect to add the trailing slash. Like this in Express:

app.all(/^\/main$/, function(req, res) { res.redirect('/main/'); });
app.use('/main/',express.static(__dirname+'/public'));

Or:

app.enable('strict routing');
app.all('/main', function(req, res) { res.redirect('/main/'); });
app.use('/main/',express.static(__dirname+'/public'));

Answer 2

How are the JS/CSS files requested in the HTML? If you're using strings like css/styles.css, then it will try to get them from the current directory. The directory for /main is / (just like /main.html would be), while the one for /main/ is /main/. A quick fix would be to use /main/css/styles.css in your HTML.