Symfony 4.2 Asset ... Encore ...

Ponce
PHP Symfony

Bonjour,

j'essaie d'intaller unbon environnement de développement (symfony) mais impossible de comprendre l'histoire des assets.
Même avec la doc officielle, je ne trouve pas cela clair.

Je suis pouvoir utiliser symfony 4.2 avec du css et du javascript (jquery).
Je tombe sur plusieurs tutoriels mais tous disent des choses différentes.

Je souhaite pouvoir utiliser les dernières méthodes mais sans être obliger d'utiliser des technologies "imposées"
Dans la doc officielle il est recommandé d'utiliser "Encore" pour la gestion des assets.
Sauf qu'il est demandé d'installer NodeJs au préalable. Cependant, je ne souhaite pas utiliser Nodejs, mais seulement jquery.

Ensuite, est-il possible de se passer de Encore ?
Faut-il installer "asset" (composer require asset) obligatoirement avec Encore?
Peut-on utiliser uniquement "asset" ?

Pas moyen de trouver une explication claire.

Si vous pouviez m'éclaircir un peu plus ?
En vous remerciant
Jérémie

9 réponses

Digivia

Hello,

Webpack Encore est un composant proposé par Symfony. Il n'est pas obligatoire, tu peux gérer tes assets par toi même.
Encore permet une configuration rapide et simplifiée de webpack, par exemple pour minifier, compiler du saas, transpiler du js es6, etc.
Pour fonctionner, webpack utilise nodejs comme support. C'est npm qui va gérer les packages, un peu comme composer côté Symfony.
Une fois qu'on a mis un pied dedans, on ne s'en passe plus.
Si tu démarres avec Symfony, et que tu n'est pas super à l'aise avec tout ça, commences sans Webpack, tu pourras y venir plus tard.
Il te suffit donc de placer tes js et css dans le répertoire public et d'y accéder dans twig via la balise {{ asset('path/to/my/asset') }}...

Ponce
Auteur

Bonjour Digivia,
merci pour ton explication.
J'ai essayé avec la fonction asset. (symfony require asset)
Dans mon fichier twig :

{% block stylesheets %}
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.min.css') }}¨>
{% endblock %}
<body>
        {% block body %}

        {% endblock %}
{% block javascripts %}
            <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/popper.min.js') }}" type="text/javascript"></script>
{% endblock %}
</body>

Avec les fichiers placés dans /public/css et /public/js

Mais je n'ai aucun résultat
Merci

Digivia

Quel est l'erreur renvoyée? Ou que cela donne-t-il dans le code html généré?

Lartak

Bonjour.
Tu as déjà un problème d'inversion d'ordre de librairies, soit entre Bootstrap et Popper.
La librairie Popper doit être chargée avant celle de Bootstrap.
Tu devrais d'ailleurs avoir un message d'erreur dans ta console par rapport à ça, si tu utilises un composant de Bootstrap qui a besoin de Popper pour fonctionner.
Soit par exemple :

  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates
Ponce
Auteur

Bonjour,
merci pour vos réponses.
J'ai bien fait tout ce que vous m'avez indiqué (il me semble), mais toujours aucun résultat.
Voici ce que j'obtiens en visionnant le code source de la page HTML :

<link rel=¨stylesheet¨ type=¨text/css¨ href=¨/css/bootstrap.min.css¨>
<link rel=¨stylesheet¨ type=¨text/css¨ href=¨/css/bootstrap-theme.min.css¨>

Et quand je clique sur un fichier css j'obtiens :

<title>    No route found for "GET /%C2%A8/css/bootstrap.min.css%C2%A8" (404 Not Found)  </title>

En vous remerciant,

Jérémie

Lartak

Est-ce que tu as installé asset via Composer ?
Car si tu veux utiliser la fonction asset il te faut installer le package.

Ponce
Auteur

J'avais fait

composer require asset
Lartak

D'après la documentation, c'est plutôt : 

composer require symfony/asset
Ponce
Auteur

Bonjour Lartak,
apparemment il y avait un problème de quotation " dans mon code source.
Maintenant cela fonctionne.

Pour composer, les deux commandes fonctionne également :

composer require asset
composer require symfony/asset

Merci
Jérémie