CODEWITHSUNDEEP
node.jsexpressurl-routing
Joshua Bambrick
Joshua Bambrick

Reputation: 2699

How to Redirect to Single Page Web App in Express for Node

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.

Upvotes: 2

Views: 18416

Answers (2)

Joshua Bambrick
Joshua Bambrick

Reputation: 2699

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.

Upvotes: 3

Donald
Donald

Reputation: 3911

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.

Upvotes: 0

Related Questions