Skip to content

Instantly share code, notes, and snippets.

@nnarhinen
Last active February 11, 2020 09:39
Show Gist options
  • Save nnarhinen/7719157 to your computer and use it in GitHub Desktop.
Save nnarhinen/7719157 to your computer and use it in GitHub Desktop.
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
});
@icd2k3
Copy link

icd2k3 commented Dec 9, 2013

Thanks for posting this!

@hitchcockwill
Copy link

Works well, thanks!

@chyngyz
Copy link

chyngyz commented Feb 16, 2014

Thanks, helped very much!

@smedegaard
Copy link

Hurra! Helped me too :D

@seocahill
Copy link

thank you

@jan-swiecki
Copy link

Nice, thanks:)

@frejnorling
Copy link

Nice, works great!

@mcranston18
Copy link

@nnarhinen thanks for posting this! I was hoping you could help me with something.

I can go one-level deep using this code: myapp.com/products

But I cannot go two-levels deep using this code: myapp.com/products/name

Any help would be appreciated

@coreyrothwell
Copy link

Friggen A. Thanks!

@yugaljindle
Copy link

Thanks - It just worked great :)

@crebuh
Copy link

crebuh commented Apr 29, 2014

@nnarhinen

very useful! but I've got the same problem as @mcranston18.

I cannot reload routes which are on level-two of the hierarchy like site.com/one/two

is there a solution for this?

@crebuh
Copy link

crebuh commented Apr 29, 2014

@ALL

I figured out how to make also multi-level routes work.

I added the following base-tag to the index.html file

<script type="text/javascript">document.write("");</script>

hope this helps

@stepanic
Copy link

stepanic commented May 8, 2014

Thanks, works great!

I am using generator-angular 0.8.0

@heartcode
Copy link

Works like a charm with Yeoman using angular-require generator, many thanks for the solution (and for the poster of the original article, that made me find this working solution (http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/)!

@nickjanssen
Copy link

Working great for Angus, thanks!

@dennislo
Copy link

dennislo commented Oct 3, 2014

@crebuh Thank you for the tip regarding base tag, as I couldn't get two or more level url hierarchy working as well. I had to add:

  <base href="/" target="_blank">

For example:

<!doctype html>
<html>
<head>
  <title></title>
  <base href="/" target="_blank">

NOTE: For the latest angular-generator i.e generator-angular 0.9.8, I also needed to follow the steps at http://stackoverflow.com/questions/24283653/angularjs-html5mode-using-grunt-connect-grunt-0-4-5

For example:

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');

Ensure you run the command, to add the 'connect-modrewrite' node module:

  npm install connect-modrewrite --save-dev

@laughin
Copy link

laughin commented Oct 15, 2014

Thanks It worked for me. I'm using grunt-connect-proxy, You must write modRewrite in the following proxy

livereload: {

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

}

@mmizutani
Copy link

In my case, I had to put the following tag in the header of index.html:

<base href="/ui/" target="_blank">

to make the AngularJS' html5 mode work correctly. That is,

<!doctype html>
<html>
<head>
  <title></title>
  <base href="/ui/" target="_blank">

instead of

<!doctype html>
<html>
<head>
  <title></title>
  <base href="/" target="_blank">

@Jemoli
Copy link

Jemoli commented Jun 8, 2015

worked perfectly, with backbone, thank you

@cerdobot
Copy link

I used this solution, and everything seems allrigth but... only when a run grunt serve, when i want to make a dist all the files included css and js... shows a undefined in the attachment, the path and files are fine, in the stablished path with the code neccesary
example:

undefined I am using Yeoman why happen this?, when a disable the solution the dist is ok

@anuragd7
Copy link

Worked for me! Thanks

@boobalanp
Copy link

I used html5 history for router. While refresh the page i am getting 404 error. how to resolve this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment