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 | |
| }); |
Works well, thanks!
Thanks, helped very much!
Hurra! Helped me too :D
thank you
Nice, thanks:)
Nice, works great!
@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
Friggen A. Thanks!
Thanks - It just worked great :)
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?
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
Thanks, works great!
I am using generator-angular 0.8.0
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/)!
Working great for Angus, thanks!
@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
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
Thanks for posting this!