Using ui-router and $locationProvider.html5Mode(true); with AngularJS Yeoman Generator

Question

I'm wishing to switch from using the AngularJS ngRoute module to the ui-router module framework. My app is using the $locationProvider.html5Mode and to prevent deep linking from giving a 404 I had installed the connect-modrewrite node module ( from https://www.npmjs.org/package/connect-modrewrite) and added it to the Grunt file provided by the AngularJS Yeoman Generator, like so:

// Yeoman's Gruntfile.js

  // placed outside the module.exports function.
  var modRewrite = require('connect-modrewrite');

  ...

  // modify the server config and add our modRewrite middleware.
  livereload: {
    options: {
      middleware: function (connect) {
        return [
          modRewrite([
            '!\\.html|\\.js|\\.css|\\.png$ /index.html [L]'
          ]),
          lrSnippet,
          mountFolder(connect, '.tmp'),
          mountFolder(connect, yeomanConfig.app)
        ];
      }
    }
  }

This was great but now I have switched to using the ui-router module framework should I deep link to (for example) http://myapp.com:9000/products I get the response:

Cannot GET /products

Obviously when I go to the home/default page and click a link to http://myapp.com:9000/products everything is fine and dandy. Has anyone modified their grunt file so they can use html5mode and ui-router with the AngularJS Yeoman generator? Thanks in advance.

Answer 1

Whoa! My bad... I include the livereload in the wrong Grunt task! Problem solved...

Answer 2

I never use connect-modrewrite, I always use nginx. Occationally I need to use apache the following work for me.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.html [L]