How do I use vagrant and browsersync with local domain?

Question

I use vagrant and I have it configured to update my etc/host file here's an example.

10.20.1.36  example.dev

I can then access the VM's apache server with http://example.dev/

I want to use browsersync from the command line but I haven't been able to access my site. I have browsersync installed on my mac host and in the vagrant VM. I've tried it from my mac and the VM using the following command but it doesn't work in either environment.

browser-sync start --proxy "example.dev" --files "public/*.html,public/css/*.css,public/js/*.js"

Here's what I get from the Mac

[BS] Proxying: http://example.dev
[BS] Access URLs:
 -------------------------------------
   Local: http://localhost:3000
External: http://192.168.0.10:3000
 -------------------------------------
      UI: http://localhost:3001
 UI External: http://192.168.0.10:3001
 -------------------------------------
[BS] Watching files...

And here is what happens in the VM

[BS] Proxying: http://example.dev
[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000
[BS] External URL: http://10.0.2.15:3000
[BS] Watching files...

When I run it in the mac I'm able to access the browsersync ui at http://localhost:3001/ but not my website.

I'm unsure as to where I should run it. How I should access the site in my browser. If I need to forward any ports in my VM.

Searching the web returns a lot of results but they're all about grunt or gulp and I don't use either of them.

EDIT: I added port forwarding to vagrant and then I launch browser-sync from within the vm. Everything works now at http://example.dev:3000 and http://example.dev:3001.

Here's what I added to my Vagrantfile: config.vm.network :forwarded_port, guest: 3000, host: 3000, auto_correct: true config.vm.network :forwarded_port, guest: 3001, host: 3001, auto_correct: true

Answer 1

Here's how I got it working.

I added port forwarding to vagrant and then I launch browser-sync from within the vm. Everything works now at http://example.dev:3000 and http://example.dev:3001.

Here's what I added to my Vagrantfile: config.vm.network :forwarded_port, guest: 3000, host: 3000, auto_correct: true config.vm.network :forwarded_port, guest: 3001, host: 3001, auto_correct: true

Answer 2

I know this has been answered, and I initially used @KahunaCoder's solution to get up and running, so thanks!

However, I found running my gulpfile from within Vagrant to be terribly slow! So, I thought I would post this solution in case it is helpful.

My hosts file is:

192.168.5.10    www.develop.local

And I ended up using the following in my Vagrantfile:

server_ip = "192.168.5.10"    
config.vm.network :forwarded_port, guest: 80, host: 3000, auto_correct: true

(Apache in Vagrant is running on port 80. I didn't bother forwarding port 3001 as that is only for accessing the Browsersync UI)

I now run my Gulp tasks from the project and get the following:

[Browsersync] Proxying: http://www.develop.local
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://151.101.129.69:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://151.101.129.69:3001
 -------------------------------------

Now when I open up http://localhost:3001 I see the Browsersync control center, and when I open up http://localhost:3000 in my various browsers, I see my development site and all connected browsers listed in the control center - they are therefore 'synced' with Browsersync, and can be centrally controlled and action mirrored.

The External address provided allows me to connect to my development server via other devices on the same network.

Answer 3

1.- I used box cerobox

2.- config virtual host C:\Windows\System32\drivers\etc\host on windows

192.168.33.10   exampleurl.app

3.- run vagrant up on folder project

4.- install browser-sync

npm install -g browser-sync

5.- run browse-sync

browser-sync start -p "exampleurl.app" -f "public, resources, otherfolder, namefiles, etc"

You will see this information for the connection of the devices

[BS] Proxying: http://exampleurl.app
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.77:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.77:3001
 -------------------------------------
[BS] Watching files...

6.- use this ip to conect

http://192.168.1.77:3000