1) npm install --save-dev connect-modrewrite
2) configure Gruntfile.js according to the "MODIFIED" sections below
Last active
February 11, 2020 09:39
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| }); |
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)
];
}
}
}
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">
worked perfectly, with backbone, thank you
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:
Worked for me! Thanks
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
@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:
For example:
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:
Make sure you have the following declared at the top of your grunt file:
Ensure you run the command, to add the 'connect-modrewrite' node module: