Example 01:`admin` e `frontend` asset collections

In this example, we explore a scenario where an app has two main areas: admin and frontend. So we have 2 asset collections: admin and frontend.

The admin area has a base template templates/base-admin.html.twig. The Twig mam_importmap('admin', 'main') will render the importmap for admin starting with its main entrypoint.

And the frontend has templates/base-frontend.html.twig. The Twig mam_importmap('frontend', 'main') will render the importmap for frontend starting with its main entrypoint.

The /admin is rendered using the template templates/admin/index.html.twig. The function asset() is used to render the image from the correct asset collection.

Rendering the following

See the rendered page source

The /frontend is rendered using the template templates/frontend/index.html.twig. The function asset() is used to render the image from the correct asset collection.

Rendering the following

See the rendered page source

Once you use the console command mam:asset-map:compile (usually run in production environment), the compiled assets, ready to be served will be in the public/asset-collections directory.

Result of running mam:asset-map:compile.

Contents of public/asset-collections directory.