38

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.

1
  • I was having the same issue. Did you ever figure this out? I just resorted to using my Apache server. Jun 28, 2015 at 0:16

11 Answers 11

29

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:

4
  • 1
    This worked for me using PHP's built-in server. Don't forget to add the port.
    – Leo Fisher
    Oct 20, 2016 at 21:17
  • 1
    It's unclear why you mention PHP or XAMPP and how you could possibly know that this user is using those tool sets. The answer provided by @daGo below explained this issue clearly and concisely. Changing the root html file to index.html worked.
    – user3159377
    Mar 9, 2018 at 2:53
  • 1
    The poster was clearly inside a XAMPP directory... see file path in the console. Mar 12, 2018 at 16:24
  • Is there any mention of php in the question? Dec 9, 2019 at 11:28
15

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.

2
  • 1
    Here is how to watch files other than index.html.
    – xji
    Jul 5, 2018 at 17:16
  • I appreciate that CLI commands for the package got simplified: browser-sync to serve and browser-sync -w to serve and watch your project.
    – daGo
    Feb 14, 2020 at 8:12
3

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]);
});
1
  • It triggers "PHP server not started. Retrying...". I am using XAMMP on Mac. Any suggestions? I can access everything fine with traditional way of accessing site through browser.
    – Rahi
    Feb 20, 2017 at 14:36
3

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.

2

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

3
  • Could you please try to clarify what you are saying? I can't understand a large part of your answer. Thank you! Oct 26, 2016 at 21:59
  • Sorry FAbio if the large part of the answer isn't that clear.
    – Mr.Meshack
    Oct 27, 2016 at 11:23
  • 1
    If you are a grunt user, you have set up browser sync but still getting Cannot GET/ error, it means browser sync is working fine but can't communicate with your server, so all you have to do is just to change the word "server" to proxy and it will be working fine... hope am clear enough
    – Mr.Meshack
    Oct 27, 2016 at 11:29
2

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.

0

You need to use the proxy option instead

browser-sync start --proxy yoursite.dev
0

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.

0

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.

0

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);
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.