BrowserSync Cannot GET /
Answer :
Using BrowserSync as a server only works if you're running a static site, so PHP won't work here.
Looks like you're using XAMPP to serve your site, you can use BrowserSync to proxy your localhost.
Example:
browser-sync start --proxy localhost/yoursite
References:
- http://www.browsersync.io/docs/command-line/#proxy-example
- https://github.com/BrowserSync/browser-sync/issues/5
Because it works only with index.html by default, for example:
linux@linux-desktop:~/Templates/browsersync-project$ ls brow.html css linux@linux-desktop:~/Templates/browsersync-project$ browser-sync start --server --files '.'
Expected result:
Cannot GET/
In order to see your static web-page in the web-browser instead of that annoying message you have to rename a file brow.html
to index.html
. This will solve Cannot GET/
problem.
P.S. Where you are installing a browser-sync doesn’t matter. Just type npm install -g browser-sync
whatever directory you are in, and after double check browser-sync --version
.
This article was extreamly helpful for getting browsersync to work with a PHP site.
These are what the configurations for both Grunt and Gulp should look like (taken from the article)
Grunt
You will need the grunt-php plugin
grunt.loadNpmTasks('grunt-browser-sync'); grunt.loadNpmTasks('grunt-php'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.initConfig({ watch: { php: { files: ['app/**/*.php'] } }, browserSync: { dev: { bsFiles: { src: 'app/**/*.php' }, options: { proxy: '127.0.0.1:8010', //our PHP server port: 8080, // our new port open: true, watchTask: true } } }, php: { dev: { options: { port: 8010, base: 'path/to/root/folder' } } } }); grunt.registerTask('default', ['php', 'browserSync', 'watch']);
Gulp
You will need the gulp-connect-php plugin
// Gulp 3.8 code... differs in 4.0 var gulp = require('gulp'), php = require('gulp-connect-php'), browserSync = require('browser-sync'); var reload = browserSync.reload; gulp.task('php', function() { php.server({ base: 'path/to/root/folder', port: 8010, keepalive: true}); }); gulp.task('browser-sync',['php'], function() { browserSync({ proxy: '127.0.0.1:8010', port: 8080, open: true, notify: false }); }); gulp.task('default', ['browser-sync'], function () { gulp.watch(['build/*.php'], [reload]); });
Comments
Post a Comment