No hot reloading: Sage 10, Local by Flywheel, macOS

sage
,
1

As the title says, hot reloading is not working.

Serving WordPress on macOS Sequoia 15.2 via Flywheel Local, at https://tdh.local.

After running npm run dev, which I noticed that it’s calling bud dev, I’m getting a 404 Not Found exception triggered by the app trying to access the non-existing URL at https://tdh.local/bud/hot.

My bud.config settings are:

app
    .setUrl('https://tdh.local')
    .setProxyUrl('http://example.test')
    .watch(['resources/views', 'app']);

I also noticed that immediately after running the npm run dev command, I’m getting this in Terminal:

BudError

✘ options.port should be >= 0 and < 65536. Received type number (NaN).

However, bud is doing its things afterwards:

╭ sage [edcd5522cfe2fd01]                                                                                                                                                                                                                                                                                                                                                                                                                                                 ./public
│
│ app
│  ◯ js/runtime.js                                                                                                                                                                                                                                                                                                                                                                                                                                                        49.49 kB
│  ◯ js/app.js                                                                                                                                                                                                                                                                                                                                                                                                                                                           159.26 kB
│
│ editor
│  ◯ js/runtime.js                                                                                                                                                                                                                                                                                                                                                                                                                                                        49.49 kB
│  ◯ js/editor.js                                                                                                                                                                                                                                                                                                                                                                                                                                                          2.26 MB
│
╰ 226ms 336 modules [336/336 modules cached]

 Network

 › Proxy  ┄ http://example.test/
 › Dev    ┄ https://tdh.local/
          ┄ https://192.168.1.165/

Any thougths on this?

Thanks a lot!

2

Just to make sure I’m clear regarding what the problem is, the Tailwind classes are getting compiled properly (manual reloading the browser after adding new Tailwind classes does reflect the changes).

It’s just the hot reloading part that doesn’t work.

Firefox is giving a clearer insight into the issue:

Firefox can’t establish a connection to the server at https://tdh.local/bud/hot.
3

Try with settings like in the example

app.setProxyUrl('http://project-name.localhost');
app.setUrl('http://project-name.localhost:3000');
app.setPublicPath(`/wp-content/themes/theme-name/public/`);

Besides, sage 11 with vite.js is coming out soon, it’s on the main branch on github, it’s worth considering this option, because bud.js is no longer supported.

1 Like
4

@Liskownik you, sir, are a legend. And a lifesaver. Sage 11 is the way to go.

All I had to do was:

  1. git clone the main branch
  2. touch .env
  3. nano .env and add APP_URL=https://tdh.local
  4. composer install
  5. npm install
  6. npm run dev

Everything works OOB. It. Just. Works!

Coming from a Laravel background, I’m getting increasingly happier with my choice of a WP theme starter.

Many thanks for your help, it’s greatly appreciated!