'yarn dev' not: (1) rebuilding css changes, (2) reloading changes in browser

sage
1

Thanks for your help…
New Sage install on Vagrant/Windows. All works, but:

  • I must manually yarn dev (or yarn) and reload my browser to see any changes to css rule changes directly in resources/styles/app.css (or any imported css file in same folder).
  • If I change a .blade.php file, I can see the change if I manually reload the page (no need to re-run yarn dev)
  • I have other Vagrant development builds that run Webpack without problem (reloading on changes, etc.)

After many hours of searching/debugging, I cannot find the magic setting/parameter to enable these included Sage functions. yarn dev --log doesn’t show anything odd (to me). Even ChatGPT 4 couldn’t solve it.

Any hints? or debugging hints? Thanks!!

Here’s my bud.config.js custom values just in case (only including items changed from default Sage values):

xport default async (app) => {
app.setPublicPath('/app/themes/mynewtheme2023/public/');
 app
    .setUrl('http://192.168.2.25/')
    .proxy(new URL('http://192.168.50.25'))
    .setPublicProxyUrl(new URL('http://192.168.50.25'))
    .setProxyUrl(new URL('http://192.168.50.25'))
    // .setUrl('http://localhost:3000')
    .devtool()
    .watch([app.path('resources/views/**/*'),
      app.path('app/**/*'), app.path('resources/styles/**/*')]);
2

One reason that comes to mind is that the source files are mounted into Vagrant in a way that does not allow for file notifications.
Also take a look at the new Lima feature in recent Trellis:

3

Thanks for taking the time to respond.

My Windows/Vagrant Webpack runs fine (auto-rebuilds/reloads) without the Roots wrappers, so I don’t know what to think. It would be nice if Sage had an option to provide some output when in dev/watch mode to help debug.

I went through the pain of rebuilding the entire stack/environment in WSL2, but the browser still does not auto-load. However, the styles DO auto-compile upon file changes there.

It seems like Roots was really built for and intended to run on Linux and/or MacBooks, so us Windows users should probably stick with the more established Webpack, Laravel, etc.

4

Ongoing debug… after a few more hours, realized that

  • searched/found more Roots docs and ran yarn dev --notify --debug --hot --overlay --indicator --browser --force – new browser window does open.
  • browser is trying to load from http://localhost/bud/hot/ but that path is nowhere to be found in the file system.
  • hot-update.js files are created and placed in the “public” sage folder… tried to force the /bud/hot/ path to go to my ‘private’ folder (overwrite .js file, created a symlink from /bud/hot to my “public” folder), but then browser complains about the "EventSource’s response has a MIME type (“text/html”) that is not “text/event-stream” … likely not the Roots way anyway. Seems like /bud/hot should be aliased by Sage/Bud/Roots somehow.
  • Still grinding away.
5

In the end:

  1. app.setUrl() CANNOT be set to port 80 (e.g., must be http://localhost:3001, not http://localhost)
  2. For WSL users, to enable port forwarding (thanks to this post, which contains more details):
    Add the following to : C:\Users\“you”.wslconfig with the following content (yes in Windows folders)
  3. Would likely work on Windows Vagrant given #1 above with proper Vagrant port forwarding.
[wsl2]
localhostForwarding=true

(#1 perhaps should be added to the Roots Bud/Sage docs. #2 was difficult find, not in /etc/hosts as the Stack Overflow author observed.)

1 Like