gruntjs - AngularJS html5Mode using Grunt connect. grunt 0.4.5

Question

I recently switched over to grunt 0.4.5 and it changed how connect works.

I previously used connect-modrewrite and it worked pretty well (had some issues with urls generated by /:parameter).

Here is the old version that worked with grunt 0.4.1 from generator-angular 0.8.0 with the middleware part modded by me to use html5mode.

connect: {
    options: {
        port: 9000,
        hostname: '*IP HERE*',
        livereload: 35729,
        middleware: function (connect, options) {
            var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
            return [require('connect-modrewrite')(['!(\..+)$ / [L]'])].concat(
                optBase.map(function(path){ return connect.static(path); })
            );
        }
    },
    livereload: {
        options: {
            open: true,
            base: [
                '.tmp',
                '<%= yeoman.app %>'
            ]
        }
    },

Here is the new version from generator-angular 0.9.0-1

connect: {
    options: {
        port: 9000,
        hostname: '*IP HERE*',
        livereload: 35729
    },
    livereload: {
        options: {
            open: true,
            middleware: function (connect) {
                return [
                    connect.static('.tmp'),
                    connect().use(
                        '/bower_components',
                        connect.static('./bower_components')
                    ),
                    connect.static(appConfig.app)
                ];
            }
        }
    },

How can I change this to use mod-rewrite or any other method to achieve html5mode?

I tried using the method provided here: https://gist.github.com/nnarhinen/7719157 I combined it to create the following:

middleware: function (connect) {
    return [
        connect.static(modRewrite(['^[^\.]*$ /index.html [L]'])),
        connect.static('.tmp'),
        connect().use(
            '/bower_components',
            connect.static('./bower_components')
        ),
        connect.static(appConfig.app)
    ];
}

This allows me to view the normal view, but the modRewrite part does not seem to do what it needs to in order to get to any other view via url.

Answer 1

If anyone else stumbles across this here is the fix:

(the only line added was the modRewrite line)

livereload: {
    options: {
        open: true,
        middleware: function (connect) {
            return [
                modRewrite(['^[^\.]*$ /index.html [L]']),
                connect.static('.tmp'),
                connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                ),
                connect.static(appConfig.app)
            ];
        }
    }
},

Make sure you have the following declared at the top of your grunt file:

var modRewrite = require('connect-modrewrite');