05/02/2023

1. Webpack Encore

Lu 408 fois Licence Creative Commons

Webpack Encore

Pour tout ce qui concerne l'univers Front-End moderne (préprocesseurs CSS, frameworks JavaScript, packages, ...) on peut utiliser Webpack Encore.
Il sera nécessaire d'avoir NodeJS sur sa machine ainsi qu'un gestionnaire de paquet tel que Yarn ou NPM. Ce package facilite l'utilisation de Webpack et s'intègre spécifiquement avec Symfony puisqu'il est distribué sous forme de bundle.

Installez le bundle avec:

composer require encore

La recipe a installé le fichier de configuration du bundle, un dossier /assets/ qui contiendra tous nos fichiers Front-End, un fichier webpack.config.js pour configurer Webpack Encore, et un fichier de dépendances JavaScript package.json.
Installez les packages listés:

yarn install
# ou
npm install

Setup CSS/JS

Nous allons utiliser le framework CSS Bulma et la librairie d'icones Font Awesome:

yarn add bulma
yarn add @fortawesome/fontawesome-free
# ou
npm install bulma
npm install @fortawesome/fontawesome-free

Webpack Encore fonctionne avec un système d'"entrées", constituées d'un nom relié à un fichier JavaScript qui importera toutes les ressources nécessaires. On importera ensuites les fichiers générés des entrées choisies dans les templates.
Une entrée app est déjà configurée dans webpack.config.js à la ligne 23. Ajoutez une entrée base pour toute notre application:

.addEntry('app', './assets/app.js')
.addEntry('base', './assets/base.js')

Plus loin, activer le support pour Sass/SCSS en décommentant cette ligne:

// enables Sass/SCSS support
.enableSassLoader()

Le dossier /assets/ est déjà bien fourni mais nous allons ignorer son contenu, cela concerne l'initiative Symfony UX que nous ne verrons pas ici.
Créez le fichier /assets/base.scss qui va importer les styles des packages installés:

@import "~@fortawesome/fontawesome-free/css/all.min.css";

$primary: #5651ff;
@import "~bulma";

Puis le fichier /assets/base.js:

require('./base.scss');

Essayons désormais de compiler nos ressources front:

yarn dev
# ou
npm run dev

Note: utilisez yarn watch ou npm run watch pour recompiler à chaque modification.

Vous devriez avoir une erreur vous indiquant d'installer des dépendances supplémentaires. Installez-les puis recompilez:

yarn dev
[output]yarn run v1.22.17
[output]$ encore dev
[output]Running webpack ...
[output]
[output] DONE  Compiled successfully in 1049ms
[output]
[output]5 files written to public/build
[output]Entrypoint app [big] 653 KiB = runtime.js 14.5 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_da-03e5c3.js 615 KiB app.css 741 bytes app.js 22.3 KiB
[output]webpack compiled successfully
[output]Done in 2.09s.

Template Twig racine

Mettons à jour le fichier base.html.twig:

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
    <title>{% block title %}Bienvenue{% endblock %} | EventPlace</title>
    {{ encore_entry_link_tags('base') }}
    {{ encore_entry_script_tags('base') }}
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

On intègre les fichiers CSS et JS avec les fonctions encore_entry_link_tags() & encore_entry_script_tags(). Le fonctionnement est assez simple: lorsqu'on compile, Webpack va stocker les fichiers dans /public/build/ de manière à ce qu'ils soient accessibles depuis le web. Parmi ces fichiers se trouve entrypoints.json qui liste les fichiers CSS/JS à importer, par entrée.

Créons maintenant un nouveau template Twig nommé _template.html.twig qui servira de base pour toutes les pages publiques du site. Il contiendra le menu:

{% extends "base.html.twig" %}

{% block body %}
    <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="#">
                <p class="subtitle is-4 has-text-primary">
                    <i class="fab fa-erlang"></i><b>ventPlace</b>
                </p>
            </a>

            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="#">
                    Agenda
                </a>
            </div>

            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <a class="button is-primary" href="#">
                            <strong>Inscription</strong>
                        </a>
                        <a class="button is-light" href="#">
                            Connexion
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    {% block content '' %}
{% endblock %}

Puisqu'on utilise le bloc body, on déclare un nouveau bloc content pour que les futures templates puissent ajouter le contenu des pages.

Pour que la page d'accueil vous affiche ce menu, changez le template parent dans le bloc extends du fichier home/index.html et utilisez le nouveau bloc content à la place de body, sinon vous écraserez son contenu et perdrez donc le menu.

0. Twig
2. Controlleurs: autowiring ...