How to tell gulp-connect to open index.html regardless of the URL?
Question
I have the following gulp task:
gulp.task('connect', function() {
connect.server({
root: __dirname,
livereload: true
});
});
and the following Angular routes:
angular.module("MyApp", ["ngRoute"]).config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
controller: "DashboardCtrl",
templateUrl: "templates/dashboard.html"
})
.when("/advertiser", {
controller: "AdvertiserCtrl",
templateUrl: "templates/advertiser.html"
})
.otherwise({
redirectTo: "/"
});
});
When I visit /
all works fine (the Dashboard appears).
But, visiting /advertiser
results in "404 - Cannot GET /advertiser".
My main Angular file is index.html
, which is opened properly for /
, but not for /advertiser
.
How could I tell Gulp to open index.html
regardless of the URL?
Solution
You can use the middleware
option to use the connect-history-api-fallback
middleware. Once you've installed and required the fallback, you add it like this:
gulp.task('connect', function() {
connect.server({
root: __dirname,
livereload: true,
middleware: function(connect, opt) {
return [ historyApiFallback ];
}
});
});
OTHER TIPS
Alternatively you can use gulp-connect
own option called fallback
for that:
gulp.task('connect', function() {
connect.server({
root: 'path/',
livereload: true,
fallback: 'path/index.html'
});
});
No need for another package.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow