BrowserSync Cannot GET /

Question

I only have installed NodeJS and BrowserSync with this command:

npm install -g browser-sync 

After I use this command to start the server:

C:\xampp\htdocs\browser_sync
λ browser-sync start --server
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.223:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.223:3001
 --------------------------------------
[BS] Serving files from: ./

And I get the following error: Cannot GET /

I'm confused because I want to use BrowserSync with my Laravel project.

Where should I install BrowserSync?

Thanks.

Answer 1

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

Answer 2

When answering a request for root /, browser-sync will look for index.html file by default. If it doesn't exists, an error is sent instead.

The best way to change this behaviour is to make browser-sync responde with a directory listing instead of index.html.

browser-sync start --server --directory

This way you will get a directory listing of all the files in browser-sync's root directory instead of the error.

Answer 3

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.

Answer 4

this if or grunt users, I know gulp have different settings, have your local server setup but still not working, comment out or delete this line

//server: 'http://localhost/yoursiterootfolder/'

add this line

proxy: "http://localhost/yoursiterootfolder/"

Change "yoursitefolder with actual folder your root folder not theme, template folder you are working on check out https://browsersync.io/docs/grunt for more details Enjoy

Answer 5

Review Documentation: By default, the index file of the project, for example, can be index.html, but if it has a different name you must specify it with the following flag indicated in the documentation:

--index :Specify which file should be used as the index page

In my case:

browser-sync start --index"datalayer.html"  --server --files "./*.*"

I hope I have helped you, see you.

Answer 6

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

Answer 7

My directory use "Welcome.html" instead of "index.html". So I typed http://localhost:3000/Welcome.html then it worked...

Answer 8

You need to use the proxy option instead

browser-sync start --proxy yoursite.dev

Answer 9

Make sure you are in the directory where the index.html file is. You most probably running that command from the root directory of your project and this will not run unless you specify the index path.

Answer 10

BrowserSync only loads static files by default, if you want to use it to load a php file (index.php) you have to start the php server and then connect to it with browser sync via the proxy option.

You can achieve this with the following code. NB: This code goes into your webpack.config.js file.

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var Connect = require('gulp-php-connect');

// we create a serve object which we instantiate in
// webpacks plugins scope.
var Serve = function(){
    Connect.server({
        base: './public',
        port: 9000,
        keepalive: true
    });
    // return a new instance of browser sync
    return new BrowserSyncPlugin({
        proxy: 'localhost:9000',
        port: 8080,
        files: ['public/**/*', 'public/index.php']
    });
}

Now within the plugins scope of your webpack config file you can instantiate our Serve object. NB: I'll suggest it being the last plugin you call.

plugins: [
    ...,
    new Serve()
]

I hope this was helpful.

Answer 11

I got this to work without using gulp-php-connect. It seemed redundant if BrowserSync itself provides a proxy method. I'm using Gulp 4.0alpha.3 and the latest npm. I didn't bother trying to make the es2015 stuff work so instead of 'import' and 'export' I used the more traditional 'require' and 'exports.' and gulp default task. ('export default build' is much cleaner :D) The rest is "Gulp 4". This is minimal, SCSS precompilation and CSS injection. This is a step towards a larger solution but this seemed to be a challenging bit for a lot of people, including myself, to get going: PHP/XAMPP/SCSS seems like a common setup so I'm hoping this helps some people. This works exactly like using gulp-php-connect. Here's my entire gulpfile.js:

const gulp = require('gulp');
const del = require('del');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const sourcemaps = require('gulp-sourcemaps');

const server = browserSync.create();

const paths = {
  scss: {
    src: './scss/admin.scss',
    dest: './css/'
  }
};

const clean = () => del(['dist']);

function scss() {
  return gulp.src(paths.scss.src, { sourcemaps: true })
    .pipe(sass())
    .pipe(gulp.dest(paths.scss.dest));
}

function reload(done) {
  server.reload();
  done();
}

function serve(done) {
  server.init({
    injectChanges: true,
    proxy: 'localhost:8100/',
    port: 8080,
    open: true,
    notify: false
  });
  done();
}

const watch = () => gulp.watch('./scss/**/*.scss', gulp.series(scss, reload));

const build = gulp.series(clean, scss, serve, watch);
exports.build = build;

gulp.task('default', build);