Korzystając z serwera grunt, Jak mogę przekierować wszystkie żądania do głównego adresu url?

Question

Korzystając z serwera grunt, Jak mogę przekierować wszystkie żądania do głównego adresu url?

Buduję swój pierwszy kątowy.aplikacja js i używam Yeoman.

Yeoman używa Grunt, aby umożliwić uruchomienie węzła.js połącz serwer poleceniem 'grunt server'.

Uruchamiam moją aplikację angular w trybie html5. Według angular docs, wymaga to modyfikacji serwera w celu przekierowania wszystkich żądań do katalogu głównego aplikacji (index.html), ponieważ angular apps to jednostronicowe aplikacje ajax.

"Korzystanie tryb [html5] wymaga przepisania adresu URL po stronie serwera, w zasadzie musisz przepisać wszystkie linki do punktu wejścia aplikacji(np.html) "

Problem, który próbuję rozwiązać jest szczegółowo w to pytanie.

Jak mogę zmodyfikować mój serwer grunt, aby przekierować wszystkie żądania stron do indeksu.strona html?

46

angularjs node.js gruntjs angularjs-routing yeoman

Author: Community, 2013-06-13

Source

5 answers

Dla twojej wiadomości Yeoman / Grunt ostatnio zmienił domyślny szablon dla nowych plików Grunt.

Kopiowanie domyślnej logiki middlewares zadziałało dla mnie:

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: od grunt-contrib-connect 0.9.0, wstrzykiwanie middlewares do connect serwera jest znacznie łatwiejsze:

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

24

Author: Steve Jansen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-26 02:51:53

Jest żądanie pull, które wysłałem dla tego problemu: https://github.com/yeoman/generator-angular/pull/132 , ale musisz zastosować ją ręcznie.

7

Author: L42y,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-20 10:40:15

Aby dogłębnie uprościć odpowiedź @Zuriel, oto co znalazłem do pracy w moim imieniu.

Install connect-modrewrite: npm install connect-modrewrite --save
dołącz go do pliku grunt: var rewrite = require( "connect-modrewrite" );

Zmodyfikuj opcje połączenia, aby użyć przepisania:

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

Uprościłem to tak bardzo, jak to możliwe. Ponieważ masz dostęp do zasobów pośrednich udostępnianych przez connect, łatwo jest ustawić przepisywanie na odpowiedź o pierwszym priorytecie. Wiem, że minęło trochę czasu odkąd pytanie było zapytany, ale jest to jeden z najlepszych wyników wyszukiwania google w odniesieniu do problemu.

Pomysł pochodzi z kodu źródłowego: https://github.com/gruntjs/grunt-contrib-connect/blob/master/Gruntfile.js#L126-L139
Rules string from: http://danburzo.ro/grunt/chapters/server/

5

Author: dmaloney.calu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-10 21:50:41

Próbowałem wszystkich, ale nie miałem szczęścia. Piszę aplikację angular2, a rozwiązanie pochodziło z grunt-connect pushstate. Ja tylko:

npm install grunt-connect-pushstate --save

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

I wszystko działało jak magia.

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

0

Author: Tomer Almog,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-05 19:46:16

score 52 · Accepted Answer

Najpierw, używając wiersza poleceń, przejdź do katalogu z plikiem gruntfile.

Wpisz to w CLI:

npm install --save-dev connect-modrewrite

Na górze pliku grunt umieść to:

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

Teraz kolejna część, chcesz tylko dodać modRewrite do swojego connect:

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

Oto przykład jak wygląda mój "connect" wewnątrz mojego pliku gruntowego.js. Nie musisz się martwić o mój lrSnippet i moje ssIncludes. Najważniejsze, czego potrzebujesz, to po prostu pobierz modRewrite do środka.

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