Bundling Symfony 5 assets (managing reusable bundle assets)

Question

I am building my own Bundle for Symfony 5 following this documentation: https://symfony.com/doc/current/bundles/best_practices.html

There it says:

A bundle should also not embed third-party libraries written in JavaScript, CSS or any other language.

It doesn't explain any further how my Bundle can include assets (js, images, css, fonts etc).

I can see in EasyAdmin file that it has it's own webpack.config.js - which is what I want to have in mine. How was this achieved? Just placing a webpack.config.js into the Bundle folder doesn't allow to run yarn encore on it.

I have seen this question here, which seems to be related: Can a Symfony bundle have a own Webpack Encore configuration? But it doesn't answer my question - clearly EasyAdmin does have it's own webpack.config.js in the Bundle.

The first part is easy: libraries mean something like jquery or bootstrap etc. As far as your second question goes, never really tracked that down. — Cerad, Aug 09 '20 at 13:54

score 7 · Accepted Answer · answered Aug 10 '20 at 07:34

The short answer is, that your bundle should contain a Resources/public/ folder with the built production assets in it. You can use the assets:install-command to copy or symlink these files into your project's public/ directory where it will automatically be placed in a subdirectory named after your bundle, so for example public/bundles/appbundle/. In your bundle you can then assume this path exists and load assets from there, e.g. in a twig-template with the asset-helper: {{ asset('bundles/appbundle/images/my_image.jpg') }}.

If you want to use EasyAdminBundle as a reference, here is an explanation how it works there:

Yes, EasyAdminBundle provides a webpack.config.js, but it is mainly for development and will never be used by your application. Instead the configuration will write the production assets to the appropriate places inside the bundle (namely src/Resources/public):

Encore
    .setOutputPath('./src/Resources/public/')
    .setManifestKeyPrefix('bundles/easyadmin')

    .enableSourceMaps(false)
    .enableVersioning(false)
    .disableSingleRuntimeChunk()

These built assets are part of the bundle (see the link above) and are always distributed with the bundle, so no need to build frontend assets yourself when you use the bundle. Those production assets can then be used directly by your application by running a Symfony command which copies frontend resources into your project's public/-directory:

php bin/console assets:install

The assets:install command installs bundle assets into a given directory (e.g. the public directory).
php bin/console assets:install public
A "bundles" directory will be created inside the target directory and the "Resources/public" directory of each bundle will be copied into it.

In your templates you can then rely on these assets using the bundle-prefix whenever you require these assets, e.g. for app.css (You can see this being used in EasyAdminBundle's layout.html.twig):

{{ asset('bundles/easyadmin/app.css') }}

If you want to do something similar, you will probably have to ensure that the webpack-settings do not break accessing the css files directly, e.g. runtime chunks or versioning, like EasyAdminBundle does. Alternatively you could ask users of your bundle to also reference the manifest.json in your bundle in their assets-config, but then you probably have to rely on the package naming which might not be what you want.

Bundling Symfony 5 assets (managing reusable bundle assets)

1 Answers1