frontend : mise en forme avec Encore

documentation Symfony

Le principal objectif est de vous faire installer Bootstrap. Il est possible d’utiliser des CDN (beaucoup de tutoriels utilisent cette méthode car elle est beaucoup plus simple).

Lors de ce TP, l’idée est de vous faire installer le Bundle Encore qui facilite beaucoup la tâche lors du développement du front-office avec le CSS, JavaScript. Le Bundle Encore facilite aussi l’utilisation d’un framework front-end comme vueJs.

Ce bundle installe webpack qui permet de convertir des fichiers sources JavaScript en un seul fichier minifier avec un format JavaScript (version EcmaScript) parfois plus ancien pour être compréhensible par un maximum de navigateurs.

préparation

Installer un nouveau projet (l’installation de Encore augmente beaucoup le nombre de fichiers du projet (répertoire node_modules)).

composer create-project symfony/website-skeleton TP_symf_base_encore
cd TP_symf_base_encore
composer req server   --dev

ou

curl -sS https://getcomposer.org/installer | php
php composer.phar create-project symfony/website-skeleton TP_symf_base_encore
mv composer.phar TP_symf_base_encore
cd TP3_symf/
php composer.phar require symfony/web-server-bundle   --dev

machine perso.

Dans la documentation de Symfony , les exemples utilisent yarn plutôt que npm

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
yarn -v

Installation de Encore

composer req encore
# ou
php composer.phar require encore

Cette installation crée un dossier assets pour y placer votre code JavaScript et css(scss) et un fichier webpack.config.js pour configurer la compilation(transformation) des fichiers JavaScript et scss dans le dossier public


Partie JavaScript : cette installation augmente beaucoup le nombre de fichiers dans le projet.

# yarn add sass-loader node-sass --dev #ancienne installation
yarn add @symfony/webpack-encore --dev

configuration

En suivant le premier exemple de la documentation de symfony

$color_head: #FFF;

body {
  background: #C21F39;
  h1 {
    color: $color_head;
  }
  h2 {
    color: lighten( $color_head, 30% );
  }
}
    .setOutputPath('public/build/')
    .addEntry('js/app', './assets/js/app.js')          
                       // créer un fichier public/build/js/app.js
    .addStyleEntry('css/app', './assets/css/app.scss')  
                       // créer un fichier public/build/css/app.css

    // uncomment if you use Sass/SCSS files
    .enableSassLoader()

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()
{# base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}TP test Encore{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
        {% endblock %}
    </head>
    <body>
        {% block body %}
            <h2>Page base.html.twig</h2>
        {% endblock %}
        {% block javascripts %}
            <script src="{{ asset('build/js/app.js') }}"></script>
        {% endblock %}
    </body>
</html>
// assets/js/greet.js
module.exports = function(name) {
    return `Yo yo ${name} - Bienvenue sur Encore!`;
};

puis créer un fichier assets/js/app.js, avec comme contenu :

// assets/js/app.js

// loads the jquery package from node_modules
const $ = require('jquery');

// import the function from greet.js (the .js extension is optional)
// ./ (or ../) means to look for a local file
var greet = require('./greet');

$(document).ready(function() {
    $('body').prepend('<h1>'+greet('john')+'</h1>');
});
<?php
namespace App\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\Routing\Annotation\Route;
use Twig\Environment;

class HomeController extends Controller
{
    /**
     * @Route("/", name="home.index", methods={"GET"})
     */
    public function index(Request $request, Environment $twig): Response
    {
        return new Response($twig->render('base.html.twig'));
    }
}
yarn run encore dev --watch

vous verrez apparaître le message suivant :

#  Error: Install sass-loader & node-sass to use enableSassLoader()
yarn add sass-loader node-sass --dev

Installer sass-loader et node-sass avec la commande ci dessus.


Puis un autre message d’erreur apparaît avec la commande yarn run encore dev --watch. Utiliser la commande suivante pour installer jquery : yarn add jquery --dev (la commande proposée par le terminal ne fonctionne (fonctionnait?) pas bien), solution possible :

# puis une erreur avec jquery
## npm install --save jquery
# utiliser plutôt la commande
yarn add jquery --dev
yarn add webpack-notifier --dev
 .enableBuildNotifications()


$color_head: #FF1;
yarn run encore production

bootstrap

https://symfony.com/doc/current/frontend/encore/bootstrap.html

######### yarn add bootstrap-sass --dev
yarn add bootstrap --dev
        {% block body %}
            <h2>Page base.html.twig</h2>
            <button href="#" class="btn btn-primary"> bouton </button>
            <a href="#" class="btn btn-primary" >bouton</a>
            <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">bouton Toggle popover</a>
        {% endblock %}
yarn run encore dev --watch
// customize some Bootstrap variables
$primary: darken(#ca4ba6, 20%);
$info: green;

// the ~ allows you to reference things in node_modules
@import "~bootstrap/scss/bootstrap";


Erreur : le js de bootstrap ne fonctionne pas : pas de fichier popup


// JS is equivalent to the normal "bootstrap" package
// no need to set this to a variable, just require it
require('bootstrap');

// or you can include specific pieces
// require('bootstrap/js/dist/tooltip');
// require('bootstrap/js/dist/popover');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});
## yarn add popper --dev  ## ne fonctionne pas
npm install --save popper.js
yarn add @symfony/webpack-encore --dev
yarn run encore dev --watch






ANNEXES