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

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable