Sage/Acorn/Bud `yarn run dev` not working

breyell · July 16, 2024, 8:33pm

Setting up Sage (which uses Acorn and Bud) for the first time. This seems like a Bud problem in particular so I’ve tagged it with that. Trying to get the dev process going but having some trouble.

When running yarn dev and accessing the site through http://localhost:3000/ the page loads but when I make a change to header.blade.php for example where I update the Tailwind class to make the text color change, my page doesn’t update on save. If I stop the dev server, restart it, and refresh the page - the updated color shows.

I do get an error my console that says The connection to http://localhost:3000/bud/hot was interrupted while the page was loading. but I’m not sure how to resolve it.

Here’s what I’ve done so far: Installed WP, installed Sage theme, created a database, logged into the site and switch to my Sage theme, installed Acorn, updated the proxyUrl to my local test domain (http://sage-test.test).

I’m using Laravel Herd for my local dev environment and have added add_header Access-Control-Allow-Origin *; to the Nginx config.

Let me know if I can provide more info and thanks for the help.

breyell · July 17, 2024, 9:39pm

I should also note that my page isn’t refreshing when I make the update even though I suspect it should because of .watch(['resources/views', 'app']); which is apart of the default bud.config.js settings in Sage.

MWDelaney · July 18, 2024, 2:01pm

How are you running your development environment? Is it with Trellis? Have you configured lines 36 and 37 in bud.config.js?

github.com

roots/sage/blob/f1b9646655b6b95a257d80947996628ab7de4240/bud.config.js#L36


      
          app.setPublicPath('/app/themes/sage/public/');
          
          /**
           * Development server settings
           *
           * @see {@link https://bud.js.org/reference/bud.setUrl}
           * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
           * @see {@link https://bud.js.org/reference/bud.watch}
           */
          app
            .setUrl('http://localhost:3000')
            .setProxyUrl('http://example.test')
            .watch(['resources/views', 'app']);
          
          /**
           * Generate WordPress `theme.json`
           *
           * @note This overwrites `theme.json` on every build.
           *
           * @see {@link https://bud.js.org/extensions/sage/theme.json}
           * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}

breyell · July 18, 2024, 4:26pm

How are you running your development environment? Is it with Trellis?

I’m using Laravel Herd which is built on top of Laravel Valet.

Have you configured lines 36 and 37 in bud.config.js?

Yes, I have. Here they are:

  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://sage-test.test')
    .watch(['resources/views', 'app']);

MWDelaney · July 18, 2024, 8:05pm

I had difficulty getting Herd and Sage playing well together, too. We don’t officially support it.

Local, and Trellis both worked well though, if you have an option to use another platform.

breyell · July 19, 2024, 1:12am

After trying a different theme from another project and having hot reload fail there (where the same code was working on a collegue’s machine), I restarted my computer and it started working. I’m not sure what was causing it but I did have some bonkers amount of swap used. Anyway, thanks for the help and at the very least I can confirm Herd works fine.