BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.18k stars 756 forks source link

Remote server Browser-sync using Internal Network's IP address rather that the External IP #971

Open safizn opened 8 years ago

safizn commented 8 years ago

Hi, there are closely related issues/questions regarding the use of a development remote server together with Browser-Sync, but I didn't find any real guiding answers. I will explain in detail my setup, and I'm still not sure how to get it to work or if it is possible from the first place.

Simply I'm using only one server, on Google's Gcloud "Compute Engine", a server running Linux Derbian 8. All components needed are updated. This server is used for Development and Production. Each has it's own folder, one with the main domain & the other with a subdomain - i.e. 2 virtual hosts running on apache2. So its the classic Centralized development (Why ? I have my reasons. This is the way I want it). I am intending to use Gulp with a lot of other plugins. But for now I want to test the Browser-Sync by itself.

What I did: • I already had Node.js for npm, bower, git submodules, etc. • Installed Bower-Sync globally ' sudo npm install browser-sync -g'. It works I have access to it through command line. • Command line tests - using the documentation here https://www.browsersync.io/docs/command-line/ I moved ('cd') to the desired folder where the index.html or index.php is present. And simply started Bower-Sync 'browser-sync start'. Then I tried to access the resulted IP address with ports ~ 3000. I tried different combinations 'browser-sync start --server --directory', 'browser-sync start --proxy site.com'. But nothing worked.

I realized that the given IP address by starting Bower-sync, is actually the Internal IP ! Which has no access to the outside world. How can I use the External IP instead ? like ee.eee.ee.ee:3000 Or is it possible at all ?

Linux External IP: ee.eee.ee.ee Internal IP: ii.iii.ii.ii (as an example) Google cloud gives me SSH access from the web-browser. I use Atom editor to connect and make the changes on the development files, then testing them by refreshing the development subdomain. I like how my setup is made, I don't want local VM for development or install anything like apache locally. I'm using different computers, keeping all development centralized prevents headaches, as I am the only developer on the web app.

Help me get this working, thank you.

safizn commented 8 years ago

This is what I get after starting Bower-sync. Navigating to the IP address (which is the Internal IP) doesn't open, it keeps looping till it fails. capture

safizn commented 8 years ago

Guys, any help here ?

voipme2 commented 8 years ago

I'm running into this problem too. I've tried setting the host to 0.0.0.0, with no luck.

hif2k1 commented 7 years ago

// Override host detection if you know the correct IP to use host: "192.168.1.1"

Patabugen commented 6 years ago

It would be really handy if I could specify an environment variable to tell BrowserSync what the external IP is - that way I don't need to keep my environment specific config (i.e. the test IP) in my source control.

e.g. BROWSERSYNC_DEFAULT_HOST=192.168.1.52

Then instead of BS "picking one and hoping for the best" (as explained in the docs) - we can tell it which to use.

Patabugen commented 6 years ago

For anyone else using Gulp here's a way to do this in your gulpfile.js

browserSync.init({
    host: process.env.BROWSERSYNC_HOST || undefined,
}

So it'll look for an environment variable called BROWSERSYNC_HOST and return that, or return undefined (and let BS do it's own thing).

I've only tested this on Windows.