html5 pushstate mode not working

[VinSpee]

Hi!

I'm using gulp-webserver with react.js and rackt/react-router, and I'm having issues with your html5 pushstate config.

I'm currently passing fallback: index.html into the webserver task's config, but deep linking (navigating to the link manually by typing it in) doesn't work and throws this error:

Uncaught SyntaxError: Unexpected token < 

to clarify, navigating to http://localhost:1337/ works fine, but navigating to http://localhost:1337/foos/1 does not work when manually typed, but does work when following a link.

Any ideas?

[ALF-er]

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

[mickeyvip]

Same here: fallback does not work at all

[mickeyvip]

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

[vjtyagi]

Same issue here

[alexandrethsilva]

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

[vjtyagi]

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

[alexandrethsilva]

@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.

[alexandrethsilva]

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.

[mickeyvip]

@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" />

[siawyoung]

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