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.

Hi @ben, I’m using an updated version of sage but the fix that you provided earlier seems not to be working anymore. Do you have a suggestion?

package.json

"devDependencies": {
    "@roots/bud": "6.9.1",
    "@roots/bud-postcss": "^6.9.1",
    "@roots/bud-sass": "^6.9.1",
    "@roots/bud-tailwindcss": "6.9.1",
    "@roots/sage": "6.9.1",
    "@tailwindcss/typography": "^0.5.9",
    "alpinejs": "^3.11.1"
  },

Thanks!

Using the new options introduced in Bud v6.8.0 are the correct way to handle this now

Thanks for the answer. Would it be too much to ask for an example? When I copy and paste the settings it doesn’t work. Thanks anyway!

I’ll try to find some time later this week but I can’t promise anything

Oke, thanks anyway. I thought I only needed to add some options and it would work, too bad this feature doesn’t work out of the box anymore. Really loved it, makes developing for mobile so much faster.

It’s my understanding that you just need to add the new options and configure them — it’s not just copy/pasting from the docs, you need to actually configure them based on your setup… it would be super helpful if you could give them a real try — that’s all I plan on doing when I have the time. You didn’t even mention what you specifically tried.

I added the new options to the bud.config.js file and did try to configure them;

    .setUrl(3000)
    .setPublicUrl(`http://website.test:3000`)
    .setProxyUrl(8000)
    .setPublicProxyUrl(`http://website.test`)

or

 .proxy('http://0.0.0.0')
    .setPublicProxyUrl('http://website.test)

    .serve('http://0.0.0.0:3000')
    .setPublicUrl('http://website.test') 

Clearly I’m doing something wrong, but I find it hard to understand the documentation.

I don’t think the new options are even necessary. Earlier in this topic you showed 192.168.2.7 as your internal IP address. You should just be able to do:

  .proxy('http://example.test')
  .serve('http://192.168.2.7:3000')
  .setPublicPath('/app/themes/sage/public/')

Hi Ben, thanks this works. The only downside is that the IP address is not static, so it changes daily. In addition, several people are working on a project, so you have different IP addresses. The project is in the Git repository, so there is a good chance that the wrong or temporary IP address is being committed.

Any idea how to deal with that? In an earlier version of Sage, you didn’t have to add IP addresses manually.

Thank you very much for your effort.