title: How to setup Sails.js routes to support pushstate with a SPA on the frontend
body: <p>How to setup SailsJS routes to support pushstate, but still be able to serve requests prefixed with <code>/api</code> along with serving static assets as well?</p>
  
  <p>Using: </p>
  
  <ul>
  <li>Backbone 1.x with <code>pushState: true</code></li>
  <li>Sails 0.10.x</li>
  </ul>
  
  <p>Suggested solution from this <a href="https://github.com/balderdashy/sails/issues/871">thread</a> is to use the <code>/*</code> wildcard and redirect all to the index view.</p>
  
  <p><strong>/path/to/app/config/routes.js</strong></p>
  
  <pre><code>'/*': {
    view: 'index' 
  }
  </code></pre>
  
  <p>The problem is that this will redirect everything to index. including static file assets, the express.static middleware doesn't seem to have an effect, this route is somehow taking precedence. </p>
  
  <p>Also, this prefix below doesn't have any effect, since the route above takes precedence, however the prefix works if I just remove the wildcard i.e <code>'/': { view: 'index' }</code></p>
  
  <p><strong>/path/to/app/config/blueprint.js</strong></p>
  
  <pre><code>module.exports.blueprints = {
      ...
      prefix: '/api',
      ...
  }
  </code></pre>
  
  <p>Obviously, this does not seem as a core SailsJS issue, but rather my minimal knowledge the expressjs router, since that's what sailsjs is using. </p>
  
  <p>Theoretically, I could explicitly just list out all the assets prefixed routes and have a controller to serve all, since they are well known and static i.e.  <code>'/js*': { controller: 'AssetsController', action: 'serve'</code>, and so on for <code>'/styles*'</code>, <code>'/images*'</code>, <code>'/templates*'</code>, <code>'/fonts*'</code>, but I'm really hesitant on doing so, I'm hoping for a better practice solution. </p>
  
  <p>Also that won't solve this routes <code>/api</code> problem with the wildcard <code>'/*'</code></p>