Symfony 3: Assets

  • Composer manages PHP dependencies
  • NPM or Yarn would be used for Frontend assets

Webpack
Webpack is a node.js library which can bundle your javascript and CSS files into bundles. You can ready detailed documentation about it on https://webpack.js.org.

Encore
Encore is a recommended library which is built on top of webpack. Encore is also written in node.js. This library makes it simpler to integrate webpack into your Symfony application.

1) Installing the Dependency

composer require symfony/webpack-encore-pack
yarn add @symfony/webpack-encore --dev

After running this command the following files will be changed:

./composer.json: “symfony/webpack-encore-pack” dependency added ./package.json: dev dependencies to @symfony/webpack-encore are added ./webpack.config.js: we will define the build process parameters in this file

2) Install bootstrap and compiling assets

yarn add bootstrap@4.0.0
yarn add holderjs
yarn add popper.js@1.12.9
yarn add jquery@3.3.1

This command will automatically add yarn.lock file which will be used to lock the versions
during when running yarn install command.

3) Add the installed asset dependencies to the entries of webpack.config.js
In addition let’s add app.js and app.css files as well.

./assets/css/app.css (will contain custom styling css) ./assets/js/app.js (will contain custom js code)

Now let’s adjust the webpack.config.js to include all the files required:

# ./webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    .addEntry('js/app', [
        './node_modules/jquery/dist/jquery.slim.js',
        './node_modules/popper.js/dist/popper.min.js',
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        './node_modules/holderjs/holder.min.js',
        './assets/js/app.js'
    ])
    .addStyleEntry('css/app', [
        './node_modules/bootstrap/dist/css/bootstrap.min.css',
        './assets/css/app.css'
    ])

    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
;

module.exports = Encore.getWebpackConfig();

4) Compile the assets

./node_modules/.bin/encore dev

# compiling the assets and watch files for changes
./node_modules/.bin/encore dev --watch

5) Including styles and javascript files in the template

# ./templates/base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('build/css/app.css') }}"/>
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
            <script src="{{ asset('build/js/app.js') }}"></script>
        {% endblock %}
    </body>
</html>