configure sails server to work with html5Mode?

Question

I have an angular-sails app where I want to remove the hash from urls

I added this to my client app.config

$locationProvider.html5Mode(true);

and the routing works until I refresh the page.

navigating to http://localhost:1337/about works. I refresh and get

{
  "status": 404
}

from sails server. How do I configure sails to work with angularjs html5Mode?

Answer 1

To use HTML5Mode you need your server setup to only provide the your root (or "index.html") file. "web.com/index.html". In my opinion this is best done by separating your Sails App and your Angular front end to be delivered seperatly. That way you can easily setup your web server that is serving your angular client front end, to only serve index.html on non AJAX calls.

To do this in sails there is no "switch", you could set a app wide policy that checks if angular is making a call or the browser is making the call and send the appropriate file, you can see the code below. You would have to make sure angular is setting the following header X-Requested-With = XMLHttpRequest

App Policy

module.exports = function(req, res, next) {

  // Checks if this is an ajax request 
  // If True then skip this and return requested content
  // If False then return the index (or root) page  
  if (if !req.isAjax) {
    return res.view("/index");
  }

  return next();
};

Answer 2

You can set up a wildcard route to a controller method that will send down your single page app, or actual assets if they exist. It'll be less of a problem if you have a clear URL prefix, like /admin in my case. Here's what I'm using:

routes.js:

'GET /admin/*': 'AdminController.index'

AdminController.js:

var path = require('path');
var fs = require('fs');

module.exports = {
    index: function(req, res) {
        var requestedPath = req.url;
        var resolvedPath = path.resolve(requestedPath);
        if (resolvedPath.indexOf('/admin') !== 0) {
            res.send(403);
        } else {
            var publicRoot = sails.config.paths.public;
            var fullPath = path.join(publicRoot, resolvedPath);
            fs.exists(fullPath, function(exists) {
                if (exists) {
                    res.sendfile(resolvedPath, { root: publicRoot });
                } else {
                    res.sendfile('/admin/index.html', { root: publicRoot });
                }
            });
        }
    }
};

If the asset actually exists under the public area (like a .js file), send it down; otherwise, send down index.html. With some paranoid path checks.

Answer 3

This is a slightly different question, but I have a previous SO answer that may apply. Page not found when refreshed on SailsJS

You're running into this problem because when you reload the page, sails is responding, and it knows nothing about your angular routes.