JavaScript frameworks and libraries - MiguelFieira/AMO-HANDBOEK GitHub Wiki

You can use many different front-end frameworks and libraries in tandem with Symfony. There is actually a Symfony bundle that handles most of the bundling called Webpack Encore. As the name implies, it uses Webpack to bundle the JavaScript packages for your web application.

Installation

Besides composer you need a JavaScript package manager as well, while I'm a NPM kind of person, from my experience this works much better with Yarn.

If you don't have the Webpack Encore bundle yet, execute this command.

composer require symfony/webpack-encore-bundle

AFTER composer is done with the bundle, execute:

yarn install

Setup

If you are using Symfony-flex, a lot of the setup has already been done for you, if not you will need to configure these things yourself.

In the root of your project, create a file webpack.config.js. This is your Webpack configuration file. Below is an example of what a Webpack config can look like.

var Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

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')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer require api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

In your project root also create an assets folder. This folder will contain your JavaScript and other assets such as CSS. If you're using the above template, you can create this file called app.js inside a js folder inside assets, it only console logs something, but it will make clear if your Webpack setup is successful.

// assets/js/app.js
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import '../css/app.css';

// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';

console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

You can now also add some styling in app.css inside a css folder inside assets.

/* assets/css/app.css */
body {
    background-color: lightgray;
}

Any JavaScript files you want to direcctly call in yout Twig should be configured in your Webpack config.

Encore
    // It looks like this line inside the template
    .addEntry('app', './assets/js/app.js')

Inside your twig file you can now call the JavaScript in this way:

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

Your JavaScript needs to be compiled, for compilation you can run:

yarn encore dev

Remember you need to recompile your JS if you want to change the code.

You can also set a watcher which will automatically compile your JS for you.

yarn encore dev --watch

For production run

yarn encore production