Laravel Vite static asset handling - dev vs build

Question

I'm having somes issues understanding how Vite works with static assets like image and fonts, and how to correctly reference them. Can anyone advise?

After reading the documentation, for static images I stored them in the "resources/images" folder and simply added the following in to app.js:

import.meta.glob([
'../images/**',
  ]);

and I can reference them in blade files using the following:

{{ Vite::asset('resources/images/someimage.jpg') }}

For fonts I've added the folder manually in to "public/fonts", and I reference them from the app.css file like so:

@font-face {
font-family: "Bebas Neue Pro";
src:url(/fonts/bebas_neue_pro/bebas_neue_pro.otf) format("opentype"),
}

...and add them to my Taiwind config like so:

theme: {
extend: {
fontFamily: {
sans: ["Bebas Neue Pro", 'sans-serif'],
"Bebas Neue Pro": ["Bebas Neue Pro"],
},
},
},

I run npm run build and when I view the site it works perfectly.

However when I run using npm run dev the images only work if I've already run "build" previously, and the fonts aren't picked up at all, I get "404 not found" errors.

Is there a way to get it working correctly for both build and dev?

I don'T think so because when I run "build" the fonts display correctly — Delmontee
– Delmontee, Commented Nov 7, 2023 at 7:31

Peppe L-G · Accepted Answer · 2023-11-06 16:06:55Z

0

To me it sounds like you want to put the static files in the public directory. Then you can reference them the same way in both dev and build mode (using their absolute path (without /public in the beginning)).

https://vitejs.dev/guide/assets.html#the-public-directory

answered Nov 6, 2023 at 16:06

Peppe L-G

8,4182 gold badges29 silver badges56 bronze badges

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

2 Comments

Delmontee Over a year ago

I was told exposing the public path anywhere in code was bad?

Peppe L-G Over a year ago

Not sure what you mean by "exposing public path", but there are benefits with importing file URLs instead of referencing files in the public folder, such as Vite will complain about mistyped filenames. But I now took a closer look at your question, and I realized that I missed that you use Laravel specific things, which I have no experience of, so I'm afraid my answer is not very helpful for you.

Collectives™ on Stack Overflow

Laravel Vite static asset handling - dev vs build

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related