Access site from local network with Bud

When accessing your site through local network on your phone, the site does load correctly from your IP / port, but all resources is trying to load through localhost and not the local IP.

Couldn’t find any documentation about it, so not sure if it’s implemented yet?

Currently my proxy config looks like this:

    .proxy({
      url: 'http://<website>.test',
      replace: {
        href: true,
        window: true,
        publicPath: false,
      },
    });

Howdy! Known bug that we’re tracking over here: Bug: Cannot use yarn dev in internal lan like laravel-mix · Issue #973 · roots/bud · GitHub

I posted this in response to the github issue and I hope it helps you as well!


This is a feature of browsersync, which mix uses. bud does not use it. Someone could make an extension to support browser-sync but that’s not currently on the roadmap for this project.

But! It is pretty easy to set this up on your own with browser-sync-webpack-plugin:

Install the plugin and its dependencies

yarn add browser-sync browser-sync-webpack-plugin --dev

Add the plugin to bud

The bud.use function allows you to add webpack plugins in your bud config. just require the plugin, add your configuration and pass it as a parameter:

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

bud.use(new bs({proxy: 'http://example.com'}))

I just tested this and it works well. Browsersync will run on port 3001 because bud’s default server is already running on port 3000. Both will run at the same time without issue so you can take advantage of bud’s development server while still doing cross-device testing (or whatever your use case is).

3 Likes

Works like a charm!

Thanks for the help.

Oh, I just love you! :trophy:
Not only did this resolve the issue with not being able to access the dev server on the network but another one I’ve been almost pulling my hair out :partying_face:

YMMV but I’ve always been a fan of Browsersync for this very reason: Most of the time it just works.
No idea if my permalink and assets problem is caused by Apache or some interference by it but the fact that not many users seem to have similar problems hints there.

The only issue I’m having now is that I can’t access the Browsersync dashboard (usually located at localhost:[port+1]) but that’s just a minor thing :slight_smile:

2 Likes

I just used this solution. it did not work at first. I solved it by adding const bs = require('browser-sync-webpack-plugin'); tot he top of the bud.config.js file.

Then at the end I did this:

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

This works on my end!

2 Likes

I’m glad you found this workaround and thank you very much for sharing it!

I could duplicate your issue with the plugin registration and have issued a PR to address it

5.4.0 has been released and it includes a fix for this issue. You should be okay to use browsersync directly again (but you’re also fine to keep using the basic extension wrapper).

Worked like a charm, thanks!