BrowserSync Cannot GET /

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.

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

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