Browser-sync in mobile while local development

gulp browser-sync
SimplifyJS picture SimplifyJS · Jan 12, 2016 · Viewed 10.4k times · Source

How can I view my local dev website in my phone using gulp Browser-sync? I type localhost:3000 in my phones browser but it won't load

Answer

AmitJS94 picture AmitJS94 · Jan 12, 2016

When you run gulp in your terminal you should see :

    [BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.10.81:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.10.81:3001

What it means is that your local URL is localhost at port 3000. For external users it will be the external IP [ not the UI one ]. To access from your phone you need to enter the External IP along with its port in your phone's browser.

You can view all your browser-sync settings by visiting the UI IP.

Note : For the external link to work on your phone, your phone and computer should be on the same Wi-Fi Network, only then it will work.

Related questions

Stylesheet not loaded because of MIME-type

I'm working on a website that uses gulp to compile and browser sync to keep the browser synchronised with my changes. The gulp task compiles everything properly, but on the website, I'm unable to see any style, and the console …

Read More
Node update a specific package

I want to update my Browser-sync without updating all my node packages. How can I achieve this? My current version of Browser-sync does not have the Browser-sync GUI :( ├─┬ [email protected] │ ├── [email protected]

Read More
npm install multiple package names

What does it do when I run this command: npm install --save-dev package1 package2 It is definitely not installing multiple packages, but it looks to be essential. (For example https://www.browsersync.io/docs/gulp) For me it throws following …

Read More