0

I’m developing a Laravel application using Vite for the frontend, and I’m trying to test the site both on my PC and mobile phone, which are connected to the same Wi-Fi network.

Here’s how my setup looks:

Laravel is running on port 8000 via the command php artisan serve --host=0.0.0.0. Vite is running on port 3000, with the command npm run dev, to serve the frontend. I can access the site from my phone using my PC's IP (http://192.168.x.x:8000), but the CSS is not loading on either my PC or phone.

I’ve tried the following without success:

I checked that the paths to the CSS files in my HTML are correct. I configured Vite to accept external connections (with host: 0.0.0.0 in vite.config.js). I verified there are no firewall issues on my PC (I even temporarily disabled the firewall). I ran npm run build and tried reloading the site. I checked that the .env file in Laravel is correctly configured with APP_URL=http://localhost:8000. I tried clearing the browser cache on both PC and phone. There are no visible errors in the browser, but the CSS is not being loaded.

What could be causing this issue? Is there any missing configuration I need to do to ensure that the CSS loads correctly when accessing from different devices on the same Wi-Fi network?

Thanks in advance for any help!

Edit:

I changed the APP_URL as you suggested, but it didn’t solve the issue. I tried accessing the CSS files, but I’m getting a 404 error.

In the console, I see these two errors:

Blocked cross-origin request (CORS): The origin policy does not allow reading the remote resource from http://[::]:5173/@vite/client. Reason: CORS request failed. Status code: (null).

The source URI of the module is not allowed in this document: http://[::]:5173/@vite/client.

Solved:

I solved it simply by adding this to my vite.config.js:

server: { host: '192.168.x.xx', },
Improve this question
2
  • Please provide enough code so others can better understand or reproduce the problem. Commented Jan 7 at 14:00
  • Status code: (null). tends to indicate that the request failed so CORS here is a red herring [::] (I think) is the IPv6 localhost equivalent so it may be an issue accessing your site over IPv6, not sure if forcing IPv4 would help in any way or whether this is another red herring. At any rate I would make sure your site accesses your vite server via its network IP (e.g. 192.168.x.x:3000 rather than localhost:3000) because your phone will need direct access to the vite server Commented Jan 7 at 14:21

1 Answer 1

Reset to default
1

If your site is reachable via http://192.168.x.x:8000, this should also be your app url. localhost is a potentially different address on different devices.

APP_URL=http://192.168.x.x:800

To further test this, can you open the css files directly on your phone if you visit their address or does it show an error? Depending on your setup, you can see the phone's browsers' network/ console error messages on your pc/ development device. Chrome and Safari for instance support this.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.