Style missing on mobile

Hello,

Started a fresh project today and my styling is missing whenever I view my project on my phone (xxx.xxx.x.xx:3000). In browser (0.0.0.0:3000) everything is everything working. The setup is very basic but I’ll post it anyway;

bud.config.mjs

// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/getting-started/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://site-name.nl.test")

    /**
     * Development origin
     */
    .serve("http://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/site-name/public/");
};

package.json

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config/current"
  ],
  "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": {
    "@roots/bud": "6.3.5",
    "@roots/bud-tailwindcss": "6.3.5",
    "@roots/sage": "6.3.5"
  }
}

I’m using “roots/acorn”: “^v2.1.2”, can’t use the latest one because some WordPress plugins aren’t ready for PHP 8.0/8.1

Thanks!

Any suggestions? It would be nice to get this fixed :slight_smile:

No one? I’ve started a fresh project yesterday and right out the box with no files edited the problem shows.

Once again I’ve started a new (fresh) project and mobile styling is still missing.

Composer - Bedrock

    "php": ">=7.4",
    "composer/installers": "^2.2",
    "vlucas/phpdotenv": "^5.4",
    "oscarotero/env": "^2.1",
    "roots/acorn": "^v2.1.2",
    "roots/bedrock-autoloader": "^1.0",
    "roots/bedrock-disallow-indexing": "^2.0",
    "roots/wordpress": "6.0.2",
    "roots/wp-config": "1.0.0",
    "roots/wp-password-bcrypt": "1.1.0",

An almost untouched theme pulled from sage Github;

Bud config

// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://xxx.nl.test")

    /**
     * Development origin
     */
    .serve("http://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/xxx/public/")

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
      .settings({
        color: {
          custom: false,
          customGradient: false,
          defaultPalette: false,
          defaultGradients: false,
        },
        custom: {
          spacing: {},
          typography: {
            'font-size': {},
            'line-height': {},
          },
        },
        spacing: {
          padding: true,
          units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
        },
        typography: {
          customFontSize: false,
        },
      })
      .useTailwindColors()
      .useTailwindFontFamily()
      .useTailwindFontSize()
      .enable()
};

Package.json

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config/current"
  ],
  "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": {
    "@roots/bud": "6.4.5",
    "@roots/bud-tailwindcss": "6.4.5",
    "@roots/sage": "6.4.5"
  }
}

Styling is compiling on desktop ( http://xxx.xxx.x.x:3000 ) but not when I view the project on my mobile. CSS is not being rendered. Is anyone experiencing these problems? I’ve got this problem since august.

The problem is that the Bud dev session is serving assets from 0.0.0.0, which isn’t accessible from a device that isn’t the same one running the dev session

Adding the following to your Bud config will replace 0.0.0.0 with 192.168.2.7 so that your testing will work:

...

    app.proxy(`http://xxxxx.nl.test`, searches => [
      ...searches,
      [`0.0.0.0:3000`, `192.168.2.7:3000`]
    ])

We’re going to look into better supporting this out of the box - cc @kellymears

1 Like

Thank you so much for the help Ben, seeing my project on phone or desktop is extremely important for me. I’m happy it works once again.

I wish I could have figure it out myself, still have a lot to learn. Would be nice if this works out of the box once again, untill then this will help me :).

Any news on supporting this out of the box? Your solution is still working, but it’s a hassle to maintain the IP address. Because my IP change a lot at home, but also when I work at the office.
This file is also being commited to a repository which makes it even more a hassle.

Thanks for your hard work.

Yes, it’s currently slated for the next minor Bud release

Could it be that the last version broke your last provided solution?

When I use version ‘6.6.0’ I get this error;

Cannot read properties of undefined (reading 'make')[bud@6.6.0] [sage] › ✘  error     exiting with code 1
error Command failed with exit code 1.

So I’m not sure if the last provided solution works in this scenario.

When I use version ‘6.6.9’ there is no error, but also no assets on mobile when I’m using this fix or not;

    app.proxy("http://website.com.test", searches => [
      ...searches,
      ["0.0.0.0:3000", "192.xxx.x.xx:3000"]
    ])

Thanks for any help.