En utilisant le serveur grunt, comment puis-je redirect toutes les requêtes vers l’URL racine?

Je construis ma première application Angular.js et j’utilise Yeoman .

Yeoman utilise Grunt pour vous permettre d’exécuter un serveur de connexion node.js avec la commande ‘grunt server’.

Je lance mon application angular en mode html5. Selon les documents angulars, cela nécessite une modification du serveur pour redirect toutes les requêtes vers la racine de l’application (index.html), car les applications angulars sont des applications ajax d’une seule page.

“L’utilisation du mode [html5] nécessite la réécriture d’URL côté serveur. En gros, vous devez réécrire tous vos liens vers le point d’entrée de votre application (par exemple, index.html)”
Composants AngularJS: les liaisons sont indéfinies dans le contrôleur
Comment obtenir l’article précédent dans ng-repeat?
Comparer deux valeurs d’entrée dans une validation de formulaire avec AngularJS
Comment télécharger un fichier avec AngularJS et appeler l’API MVC?
Angularjs – $ rootScope dans la fonction de lien directif

Le problème que j’essaie de résoudre est détaillé dans cette question.

Comment modifier mon serveur grunt pour redirect toutes les demandes de page vers la page index.html?

Tout d’abord, en utilisant votre ligne de commande, accédez à votre répertoire avec votre gruntfile.

Tapez ceci dans la CLI:

npm install --save-dev connect-modrewrite

En haut de votre dossier, mettez ceci:

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

Maintenant, la partie suivante, vous voulez seulement append modRewrite dans votre connexion:

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

Voici un exemple de ce à quoi mon “connect” ressemble à l’intérieur de mon Gruntfile.js. Vous n’avez pas à vous soucier de mon lrSnippet et de mes ssIncludes. La principale chose dont vous avez besoin est de simplement insérer le modRewrite.

  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) ]; } } } },

FYI Yeoman / Grunt a récemment modifié le modèle par défaut pour les nouveaux Gruntfiles.

La copie de la logique de middlewares par défaut a fonctionné pour moi:

 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; }

MISE À JOUR: À partir de grunt-consortingb-connect 0.9.0, il est beaucoup plus facile d’injecter des middlewares dans le serveur de connexion:

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

Il y a une demande d’extraction que j’ai envoyée pour ce problème: https://github.com/yeoman/generator-angular/pull/132 , mais vous devez l’appliquer manuellement.

Pour simplifier la réponse de @ Zuriel, voici ce que j’ai trouvé pour travailler en mon nom.

Installez connect-modrewrite: npm install connect-modrewrite --save
Incluez-le dans votre fichier grunt: var rewrite = require( "connect-modrewrite" );

Modifiez vos options de connexion pour utiliser la réécriture:

 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" } } }

Cela simplifié autant que possible. Comme vous avez access aux middlewares fournis par connect, il est facile de définir la réécriture sur la première réponse prioritaire. Je sais que cela fait un moment que la question a été posée, mais c’est l’un des meilleurs résultats de Google Search concernant le problème.

L’idée est venue du code source: https://github.com/gruntjs/grunt-consortingb-connect/blob/master/Gruntfile.js#L126-L139
Chaîne de règles de: http://danburzo.ro/grunt/chapters/server/

J’ai tout essayé, mais je n’ai pas eu de chance. J’écris une application angular2 et la solution provient de pushstate grunt-connect. Tout ce que j’ai fait était:

 npm install grunt-connect-pushstate --save

et dans le fichier grunt:

 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) ]; }

et tout a fonctionné comme par magie.

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