Modern JS in Symfony with Webpack Encore

Symfony 2 introduced Assetic to provide asset management. Back in 2011, in the days of server rendered application, this pure PHP solution was good choice, but in 2017, Single Page Apps (SPA) and other more heavily javascript driven websites are the norm.

Assetic didn’t quite handle this modern world of JavaScript, where WebPack is the tool du jour for packaging and transpiling javascript, and including static JS straight from the file system is becoming somewhat of a faux pas.

Webpack Encore is an abstraction over webpack which simplifies the configuration and provides a number of common transformations for a modern frontend toolchain. It brings best of breed asset bundling to your Symfony applications.

It also works great with Symfony and Twig, with the JSON manifest strategy introduced in Symfony 3.3. With one line of code, you can introduce asset versioning, and even configure a CDN.

Here’s an example webpack Encore webpack.config.js and the webpack config it generates. Notice the Webpack Encore is 23 lines (including comments) vs 168 lines of pure webpack config. 😮

Stay tuned for an upcoming post where I’ll set up a simple starter repo for Symfony with a React frontend.

Originally published at chriscolborne.com.