Bud with Laravel Valet - Mobile issue

bud
, ,
1

Hi there,

I am using Bud 5.7.7 and Sage 10.1.6 (with Bedrock) and I am not able to test our project on a mobile device (in the same LAN). I can reach the address (eg. https://192.168.100.100:3000) but I can’t see any CSS style.

I am running Laravel Valet and this is my bud.config.js

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      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.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('index.php' ,'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.
     */
    .proxy(app.env.get('WP_HOME'))

    /**
     * Development URL to be used in the browser.
     */
    .serve( {
      host: app.env.get('ENC_DEVELOPMENT_DOMAIN'),
      cert: app.env.get('ENC_DEVELOPMENT_SSL_CRT'),
      key: app.env.get('ENC_DEVELOPMENT_SSL_KEY'),
    });
};

My constants are:

WP_HOME='https://project.test'
ENC_DEVELOPMENT_DOMAIN='project.test'
ENC_DEVELOPMENT_SSL_CRT='/Users/username/.config/valet/Certificates/project.test.crt'
ENC_DEVELOPMENT_SSL_KEY='/Users/username/.config/valet/Certificates/project.test.key'

https://project.test:3000 is running fine, also the watch task is running without any problem. Anyway, if I try to reach the project on my mobile device (https://192.168.100.100:3000), I can’t see any of the CSS styles. And it also seems the watch is not running

My I ask for any tips?

Thank you

2

I suppose I found a solution (yours solution): Access site from local network with Bud - #5 by schilke-ts

Sorry for this duplication.

For those looking for the same issue, I paste our updated bud.config.js

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

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

module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      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.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('index.php' ,'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.
     */
    .proxy(app.env.get('WP_HOME'))

    .use({
      name: 'browser-sync-webpack-plugin',
      make: () => new bs({proxy: app.env.get('WP_HOME')}),
    })

    /**
     * Development URL to be used in the browser.
     */
    .serve( {
      host: app.env.get('ENC_DEVELOPMENT_DOMAIN'),
      cert: app.env.get('ENC_DEVELOPMENT_SSL_CRT'),
      key: app.env.get('ENC_DEVELOPMENT_SSL_KEY'),
    });
};
3 Likes
3

I was having LOTS of trouble setting up bud, but this post saved me lots of time. The explanation should be in the docs.
Thanks a lot!

1 Like
4

We’re always happy to review PRs to add information to the docs: Pull requests · roots/docs · GitHub

1 Like
5

Yeah! I will definitely add it to the docs then! Thanks for your amazing work with the documentation btw.