Access site from local network with Bud/BrowserSync


In past projects I used BrowserSync to access my project on my phone. Now BrowserSync isn’t included anymore in the project I add it myself (with help of others on this forum).

My bud config file looks like this;

 * @typedef {import('@roots/bud').Bud} bud
 * @param {bud} app

const bs = require('browser-sync-webpack-plugin')

module.exports = async (app) => {
     * Application entrypoints
     * Paths are relative to your resources directory
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],

     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.

     * These files will trigger a full page reload
     * when modified.
    .watch('resources/views/**/*', 'app/**/*')

     * Target URL to be proxied by the dev server.
     * This should be the URL you use to visit your local development server.

     * Development URL to be used in the browser.

    * Target URL to be proxied by the dev server.
    * This is your local dev server.
      name: 'browser-sync-webpack-plugin',
      make: () => new bs({proxy: ''}),

My package json look like this;

  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  "engines": {
    "node": ">=16.0.0"
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  "devDependencies": {
    "@alpinejs/collapse": "^3.10.2",
    "@roots/bud": "5.8.7",
    "@roots/bud-postcss": "^5.8.7",
    "@roots/bud-sass": "^5.8.7",
    "@roots/bud-tailwindcss": "5.8.7",
    "@roots/sage": "5.8.7",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/typography": "^0.5.2",
    "alpinejs": "^3.10.2",
    "browser-sync": "^2.27.10",
    "browser-sync-webpack-plugin": "^2.3.0",
    "flickity": "^3.0.0"

When I use the yarn dev command this is the result;

mode  development  hash     d79ff4d3843ece3c84b6  
bud   5.8.7        webpack  5.72.1                
node  18.3.0                                      

server url:       
proxy url:  

webpack built bud d79ff4d3843ece3c84b6 in 3365ms
[Browsersync] Proxying:
[Browsersync] Access URLs:
       Local: http://localhost:3001
    **External: http://false:3001**
          UI: http://localhost:3002
 UI External: http://localhost:3002

My external url is broken now, and I can’t figure out why. So it’s not possible for me now to access the website on my phone.

Any suggestions :)?

FWIW, BrowserSync is not a requirement to access a Sage/Bud dev session from another machine on your same network. You just have to visit the network IP of the machine that’s hosting the session, such as

1 Like

Thanks Ben! I didn’t know this. I also checked the GitHub page of BrowserSync and it seems it has issues, so this might not be related to Sage.

Thanks for the help :slight_smile: