Front-end Asset Management

Front-end Asset Organization

By default, assets sources are stored under PROJECT_ROOT/resources and then "compiled" into src/public/ directory. These assets will be served by CDN to ensure optimal performance. The following is a summary of assets locations in our system:

CSS: resources/pcss/ => public/css/

JavaScript: resources/js/ => public/js/

Images: resources/img/ => public/img/

Fonts: CDN (Google Fonts)

Videos: CDN (Amazon S3 + CloudFront)

There are some npm tasks/commands to transform our asset sources into production-ready assets:

.js files should be transpiled, versioned and minified for production.

PostCSS files should be compiled into CSS, optimized/minified and versioned to avoid caching problems.

Cacheable Assets

Assets managing using PHP

We use Laravel mix-compatible API and versioning system.

We also combine this with the asset() helper to generate CDN URLs.

This line will automatically add the CDN URL (based on the .env variable ASSET_URL) and a cache-busting query string to prevent cache problems on client side:

<!--src-->
@vite('resource/js/app.js')

<!--output (example)-->
<script  type="module" src="https://assets.interaction-design.org/js/app-rAndOm.js" defer></script>

Note that random part of the filename depends on file content (checksum) and thus changed only when then content is changed.