tushariscoolster
11/25/2015 - 7:35 AM

Support html5 pushState (or angular.js html5mode) in a yeoman (grunt-contrib-connect) application.

Support html5 pushState (or angular.js html5mode) in a yeoman (grunt-contrib-connect) application.

1) npm install --save-dev connect-modrewrite
2) configure Gruntfile.js according to the "MODIFIED" sections below
module.exports = function (grunt) {
  // show elapsed time at the end
  require('time-grunt')(grunt);
  // load all grunt tasks
  require('load-grunt-tasks')(grunt);
  
  //MODIFIED: add require for connect-modewrite
  var modRewrite = require('connect-modrewrite');

  grunt.initConfig({
    
    //omitted, normal configuration, depends on your template
    
    connect: {
      options: {
        port: 9000,
        livereload: 35729,
        // change this to '0.0.0.0' to access the server from outside
        hostname: 'localhost'
      },
      livereload: {
        options: {
          open: true,
          base: [
            '.tmp',
            '<%= yeoman.app %>'
          ],
          // MODIFIED: Add this middleware configuration
          middleware: function(connect, options) {
            var middlewares = [];

            middlewares.push(modRewrite(['^[^\\.]*$ /index.html [L]'])); //Matches everything that does not contain a '.' (period)
            options.base.forEach(function(base) {
              middlewares.push(connect.static(base));
            });
            return middlewares;
          }
        }
      }
    }
    //Omitted, normal configuration
  });