Using Symfony Webpack-Encore-Bundle with Pimcore

I am using Pimcore v6.6.4, PHP 7.4 on a Mac.

Open a terminal and go to the project root directory and perform the following steps:

Install yarn brew install yarn
Install Symfony Flex composer require symfony/flex
Install Symfony Encore composer require encore
run yarn or yarn install

Now we have a new directory 'assets' in the project root directory. Within these directories, there are two subdirectories one for JS-files and another one where CSS-files placed to be. To execute the very first build we need to go over in our terminal and run ./node_modules/.bin/encore dev . This will create a build directory in our web-root.

If we want to use the Twig template functions to render the JS and CSS files, we need to set up some more things. Add the new \Symfony\WebpackEncoreBundle\WebpackEncoreBundle() to AppKernel.php:

<?php

use Pimcore\HttpKernel\BundleCollection\BundleCollection;
use Pimcore\Kernel;

class AppKernel extends Kernel
{
    /**
     * Adds bundles to register to the bundle collection. The collection is able
     * to handle priorities and environment specific bundles.
     *
     * @param BundleCollection $collection
     */
    public function registerBundlesToCollection(BundleCollection $collection)
    {
        if (class_exists('\\AppBundle\\AppBundle')) {
            $collection->addBundle(new \AppBundle\AppBundle);
        }
        
        if (class_exists('\Symfony\WebpackEncoreBundle\WebpackEncoreBundle')) {
            $collection->addBundle(new \Symfony\WebpackEncoreBundle\WebpackEncoreBundle());
        }

        if (class_exists('\Pimcore\Bundle\LegacyBundle\PimcoreLegacyBundle')) {
            $collection->addBundle(new \Pimcore\Bundle\LegacyBundle\PimcoreLegacyBundle);
        }
    }
}

AppKernel.php

In config.yml we need to add the following lines:

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
        
webpack_encore:
    output_path: '%kernel.project_dir%/web/build'

config.yml

From now we can use the Twig Helper functions to add JS- and CSS-files to our templates like so:

<!doctype html>
<html lang="en">

<head>
    <title>{% block title %}Awesome Default Title{% endblock %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}
</head>

<body>

{% block body %}{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>

base.html.twig

There are several scripts the we can use to build our files. Have a look into package.json file.

"scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }

package.json

If we want to rebuild our files every time we have changed some code, so simply use yarn watch . This will run the script in the background.

For more information about this bundle I highly recommend the "Webpack Encore: Frontend like a Pro!" - SymfonyCast.