Using grunt server, how can I redirect all requests to root url?

Question

I am building my first Angular.js application and I'm using Yeoman.

Yeoman uses Grunt to allow you to run a node.js connect server with the command 'grunt server'.

I'm running my angular application in html5 mode. According to the angular docs, this requires a modification of the server to redirect all requests to the root of the application (index.html), since angular apps are single page ajax applications.

"Using [html5] mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)"

The problem that I'm trying to solve is detailed in this question.

How can I modify my grunt server to redirect all page requests to the index.html page?

Pacifa

Answer 1

First, using your command line, navigate to your directory with your gruntfile.

Type this in the CLI:

npm install --save-dev connect-modrewrite

At the top of your grunt file put this:

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

Now the next part, you only want to add modRewrite into your connect:

modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),

Here is a example of what my "connect" looks like inside my Gruntfile.js. You don't need to worry about my lrSnippet and my ssIncludes. The main thing you need is to just get the modRewrite in.

        connect: {
        options: {
            port: 9000,
            // Change this to '0.0.0.0' to access the server from outside.
            hostname: '0.0.0.0',
        },
        livereload: {
            options: {
                middleware: function (connect) {
                return [
                        modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),
                        lrSnippet,
                        ssInclude(yeomanConfig.app),
                        mountFolder(connect, '.tmp'),
                        mountFolder(connect, yeomanConfig.app)
                        ];
                }
            }
        },
        test: {
            options: {
                middleware: function (connect) {
                    return [
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, 'test')
                    ];
                }
            }
        },
        dist: {
            options: {
                middleware: function (connect) {
                    return [
                    mountFolder(connect, yeomanConfig.dist)
                    ];
                }
            }
        }
    },

Sunder

The answer above about a pull request is good, but I like that @zuriel shows how to do it by hand here. – Bacchant

The accepted answer from this question worked for me. – Interview

Thank you!!! This saved my day. I have no idea why the yeoman angular generator does't help with this... – Palpitation

Answer 2

FYI Yeoman/Grunt recently changed the default template for new Gruntfiles.

Copying the default middlewares logic worked for me:

middleware: function (connect, options) {
  var middlewares = [];
  var directory = options.directory || options.base[options.base.length - 1];

  // enable Angular's HTML5 mode
  middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

  if (!Array.isArray(options.base)) {
    options.base = [options.base];
  }
  options.base.forEach(function(base) {
    // Serve static files.
    middlewares.push(connect.static(base));
  });

  // Make directory browse-able.
  middlewares.push(connect.directory(directory));

  return middlewares;
}

---

UPDATE: As of grunt-contrib-connect 0.9.0, injecting middlewares into the connect server is much easier:

module.exports = function (grunt) {
  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);
  grunt.initConfig({
    // The actual grunt server settings
    connect: {
      livereload: {
        options: {
         /* Support `$locationProvider.html5Mode(true);`
          * Requires grunt 0.9.0 or higher
          * Otherwise you will see this error:
          *   Running "connect:livereload" (connect) task
          *   Warning: Cannot call method 'push' of undefined Use --force to continue.
          */
          middleware: function(connect, options, middlewares) {
            var modRewrite = require('connect-modrewrite');

            // enable Angular's HTML5 mode
            middlewares.unshift(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

            return middlewares;
          }
        }
      }
    }
  });
}

Gagliardi

Zuriel's answer is excellent but this should be the accepted answer. Don't forget to npm install --save-dev connect-modrewrite – Gibbsite

Answer 3

There is a pull request I sent for this problem: https://github.com/yeoman/generator-angular/pull/132, but you need to apply it manually.

Youngman

is this still the case? – Centenary

Answer 4

To deeply simplify @Zuriel's answer, here's what I found to work on my behalf.

• Install connect-modrewrite: npm install connect-modrewrite --save
• Include it in your grunt file: var rewrite = require( "connect-modrewrite" );

• Modify your connect options to use the rewrite:

  connect: {  
      options: {  
          middleware: function ( connect, options, middlewares ) {
              var rules = [
                  "!\\.html|\\.js|\\.css|\\.svg|\\.jp(e?)g|\\.png|\\.gif$ /index.html"
              ];
              middlewares.unshift( rewrite( rules ) );
              return middlewares;
          }
      },
      server: {
          options: {
              port: 9000,
              base: "path/to/base"
          }
      }
  }  
  

Simplified this as much as possible. Because you have access to the middlewares provided by connect, it's easy to set the rewrite to the first priority response. I know it's been a while since the question has been asked, but this is one of the top results of google searching regarding the problem.

Idea came from source code: https://github.com/gruntjs/grunt-contrib-connect/blob/master/Gruntfile.js#L126-L139
Rules string from: http://danburzo.ro/grunt/chapters/server/

Sarene

Answer 5

I tried all of these, but had no luck. I am writing an angular2 app, and the solution came from grunt-connect pushstate. All I did was:

npm install grunt-connect-pushstate --save

and in the grunt file:

var pushState = require('grunt-connect-pushstate/lib/utils').pushState;
middleware: function (connect, options) {
  return [
    // Rewrite requests to root so they may be handled by router 
    pushState(),

    // Serve static files 
    connect.static(options.base)
  ];
}

and it all worked like magic.

https://www.npmjs.com/package/grunt-connect-pushstate

Taitaichung