如何在Express for Node中重定向到单页Web应用程序

Question

I am writing a website with a single page web app (the rest of the website is just static files which are served). I am trying to write a piece of middleware for express to redirect all requests that follow the pattern 'example.com/app' to 'example.com/app' so that requests such as 'example.com/app/my/specific/page/' will all result in the same page being sent. The key issue with this is that the url in the address bar of the browser must not change so that the javascript app itself can interpret it and display the correct thing.

I could have done something like this:

app.use( '/app', function ( req, res ) {
    res.redirect('/app');
});

However, this causes the url of the page to change and a separate HTTP request is assumedly made.

The most obvious alternative solution is to do something like this:

app.use( '/app', function ( req, res ) {
    res.sendfile(__dirname + '/public/app/index.html');
});

The issue here is that resources from the page after requests like 'example.com/app/my/specific/page/' will look in the wrong location. For example, if I have an image on the page such as then it will look for example.com/app/my/specific/page/image.jpg. Since no image is returned, it will not display on the page. This happens for all external scripts or stylesheets.

I also tried something like this:

app.use( '/app', function ( req, res ) {
    res.sendfile(__dirname + '/public/beta' + url.parse(req.url).pathname);
});

but that was very stupid of me for obvious reasons.

Answer 1

In the end I used this middleware to serve the app's page when appropriate

// all unmatched requests to this path, with no file extension, redirect to the dash page
app.use('/dash', function ( req, res, next ) {
    // uri has a forward slash followed any number of any characters except full stops (up until the end of the string)
    if (/\/[^.]*$/.test(req.url)) {
        res.sendfile(__dirname + '/public/dash/index.html');
    } else {
        next();
    }
});

I then set used a base HTML element with the href attribute pointed to the root.

Answer 2

If you're still trying to accomplish this I may have found a starting point. Alexander Beletsky has a Backbone.js + Express SPA boilerplate repo Located Here .

For a brief article on how it came about you can read his article on Dzone .