html5 pushstate mode not working about gulp-webserver HOT 10 OPEN

Faced the same problem. Maybe there is some other options which must be enabled?

from gulp-webserver.

Same here: fallback does not work at all

from gulp-webserver.

In my case the fallback was not set correctly. It does work.

from gulp-webserver.

Same issue here

from gulp-webserver.

@mickeyvip Can you post the correct configuration to the fallback option, so that we can have a look and check on our side?

from gulp-webserver.

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();
var del = require('del');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var runSequence = require('run-sequence');

var env = 'dev';

gulp.task('clean:dev', function() {
return del(['.tmp']);
});

gulp.task('clean:dist', function() {
return del(['dist']);
});

gulp.task('scripts', function() {
var bundler = browserify('./app/scripts/app.js', {
extensions: ['.jsx'],
debug: env == 'dev'
}).transform('reactify');

return bundler.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('.tmp/scripts'));
});

gulp.task('imagemin', function() {
return gulp.src('app/images/*')
.pipe($.imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}]
}))
.pipe(gulp.dest('dist/images'));
});

gulp.task('copy', function() {
return gulp.src(['app/.txt', 'app/.ico'])
.pipe(gulp.dest('dist'));
})

gulp.task('bundle', function () {
var assets = $.useref.assets({searchPath: '{.tmp,app}'});
var jsFilter = $.filter(['/*.js']);
var cssFilter = $.filter(['/.css']);
var htmlFilter = $.filter(['.html']);

return gulp.src('app/*.html')
.pipe(assets)
.pipe(assets.restore())
.pipe($.useref())
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.autoprefixer({
browsers: ['last 5 versions']
}))
.pipe($.minifyCss())
.pipe(cssFilter.restore())
.pipe(htmlFilter)
.pipe($.htmlmin({collapseWhitespace: true}))
.pipe(htmlFilter.restore())
.pipe($.revAll({ ignore: [/^/favicon.ico$/g, '.html'] }))
.pipe($.revReplace())
.pipe(gulp.dest('dist'))
.pipe($.size());
});

gulp.task('webserver', function() {
return gulp.src(['.tmp', 'app'])
.pipe($.webserver({
host: 'localhost', //change to 'localhost' to disable outside connections
livereload: true,
open: false,
fallback: 'index.html'
}));
});

gulp.task('serve', function() {
runSequence('clean:dev', ['scripts'], 'webserver');

gulp.watch('app/*.html');

gulp.watch('app/scripts/*/.js', ['scripts']);

gulp.watch('app/scripts/*/.jsx', ['scripts']);

});

gulp.task('build', function() {
env = 'prod';

runSequence(['clean:dev', 'clean:dist'],
['scripts', 'imagemin', 'copy'],
'bundle');
});

from gulp-webserver.

@vjunloc I was referring to @mickeyvip 's config, since I currently have the same issue and can't help much. But let's wait. maybe he sees it and posts it here.

P.S. I'd suggest you make use of markdown formatting when posting code in comments, since it helps a lot when it comes to readability.

from gulp-webserver.

hey @vjunloc I solved the problem on my side. It's not an issue with the gulp-webserver.

In my case it was related to relative and absolute paths. To be more specific, make sure your script and css references are absolute, so that it doesn't try to find them in the path you're typing in the URL.

e.g.:

You have two URLs: /settings and /settings/account. In that case, if you have your script inclusion in the fallback file being something like <script src="scripts/main.js"></script>, the server will return a 404 for it, since there's no file in /settings/scripts/main.js.

Hope that helps.

from gulp-webserver.

@alexandrethsilva , I am sorry for the late response.

Actually I don't remember what exactly was wrong. My friend explained it to me then and it made sense.

I think the problem was related to <base href="correct/path" />

from gulp-webserver.

@alexandrethsilva Thanks a lot for this. It was bugging me for the longest time.

from gulp-webserver.