Can BrowserSync live reload hosts browser if executed through guest VM?

I have an Ubuntu 14.04 host and a Vagrant Ubuntu 14.04 Server Virtual Machine via Virtual Box.

I want to keep development tools like NPM's on the VM. One of those tools are BrowserSync.

Can BrowserSync live reload a hosts browser if it's being executed through the guest?

http://stackoverflow.com/questions/26683099/can-browsersync-live-reload-hosts-browser-if-its-being-executed-through-guest-v

I have a same question.

It can even reload your browser if it's on a real remote server, so should work for VM too.

@faergeek

@faergeek using the scenario I've described above I've been unable to get this to work.

Is there perhaps a specific configuration I need?

@gigablox

@gigablox when I installed it on remote server it didn't require any specific configuration.

What exactly doesn't work for you? Does it create server for you which you can access through the browser or not?

Please provide some info about your setup like described here https://github.com/shakyShane/browser-sync/blob/master/CONTRIBUTING.md#tips.
Including Vagrant config would be cool too.

@faergeek

@faergeek Confused about what additional details you would like me to provide. I thought my description of my setup was pretty thorough but I'll try again.

I am using a virtual machine that executes browser sync.

When I run browser sync on this virtual machine I am not trying to live reload the guest browser, but rather, the browser of the host machine that contains the guest machine.

"Can BrowserSync live reload a hosts browser if it's being executed through the guest?"

I used BrowserSync for testing in IE which runs in Virtual Box. I even used BrowserSync running on a remote server to connect through SFTP and edit files live.

I didn't use it with virtual machine as a remote server but I think that may be virtual machine configuration is not working. So would be cool if you can provide additional details about your setup (may be some isolated config, using just BrowserSync and Vagrant) to try it out by myself and figure out what doesn't work for you.

I still think there is a communication gap here.

Imagine you just spun up a local VM on your development computer. That VM is running browser sync.

I want browser sync to act on the hosts browser (the computer from which the VM is running)...

@gigablox

@gigablox - How about providing a simple vagrant setup for us as @faergeek suggested. That way we all know what we're talking about.

Unfortunately "Imagine you just spun up a local VM on your development computer" is not really enough info for us to go on, even if the whole thing seems extremely simple to you. :)

To answer your original question: yes, browserSync can live reload hosts browser if executed through a guest VM.

I am running an Ubuntu 14.04 guest (VMWare fusion) on my host (Mac OS X) machine. All my (web) development is done on the Ubuntu guest and the guest is also running BrowserSync (using gulp). I use my host browser to visit the browser-sync served project.

I "had" the same problem last night, hence I found this thread. But was able to solve it this morning simply by altering my (gulp) configuration. I originally ran both my watch task and BrowserSync task separately, however once combined BrowserSync on my host browser was working.

@HPieters

@HPieters Awesome, do you mind sharing the important parts of that config?

@gigablox

@gigablox my config can be found here https://gist.github.com/HPieters/88dd18e99c8925b2cabb. Hopefully it is useful, as far as I can see it is the default way of setting up BrowserSync.

Hello

I think I have the same issue. I launched Brwosersync in my VM and I want to test my app in my host machine.

This is my grunt task configuration for browsersync :

bsFiles: {
            src : [
                '<%= conf.app %>/styles/*.css',
                '<%= conf.app %>/scripts/**/*.js',
                '!<%= conf.app %>/scripts/vendor/*.js'
            ]
        },
        options: {
            watchTask: true,
            startPath: '/compte/login',
            server: {
                baseDir: '<%= conf.app %>',
                middleware: [proxy(devProxyOptions), rewrites]
            }
        }

Wen launching Browsersync, I have the following input in my console :

[BS] Access URLs:
 -----------------------------------------
 Local: http://localhost:3000/compte/login
 -----------------------------------------
    UI: http://localhost:3001
 -----------------------------------------
[BS] Serving files from: app
[BS] Watching files...

My question is :

Why is the host 'localhost' ???

The result is that I cannot open my app in my host machine since I don't know what URL to open.

