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

[gigablox]

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

[stevenjlho]

I have a same question.

[faergeek]

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

[gigablox]

@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?

[faergeek]

@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.

[gigablox]

@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?"

[faergeek]

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.

[gigablox]

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)...

[shakyShane]

@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. :)

[HPieters]

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.

[gigablox]

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

[HPieters]

@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.

[lauterry]

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

[stevenjlho]

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

[lauterry]

Hello

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

[thasmo]

Probably depends on how the VM's network is set up. Maybe you need to forward the ports. (3000, 3001)

[brianfeister]

@gigablox did you get this working? I agree with your earlier comment that there's a communication gap on this thread and I'm encountering the same issue running browserSync inside a Vagrant box.

[blindfish3]

Works for me under Vagrant + VirtualBox: I have a browser on my host machine connecting to the page served from within the VM and it refreshes as expected. The only port forwarding set up in my Vagrantfile is the port serving the pages via browsersync; which suggests to me that if you can see the pages on your host machine browsersync should be updating; so you might need to look for other causes...

At first it wasn't working for me; but I eventually discovered that this was because of a separate issue.

[karneaud]

@faergeek could you elaborate on what you did? I'm also interested in doing something similar using the command line

[faergeek]

@karneaud now I see that if you're trying to accomplish this using just CLI, it doesn't work: browser-sync's watcher doesn't detect changes synced through Vagrant, but detects changes made through VM itself.

So, if you want to run project on guest and edit sources on host it won't work.

It looks strange, because gulp and stylus watchers are working normally.

[faergeek]

As a temporary workaround for that issue you can add usePolling: true to your bs-config.js like this:

module.exports = {
    "files": '**/*',
    "watchOptions": {
        usePolling: true
    },
    "server": true
};

And start browser-sync like this:

browser-sync start --config bs-config.js

Now watcher should work.

[shakyShane]

thanks for that @faergeek :)

[faergeek]

If I'd only noticed that exact issue earlier... :)

[Reklino]

@blindfish3 you are running browser-sync from within the vagrant box correct? If so, I would love to see your config :).

[gilesbutler]

Thanks @faergeek the polling option worked for me. Why is this temporary though? Is this a performance issue? I use Webpack in another VM and they use polling to fix this issue. My understanding is this is happening because Virtual Box only syncs files from Host to Guest and not the other way round. So when you edit files in your text editor nothing will happen but if you edit them through the command line inside your Vagrant box then Browsersync should work as normal. This is my setup that's working now, notice I'm only watching the source files rather than everything otherwise you'll get stuck in a loop.

module.exports = {
    "files": './src',
    "watchOptions": {
        usePolling: true
    },
    "server": true
};

[samsfisher]

I am still facing the same issue. Cant view the UI port or use browser-sync in host machine. i have 3000, 3001 forwarded from VM to host but no use.

[regenrek]

Maybe same problem here. Can't get this to work:
http://imgur.com/a/0BgAy

Setup: local (Mac) Machine (Browser) <--- VPN ---> Debian VM (running browsersync)

[samsfisher]

@regenrek yes, i am facing the same problem as well.

[dokker]

Thank you @faergeek! I've mentioned your solution: http://bit.ly/2dPl5eZ

[faergeek]

@dokker You're welcome :-) @samsfisher @regenrek does this ^^ solve your problem?

[regenrek]

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

1. 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
 -----------------------------------

2. 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

[samsfisher]

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 (
[email protected]) 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
.

[faergeek]

@samsfisher

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

[samsfisher]

@faergeek

1. I am not able to see browsersync UI in 3001. Also when the script polls for :3002 it encounters an error as well.
2. 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.

[samsfisher]

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

[faergeek]

@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.

[regenrek]

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

[samsfisher]

@regenrek

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

[faergeek]

@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.

[joseguillen]

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?

[boreendesign]

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.

[joshcummingsdesign]

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.

[ericjames]

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.

[mkneto300]

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".