fanpero87's avatar

@vite directive not loading build files when deployed

Hello, I made a fresh Laravel app with Jetstream. When I use Laravel valet or other options like ngrok or cloudflare tunnels to see the app on the web, I notice that the .css styles file is not there. I do see the styles file when using php artisan serve and by going to localhost:8000

To see the styles with a public URL, I have to manually add the css file like this:

  <!-- Styles -->
  @vite('resources/css/app.css')
  <!-- Static Files -->
  <link rel="stylesheet" href="/build/assets/app-33ea3279.css">

I'm wondering if this is how it's suppose to work or if there is something I'm missing from the setup.

The documentation only mention to run npm run dev to create the files on the public/build folder.

Thanks.

0 likes
5 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

It seems like the issue is with the way the @vite directive is being used. Instead of manually adding the CSS file, try using the mix() function provided by Laravel Mix to generate the correct URL for the CSS file.

Here's an example of how to use mix() in your Blade template:

<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

Make sure to run npm run dev or npm run prod to generate the CSS file in the public directory before deploying your application.

If this doesn't solve the issue, it's possible that there's a problem with your Vite configuration. Check the Vite documentation and make sure that your configuration is correct.

webrobert's avatar

You have to npm run build on the server. Not locally

fanpero87's avatar

@webrobert the thing is that I'm not actually using the app on a production server. I'm still using the developer environment on my pc. But I wanted to show the app to some one so I used CloudFlare tunnels and also ngrok to create a public URL. That's when I noticed that the styles file wasn't loading. I have this question, because images they do load normally and I'm using blade {{ asset('image.png ') }} to do it. so Why other blade components does it but the vite line doesn't?

Muneeb Akram's avatar

This is still an issue with Adonis JS. after build it is not linking assets files correctly.

Bilal_swl's avatar

As my understanding is that you are using @vite and you css styling not working... for production you have to run npm run build it will generate files in public/build/asset folder. add @vite('resources/css/app.css') in you blade file, it will add styles for yor page.

Please or to participate in this conversation.