Discussion :

[Jérémie17]

Bonjour,

j'essaie d'installer un bon 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 souhaite pouvoir utiliser symfony 4.2 avec du css (bootstrap) 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

[dukoid]

en fait Encore utilise webpack qui utilise nodejs

ce sont 2 outils qui servent uniquement à gérer les ressources, qui donc au final permet d'avoir un des fichiers css et des fichiers js pour la PROD
en gros, ces outils sont là mais n'est pas utilisé en prod pour le site..

pour jQuery c'est pourtant bien expliqué !

[Jérémie17]

Merci pour la réponse Dukoid.

J'aimerais allé au plus simple, idéalement sans utiliser Encore, j'ai vu un tutoriel parlant de asset.
composer require asset
avec dans le base.html.twig.

Code Twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        {% block stylesheets %}  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.css') }}¨>  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/styles.css') }}¨>  
        {% endblock %}

et

Code Twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
        {% block javascripts %}  
            <script src="{{ asset('js/jquery-3.4.0.min.js') }}" type="text/javascript"></script>  
        {% endblock %}

Est-ce possible ?
Merci

[dukoid]

tout est possible.

faut mettre tes fichiers dans /web/css/... /web/js/...

[benjamin-]

hello c'est tout a fait possible par contre les fichiers statiques sont a mettre dans le dossier public qui est présent dans ton projet a la racine dans ton cas :

/public/css/bootstrap.css
/public/css/styles.css

/public/js/jquery-3.4.0.min.js

Puis tu fait appel avec {{ asset() }} dans ton template twig comme dans ton exemple par contre ne pas ajouter "public" dans le chemin du css ou js

Code Twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
{% block stylesheets %}  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.css') }}¨>  
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/styles.css') }}¨>  
{% endblock %}

[Jérémie17]

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 :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<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 :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

En fait il ne semble pas trouver les fichiers css...

En vous remerciant,

Jérémie

[benjamin-]

Bonjour comment servez vous votre site avec quelle méthode ? et mettez votre code source de la page ou vous utilisez les asset merci d'avance

[Jérémie17]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

composer require asset

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

symfony server:start

base.html.twig

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap.min.css') }}¨>
            <link rel=¨stylesheet¨ type=¨text/css¨ href=¨{{ asset('css/bootstrap-theme.min.css') }}¨>
            {#<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">#}
        {% endblock %}
 
    </head>
 
    <body>
        {% block body %}
 
        {% endblock %}
        {% block javascripts %}
            <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/popper.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
        {% endblock %}
    </body>
</html>

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{% extends "base.html.twig" %}
 
{% block stylesheets %}
    {{ parent() }}
 
{% endblock %}
 
{% block title %}Réinitialisation du mot de passe{% endblock %}
 
{% block body %}
    <img src="{{ asset('img/logo.png') }}" alt="logo"/>
    <div class="container">
        <div class="row">
            <div class="line col-md-12"></div>
        </div>
        <br/>
 
        <form  class="form-horizontal" role="form" method="post" action="">
            <div class="row">
                <div class="col-lg-offset-4 col-lg-4 text-center">
                    <h3>Saisissez votre e-mail</h3>
                </div>
            </div>
 
            <div class="row">
                <div class="col-lg-offset-4 col-lg-4">
                    <div class="form-group">
                        <label for="lemail" class="sr-only">Adresse mail</label>
                        <input type="email" class="form-control" id="lemail" placeholder="Email" name="email">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-block " type="submit">Valider</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

[benjamin-]

Regarde du coté de l'encodage de tes " sur les fonctions assets ¨ => "

J'ai modifié le code

Bonne soirée

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
            <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-theme.min.css') }}">
            {#<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">#}
        {% endblock %}
 
    </head>
 
    <body>
        {% block body %}
 
        {% endblock %}
        {% block javascripts %}
            <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/popper.min.js') }}" type="text/javascript"></script>
            <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
        {% endblock %}
    </body>
</html>

[Jérémie17]

Bonjour Benjamin,
merci pour la réponse.
Effectivement, il y avait une problème de quote ".
Cela fonctionne maintenant,
Jérémie