Best regards

I think you should find you VM IP address，then open The IP address in you host browser, such as
192.168.1.2:3001

Hello

I've tried but therer is no syncing and no live reload :(

@faergeek

@faergeek
I had multiple issues which i could solve now.

The first issue was that port :3000 didn't open in browser. This was a mistake of mine,
a configuration error.

Now http://wpdev2:3000 worked via VPN/Local Network to the VM:

[BS] Proxying: http://wpdev2.dev
[BS] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://10.0.0.116:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.0.116:3001
 -----------------------------------

The second issue was, that remote debug crashed all the time I wanted to enable remote debug.
Like This one here: http://imgur.com/a/0BgAy or like this issue Browsersync ui crash UI#38 . Maybe it's incompatible with HMR or something I don't know.

Since I used webpack2 with browsersync (or at least tried it) and it was pretty slow I changed back to webpack 1 and browsersync works fine now and even better and faster then before.
https://discourse.roots.io/t/webpack2-performances/

And the polling options didn't help me.

End of the story.

Regards

@dokker

Hello

In my case the watchOptions is helping me to refresh webpack build whenever
there is code change. However browsersync is not working i.e. The browser
doesn't refresh the changes.

On October 14, 2016 at 9:39:41 AM, Sergey Slipchenko (
notifications@github.com) wrote:

@dokker https://github.com/dokker You're welcome :-) @samsfisher
https://github.com/samsfisher @regenrek https://github.com/regenrek
does this ^^ solve your problem?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#318 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB2yu1J4tkFajSSmvrghFW6MClRO1Iyoks5qz5QtgaJpZM4C1oGM
.

@samsfisher

@samsfisher

What kind of refresh does not work? CSS or page reload? Or something else?
How do you use webpack and browser-sync together? Proxying one to the other or adding script on the page?

@faergeek

@faergeek

I am not able to see browsersync UI in 3001. Also when the script polls for :3002 it encounters an error as well.
I am initializing browsersync in express.js using the code below

express.js

if (env === 'development') {
        const webpackDevMiddleware = require('webpack-dev-middleware');
        const stripAnsi = require('strip-ansi');
        const webpack = require('webpack');
        const makeWebpackConfig = require('../../webpack.make');
        const webpackConfig = makeWebpackConfig({
            DEV: true
        });
        const compiler = webpack(webpackConfig);
        const browserSync = require('browser-sync').create();

        /**
         * Run Browsersync and use middleware for Hot Module Replacement
         */
        browserSync.init({
            open: false,
            logFileChanges: false,
            host: 'meanstack.dev', // CHANGED
            proxy: {
                target: 'localhost:' + config.port,
                ws: true
            },
            logLevel: "debug",
            open: false, // ADDED
            ws: true,
            watchTask: true, // ADDED
            middleware: [
                webpackDevMiddleware(compiler, {
                    noInfo: false,
                    watchOptions: { // ADDED THIS POLL SPECIFIC TO VM SHARING
                        poll: true
                    },
                    stats: {
                        colors: true,
                        timings: true,
                        chunks: false
                    }
                })
            ],
            // socket: {
            // domain: 'localhost:3000'
            // },
            port: config.browserSyncPort,
            plugins: ['bs-fullscreen-message']
        });

        /**
         * Reload all devices when bundle is complete
         * or send a fullscreen error message to the browser instead
         */
        compiler.plugin('done', function(stats) {
            console.log('webpack done hook');
            if (stats.hasErrors() || stats.hasWarnings()) {
                return browserSync.sockets.emit('fullscreen:message', {
                    title: 'Webpack Error:',
                    body: stripAnsi(stats.toString()),
                    timeout: 100000
                });
            }
            browserSync.reload();
        });
    }

I can see that browserysnc is initializing but its not working through VM. Also my ports are open from 3000 to 3002.

@faergeek

@faergeek to add the port forward in vagrant is configured as well

@samsfisher

