Symfony Webpack Encore Tutorial: Compiling JavaScript + CSS

ℹ In this recording I show you how to compile your JavaScript and CSS frontend assets in Symfony using a tool called Webpack Encore. If you're familiar with managing frontend assets then you're probably familiar with Webpack...and you'll no doubt be aware that configuring and using it ain't a walk in the park...
🆓 Join garyclarke.tech for course DISCOUNTS and a FREE Docker + PHP course (worth $49)
www.garyclarke...
👇Follow me on Social Media:
Twitter: / garyclarketech
Linkedin: / garyclarketech
💕Show support:
www.paypal.com...

[@ombrax5]

Thank you so much, Gary! This is exactly what I need as to beginning understanding webpack encore. Great work.

[@GaryClarkeTech]

Glad it was helpful!

[@danilivanov]

For a long time I was afraid to use this in my projects. But here I am =) Thanks =)

[@GaryClarkeTech]

You are welcome!

[@sonoftroy8572]

thanks for the tutorial! great content. quick question, when you're using symfony 6 do you ever adjust the zend_extension = opcache in the php.ini for better performance? when I adjusted the setting, the load time appeared to be very slow. any suggestions thanks

[@GaryClarkeTech]

You're welcome. It's a long time since I've ever been required to touch that setting..I think I may have it enabled by default.

[@FlowWOBO]

Thank you Gary for this very clear little tutorial. I'm looking to go further with configureDevServerOptions and 'hot' + 'livereload', but can't seem to get it to work. Did you go further in this direction?

[@GaryClarkeTech]

Thanks..no I didn't go any deeper into it. I may add some more Symfony frontend stuff when we get S6...I'm wary of stuff quickly dating if I do much more S5 atm

[@KOSMOS-so6vw]

Kind people who can tell you how to call up a list of referrals in the symphony? I have a registration done by the ref link, the input is already configured, but I can't call up a list of everyone I invited, whatever I wrote in the controller, it gives me either an error or the one who invited me or my information and that's it

[@disconnect3763]

Thank you!

[@pavelgolin2421]

very nice and helpful! thanks

[@GaryClarkeTech]

Cheers Pavel!

[@jericoluislua]

Hi I am trying to go through with these tutorial. Everything worked kinda.. I was able to build the files and its being shown in the browser network analysis. But if you look at the website the changes arent being made. Any idea whats causing this?

[@GaryClarkeTech]

Possibly caching? Have you tried clearing your browser cache? I use a chrome extension called Clear Cache for this kind of thing.

[@jericoluislua]

@@GaryClarkeTech Thanks for the very quick reply! Turns out bootstrap was overwriting the default test css body color change Thats why i wasnt able to change it. I tested changing the paragraph tag’s font color and it was working!

[@adrianfgutierrez2836]

You channel going up

[@AlfinAndri]

Thank you. Lovely tutorials. How do we just only compile one or two files of on our own css/js files, excluding third party libs (bootstrap, fontawesome, jquery). I mean, if we run --watch flag, and working on own css, we don't need to compile other 3rd party library (bootstrap, fontawesome) right? They compiled just one-time only. How do we do that? Thank you.

[@GaryClarkeTech]

You'd need to remove references to the 3rd party libraries in order to exclude them

[@AlfinAndri]

@@GaryClarkeTech Thank you Gary, you're awesome.

[@adrianfgutierrez2836]

God job 👏👏👏 Thank you 👍

[@GaryClarkeTech]

Welcome Adrián!

[@fitter2boss72]

Why we don't see HMR here? :)

[@qkenkenu]

console.log('msg') in app.js not working, no matter wich wersion od encore i'm using.... js and the tools they build on top of it.. never works to me...

[@GaryClarkeTech]

I'll check it out

[@fitter2boss72]

Thank you. But, may be you show how to use EasyAdmin bundle in the future , I think it will be helpfull . Some times need to make small admin fitures fast as possible.

[@GaryClarkeTech]

Noted..thanks for the suggestion

[@parijke]

Maybe nice to follow up how to integrate with things as tailwind or purgecss or vue or ....

[@GaryClarkeTech]

Yeah you're right. I'll definitely do that at some point in the future.

[@bakaleisanich]

@@GaryClarkeTech react =)

[@GaryClarkeTech]

@@bakaleisanich Vue and React are both supported by Webpack Encore so maybe I'll touch both

[@bakaleisanich]

@@GaryClarkeTech mmm)

[@bakaleisanich]

Thank You!

[@GaryClarkeTech]

Welcome!

[@369-davian]

hi master, from dominican republic, visit us and enjoy, thanks for all the lesson 🐬

[@GaryClarkeTech]

Maybe one day!