Assets: Custom CSS and JS

Hey Tomáš K.

You're right! Thanks for sharing it with others

Hey @kinadian ,

Thanks for sharing it with others!

Cheers!

Hey @ahmedbhs ,

I suppose you're adding your custom JS files in configureAssets() method of your CRUD? I think you can add there a little check and JS only for specific action/page. As an alternative, you can override templates and add the JS directly there where you can also add some extra checks and include assets only for specific cases.

I hope that helps!

Cheers!

The checks should be inside the curd controller or the js file ,?and how to check these actions !

Hey @ahmedbhs ,

If you're worried about including specific JS files on some pages - then I suppose doing the check inside the JS file will not make any sense for you, right? I mean, the file will be still included. that you're trying to avoid as I understand. So yes, you should do it in a CRUD controller for example, or as I said in my previous message, do it inside a template. What exactly checks - it depends on how you include your custom JS files. So in the place where you include them you need to add some conditions that will execute the code responsible for the including those JS files only for specific cases.

Cheers!

Hey Francois,

I didn't try that myself, but that should work I think... For AssetMapper it's important you to call asset() and if IIRC all assets in EasAdmin are added via asset() behind the scenes, so I would say it should work. I think you can give it a try and see :) In short, you should use the same path in addCssFile() which you would use in your template in asset() Twig function.

Cheers!

Hey @pasquale_pellicani ,

That's a third-party bundle's code, so it's supposed to be used this way. Actually, EA uses Webpack Encore behind the scene, see https://github.com/EasyCorp/EasyAdminBundle/blob/4.x/webpack.config.js . But for simplicity, the EA pre-compiled all those assets and commit the compiled version to the repo so that users of this bundle even don't have to have Webpack Encore installed in their projects, it just works out of the box with the way you mentioned, which is also a best practice way for Symfony bundles.

But if you want to pass those files through your own Webpack Encore config - you can, in theory. I think you just need to add all those files to your config, compile them, and include them to the EA templates. I suppose you may want to override EA assets to avoid doubling those assets. But on practice I don't see a value in it unless you want to change something internally in the EA assets? But if you just need to add some behaviour - you don't have to touch EA assets code, just create a new Webpack Encore entry and include it to the specific crud controller, etc. with addWebpackEncoreEntry() method.

I hope this helps!

Cheers!

Hi, thanks for the reply, but if I add a new entry in my webpack-encore, which path should I link it to ?
Thanks

p.s.
so I shouldn't use the asset::install command.

Hey @pasquale_pellicani ,

I suppose the relative path to the source assets in your vendor/... directory :) pointing to the compiled assets in your Webpack Encore config file is not quite correct, as that's already a compiled version of the assets :) Basically, you need to point to the same files the EA Webpack Encore config points to.

Cheers!

..maybe this correct ?
(in webpack.config.js file)
.addEntry('easy-admin', './vendor/easycorp/easyadmin-bundle/assets/js/app.js')

after yarn --watch return this.... :'(

Module build failed: Module not found:
"./vendor/easycorp/easyadmin-bundle/assets/js/app.js" contains a reference to the file "bootstrap/dist/js/bootstrap.bundle".
This file can not be found, please check it for typos or update it if the file got moved.

"./vendor/easycorp/easyadmin-bundle/assets/js/app.js" contains a reference to the file "mark.js/src/vanilla".
This file can not be found, please check it for typos or update it if the file got moved.

"./vendor/easycorp/easyadmin-bundle/assets/js/autocomplete.js" contains a reference to the file "tom-select/dist/js/tom-select.complete.min".
This file can not be found, please check it for typos or update it if the file got moved.

Hey @pasquale_pellicani

It seems correct, and the error message says that it's processing that file... but could not find other files that it imports, e.g. bootstrap/dist/js/bootstrap.bundle file. Make sure those files exist. Though I'm not sure if you need to install Node deps in that ./vendor/easycorp/easyadmin-bundle/ or no :/ Most probably you should add those deps to your package.json file so that the Webpack Encore could get access to them, because the EA file you're trying to add depends on those.

Cheers!

Hi, thanks for the reply, but shouldn't it be the responsibility of the bundle to have an already working app.js file? And then if I modify my webpack.config.js I risk compromising the frontend assets (where I use a different template than EasyAdmin's) or not ?
Cheers!

Hey @pasquale_pellicani ,

Well, the responsibility of the bundle is to provide you an out-of-the-box working solution, and the bundle provides you with already compiled assets that you can just use. If you want to worry about compiling those assets yourself - that's more work on your side, but that's up to you I think.

Why do you think the app.js file does not work? It's normal that your custom JS code depends on more low level libraries, e.g. you depend on Bootstrap if you use their modals, you depend on Stimulus core files if you write custom Stimulus controllers. The EA JS code depends on some libraries you are missing in your project that's why you see those errors.

And then if I modify my webpack.config.js I risk compromising the frontend assets (where I use a different template than EasyAdmin's) or not ?

Not sure I understand. Do you mean you don't use Bootstrap but another frontend toolkit? If so, I suppose it depends if your dependencies conflict with it or no. As soon as you can add it to your package.json - it should be OK I think.... as long as you do not import those new libs to your personal JS files.

Please, read this docs, maybe you will find an answer how to do what you want without trying to compile EA assets manually: https://symfony.com/bundles/EasyAdminBundle/current/design.html

Cheers!

Hey Lubna,

I'm not sure... Do you use npm package manager instead of Yarn? Or did you just mislead the command? Because in this course we use Yarn, and the command should be "yarn watch" instead of "npm run watch". So, this might probably happen because npm sees that your project already uses Yarn, but I'm not sure.

Cheers!