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.

lofihelsinki
  • 2,491
  • 2
  • 23
  • 35
Funny Frontend
  • 3,807
  • 11
  • 37
  • 56

11 Answers11

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:

Kyle Marimon
  • 606
  • 6
  • 11
  • 1
    This worked for me using PHP's built-in server. Don't forget to add the port. – Leo Fisher Oct 20 '16 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. –  Mar 09 '18 at 02:53
  • 1
    The poster was clearly inside a XAMPP directory... see file path in the console. – Kyle Marimon Mar 12 '18 at 16:24
  • Is there any mention of `php` in the question? – lofihelsinki Dec 09 '19 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.

Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
daGo
  • 2,584
  • 26
  • 24
  • 1
    [Here](https://github.com/BrowserSync/browser-sync/issues/37) is how to watch files other than `index.html`. – xji Jul 05 '18 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 '20 at 08: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]);
});
Daniel Tonon
  • 9,261
  • 5
  • 61
  • 64
  • 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 '17 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.

lofihelsinki
  • 2,491
  • 2
  • 23
  • 35
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

Mr.Meshack
  • 21
  • 1
  • Could you please try to clarify what you are saying? I can't understand a large part of your answer. Thank you! – Fabio says Reinstate Monica Oct 26 '16 at 21:59
  • Sorry FAbio if the large part of the answer isn't that clear. – Mr.Meshack Oct 27 '16 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 '16 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.

alfonsovc15
  • 21
  • 2
0

You need to use the proxy option instead

browser-sync start --proxy yoursite.dev
Undo
  • 25,519
  • 37
  • 106
  • 129
shane
  • 852
  • 1
  • 8
  • 16
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.

Mahmoud Zalt
  • 30,478
  • 7
  • 87
  • 83
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.

Daniel Barde
  • 2,603
  • 5
  • 31
  • 40
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);
sinrise
  • 391
  • 3
  • 21
-1

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

HiroTang
  • 1