Manage Assets

Summary

Where asset source files live, where Vite builds and copies them to, and how to bust the browser cache when they change.

Details

If you haven't already done so, make sure npm is installed. You can keep it running during your updates with npm run watch or run this command after the edits are completed npm run build.

What are assets?

Assets are various files used by your content:

• Images,
• Fonts,
• JavaScript codes,
• SCSS.

Assets source and destination

The source of these files is the src/App/assets/ folder:

• src/App/assets/images
• src/App/assets/fonts
• src/App/assets/js
• src/App/assets/scss

The npm script processes these files and copies or builds files under the public folder.

You should not manage the items from the above folders manually. The npm script will delete/replace the files when run.

The fonts folder is copied flat into public/fonts/, but the images folder is copied under an extra app/ segment — src/App/assets/images/icon/hand.svg becomes public/images/app/icon/hand.svg, not public/images/icon/hand.svg. See vite.config.js for the exact mapping. The js and scss files are minimized:

• scss files are minimized under public/css/app.css.
• js files are minimized under public/js/app.js.

The above items are by default used in the src/App/templates/layout/default.html.twig file.

<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
...
<script src="{{ asset('js/app.js') }}"></script>

The source and destination folders are configured in the vite.config.js file.

Browser caching of js and css

One thing of note is that browsers cache the js and css files. When you push changes to one or both the files, you may notice that updating the site keeps the old version of the files.

A simple solution to force the browsers to download the newer version of the files is to add a version parameter in the url. Whenever you commit changes to those files, make sure to increase the value of the v parameter.

<link href="{{ asset('css/cls_dk.css?v=3') }}" rel="stylesheet" />
...
<script src="{{ asset('js/cls_dk.js?v=5') }}"></script>

The values 3 and 5 are provided as an example. The important thing is to use values for each file that you haven't used before, so incrementing the value for v is a simple way to track each change.

FAQ

Q: Where do image assets actually end up after the build? A: Under public/images/app/, not public/images/ directly — the images copy target in vite.config.js adds an app/ segment that fonts doesn't.

Q: How do I force browsers to fetch an updated CSS or JS file? A: Add or increment a ?v= query parameter on the asset URL, for example app.css?v=3.

Q: Should I edit files directly under public/css, public/js, public/fonts or public/images? A: No — the npm script deletes and rebuilds those folders from src/App/assets/ on every run.