如何使用为单个页面应用程序提供服务的ExpressJS管理丢失的静态文件？

Question

In my application all queries from the browser with "/_/*" goes to my static folder:

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

Then all GETs to / goes to an HTML file (single page application in HTML5 mode ):

app.get('/*', function(req, res) {
  //some request preprocessing in done here...
  hbs.render(path.join(__dirname + '/apps/home.html')).then(function (data) {
        res.send(data);
    });
});

This works great unless there is a missing static file. If my HTML calls '/_/iDontExist.js', the static middleware from express do not find the file and propagates the event which gets matched by app.get('/*' .

This is not correct, I want Angular to respond with a 404 if the URL starts with '/_' and the file is not present instead of trying to match the URL with some other route in my chain.

Answer 1

Change app.get('/*' so it sends a 404 if the URL doesn't resolve to a real page.

---

Well, that's the simple answer.

You're probably writing your SPA using the history API which is designed to let you map URLs in the SPA onto real URLs.

This is a great piece of design because it allows you to generate the same HTML if the page is requested directly or dynamically update the URL when you using JS to modify one page to turn it into another. (This lets you make dynamic changes and only modify a small part of the DOM for performance).

You get problems if you don't implement it properly and forget about the server.

There is a nasty trend (not helped by Angular's documentation telling you to do this!) towards making every single URL onto the same , practically empty HTML document and depending on JS to generate all the content.

This means you lose the performance benefits of having the initial page load have all the content just there.

You lose the ability of clients which don't support JS to view the page.

You lose the fallback for when the JS fails for whatever reason .

And you end up with a bunch of duplicate URLs all pointing at the same contentless page (probably not great food for search engines).

If you aren't serving up real pages from the server, you might as well be using hashbangs. While they have lots of problems , using the history API without the server side part of the system shares those problems and introduces a couple more.

---

So, the good solution to this is to build the server side of the code (you should investigate the term "isomorphic js") and then you can 404 for any pages which aren't found.

---

The less good solution would be to switch to using hashbags and change '/*' to '/'

---

And the dirty hack which leaves you with the bad use of the history API would be to just check the URL inside your /* handler and 404 if it starts with /_

Answer 2

You could create your own small middleware - example:

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

var dontAcceptUnderscorePath = function(req, res, next){
 if(req.url.startsWith('/_'))
    res.status(404).send();
  else
    next();
}

app.get('/*', dontAcceptUnderscorePath, function(req, res) {
   //some request preprocessing in done here...
   hbs.render(path.join(__dirname + '/apps/home.html')).then(function (data) {
    res.send(data);
   });
});

Answer 3

Don't match redirect stuff to your index.html which starts with _ .

app.get(/^[^_].*$/, function(req, res) { // or perhaps /^(?!_).*$/

});

Then handle 404s below.