Asset files are not loading after a fresh Laravel Sail installation on MacOS

• Laravel Vite Plugin Version: 0.2.4
• Laravel Version: 9.19.0
• Node Version: 16.15.1
• NPM Version: 8.12.1

Description:

After a fresh installation of Laravel Sail and Laravel Breeze, css and js files are not loading in the browser

Steps To Reproduce:

curl -s "https://laravel.build/example-app" | bash

cd example-app
 
./vendor/bin/sail up

sail composer require laravel/breeze

sail artisan breeze:install

sail npm install && sail npm run dev

vite v2.9.13 dev server running at:

Local: http://localhost:5173/ Network: http://192.168.48.4:5173/

When I visit localhost/login, the console shows “Failed to load resource: bad URL” and these are the locations where the browser is looking for the resources:

http://0.0.0.0:5173/resources/css/app.css http://0.0.0.0:5173/@vite/client http://0.0.0.0:5173/resources/js/app.js

This is how the login page looks like

[tuto1902]

@AdyGCode I tried your workaround but still doesn’t work for me. I even tried setting server.host to localhost, which changed the address from 0.0.0.0 to localhost but the resources didn’t load, which is all kind of confusing since changing the value manually in the rendered page to localhost actually loads the assets

@tuto1902 I know I’ll probably be teaching you to suck eggs, but did you:

• CTRL+C to stop the npm run and then re-run using sail npm run dev?
• From time to time I will also sail down and then sail up after the changes if I am not sure changes were correctly picked up.

You may also want to run sail npm update just as a precaution.

The server.host (from what I read and recall) will not help when working with a sail/docker container - I believe the server.host needs to be 0.0.0.0 for docker/containers. The host, in this case, is the HMR (hot module reload?) and I set that to localhost and that seemed to work for me.

I also did force my cache to be cleared in Safari [CMD+OPT+E]. May also need to clear the Laravel cache as well [sail artisan cache:clear].

@AdyGCode Thanks for the reply. I tried all the suggestions: sail down and sail up, Ctr+C, sail npm update, clearing cache from safari and from artisan. Nothing seems to work in my case. As a last resort, I’ll try to get a hold of a different Mac and try to run a fresh install there to see how it goes.

Btw, your reply made me think of this immortal line 🤣

[jessarcher]

@AdyGCode @Fedeorlandau Accessing the Vite dev server directly (http://localhost:3000 or http://localhost:5173, depending on whether you’re running it inside Sail) is expected to return a blank screen at the moment as that’s just where Vite serves assets for HMR. This has been improved with #57 as we’ll now be outputting a default help screen to instruct users to run a dev server for Laravel.