@samsfisher You've added watchOptions to webpack middleware options and not in browser-sync. Plus I'm not sure why, but console says that UI is running on port 3002, probably something else is running on port 3001. Browser-sync searches for first free port in such cases.

@samfisher

@samfisher proxying should be meanstack.dev:3000 i think. Thats the problem

@regenrek

@regenrek

Tried that as well. Fyi..i am using generator angular fullstack build
https://github.com/angular-fullstack/generator-angular-fullstack

@samsfisher

@samsfisher what should browser-sync do for you? Reload css? Sync events? I think it would be better to run browser-sync and webpack separately and just include browser-sync script onto the page (not running browser-sync's web server). Proxying is always problematic.

I'm running an issue where browserSync fails to open the browser. This only started happening when I changed my synced folder from being a symlink to being a mounted with config.vm.synced_folder. I simply added open: false to by browserSync.init() and it worked. However, I'd still like to open the browser automatically... any thoughts?

Just in case anyone has a similar issue here is how I set up browser-sync (it was for Drupal 8 with Radix).

First I opened up the necessary ports by going to the settings -> network -> adaptor 1 (attached to NAT) -> port forwarding and open up the necessary ports, in my case 3002, 3003

Second I set up my hosts file on my guest machine (windows) to point to the IP of the VM (in my case 192.168.0.41 and the host name samplesite.devserver.com)

What I had failed to do when I had the issue is also set this up on the guest machine (Debian) by entering it into the hosts file in /etc/

After this I ran gulp (setting the proxy to samplesite.devserver.com) and it all worked fine.

"proxy" : "bizhive.devserver.com",

Hope it helps someone.

@faergeek

I put together a simple example that uses gulp, Scotch Box, and the solution from @faergeek. It adds usePolling to get Browsersync to work inside Vagrant. All it does is compile Sass, but it illustrates how this works. It uses nfs and I haven't tested it on Windows, but this should get you going.

Forwarding browser-sync ports in Vagrantfile is the only solution for me, and had to manually open localhost:3000.

For file watching, I have separate independent gulp tasks that are passed into the browser-sync task and watched.

Hi!

I am new to Vagrant and Gulp! I followed the instructions to setup the Homestead box, Gulp and Browser Sync. I did not have to do a quite complicated configuration to make it work. However, I realized that I could make it work just by attaching the :3000, at the end of the URL of my local website. Like "homestead.app:3000".

That worked to me!

I was getting the error "Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)" after running the "gulp" command from within my VM. Then, I open the browser, Chrome, in my host and pointer the address to "homestead.app:3000".

Fix watch when Gulp watching from within your Vagrant

Navigation Menu

Repository navigation

Can BrowserSync live reload hosts browser if executed through guest VM? #318

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Can BrowserSync live reload hosts browser if executed through guest VM? #318

Description

Activity

stevenjlho commented on Nov 19, 2014

faergeek commented on Nov 20, 2014

gigablox commented on Nov 30, 2014

faergeek commented on Dec 1, 2014

gigablox commented on Dec 11, 2014

faergeek commented on Dec 11, 2014

gigablox commented on Dec 11, 2014

shakyShane commented on Dec 13, 2014

HPieters commented on Jan 4, 2015

gigablox commented on Jan 4, 2015

HPieters commented on Jan 4, 2015

lauterry commented on Feb 11, 2015

stevenjlho commented on Feb 13, 2015

lauterry commented on Feb 13, 2015

15 remaining items

regenrek commented on Oct 14, 2016

samsfisher commented on Oct 14, 2016

faergeek commented on Oct 14, 2016

samsfisher commented on Oct 14, 2016

samsfisher commented on Oct 14, 2016

faergeek commented on Oct 14, 2016

regenrek commented on Oct 14, 2016

samsfisher commented on Oct 14, 2016

faergeek commented on Oct 15, 2016

joseguillen commented on Jan 3, 2017

boreendesign commented on Jan 19, 2017

joshcummingsdesign commented on Mar 28, 2017

ericjames commented on Apr 14, 2017

mkneto300 commented on Jun 14, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions