Discussion :

[Robin_Gouverner]

Bonjour,
mon site est hébergé chez infomaniak, toute la partie back-end fonctionne à merveille, mais comme indiqué dans le titre, le css et le js ne chargent pas. C'est surement du à un problème d'utilisation de webpack que je ne maitrise pas très bien. Dans la console de débogage j'ai ce type d'erreurs :

GET http://localhost:8080/build/app.css net::ERR_CONNECTION_REFUSED

Pourquoi localhost:8080 ? Alors que je suis plus en local ?
Pour info, mon offre d'hébergement chez infomaniak ne me permet pas d'installer node.js sur le serveur à priori, j'ai donc buildé mes assets en local avant de les uploader sur le serveur de prod.
J'éspère de tout coeur que vous pourrez éclairer ma lanterne, j'ai beau chercher je ne comprend pas POURQUOI cette erreur, en local sa fonctionnait très bien. Voila mon webpack.config.js :

Code :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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('change', './assets/js/change.js')
    .addEntry('bibliologo', './assets/img/bibliologo.png')
    .addEntry('html-5', './assets/img/html-5.png')
    .addEntry('css', './assets/img/css.png')
    .addEntry('javascript', './assets/img/javascript.png')
    .addEntry('php', './assets/img/php.png')
    .addEntry('symfony', './assets/img/symfony.png')
    .addEntry('mysql', './assets/img/mysql.png')
    //.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
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        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 req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;
 
module.exports = Encore.getWebpackConfig();

et mon .babelrc.json ( au cas ou ) :

Code :

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
{
    "plugins": [
      ["prismjs", {
          "languages": [
            "php",
            "css",
            "javascript",
            "markup",
            "twig",
            "sql"
          ],
          "plugins": ["line-numbers"],
          "theme": "okaidia",
          "css": true
      }]
    ]
  }

mon fichier 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Le BiblioCode est un blog contenant des articles sur le développement web.">
        <meta name="keywords" content="développement web, symfony, php, twig, html, css, sql, javascript">
        <meta name="author" content="Robin Gouverner">
        <meta name="language" content="fr">
        <meta name="robots" content="index,follow">
        <title>{% block title %}BiblioCode{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/spacelab/bootstrap.min.css">
        <link rel="stylesheet" href="{{asset('build/app.css')}}">
        <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Orbitron" />
        {{ encore_entry_link_tags('app') }}
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="nav-link" href="{{ path('home') }}"><img src="{{ asset('build/images/bibliologo.png') }}" alt="logo" id="logo"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
 
                    <div class="collapse navbar-collapse" id="navbarColor03">
                      <ul class="navbar-nav mr-auto">
 
                        <li class="nav-item">
                          <a class="btn btn-outline-primary" id="a2" href="{{ path('security_registration') }}">Créer un compte</a>
                        </li>
                        <li class="nav-item">
                          <a class="btn btn-outline-warning" id="a3" href="{{ path('search') }}">Faire une recherche</a>
                        </li>
 
                        {% if is_granted('ROLE_ADMIN') %}
                        <li class="nav-item">
                            <a class="btn btn-outline-info" id="a3" href="{{ path('create') }}">Créer un article</a>
                          </li>
                        {% endif %}
                      </ul>
 
                    </div>
 
                    {% if app.user %}
 
                    <div class="userInfo">
                      <p class="statut" id="helloUser">Bienvenue <strong>{{ app.user.username }}</strong></p>
                    </div>
 
                    {% endif %}
 
                    {% if app.user %}
 
                    <a href="{{ path('app_logout') }}" class="btn btn-secondary">déconnexion</a>
 
                    {% else %}
 
                    <div class="log">
                    <form action={{ path('app_login') }} method="post" class="headFormLogin">
 
                      <!--<label for="inputEmail" class="sr-only">Email</label>-->
                      <input type="email" name="email" value="{{ last_username }}" id="inputEmailHeader" class="form-control" placeholder="Email" required autofocus>
                      <!--<label for="inputPassword" class="sr-only">Password</label>-->
                      <input type="password" name="password" id="inputPasswordHeader" class="form-control" placeholder="Mot de passe" required>
 
                      <input type="hidden" name="_csrf_token"
                             value="{{ csrf_token('authenticate') }}"
                      >
 
                      {#
                          Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
                          See https://symfony.com/doc/current/security/remember_me.html
 
                          <div class="checkbox mb-3">
                              <label>
                                  <input type="checkbox" name="_remember_me"> Remember me
                              </label>
                          </div>
                      #}
 
                      <button class="btn btn-primary" type="submit" id="headerButtonToSubmit">
                          Connexion
                      </button>
                      <div>
                    <a href="{{ path('change') }}" id="forgetPassword">mot de passe oublié ?</a>
                    </div>
                  </form>
                  </div>
                  {% endif %}
              </nav>
 
              {% for message in app.flashes('erreur') %}
              <div class="alert alert-dismissible alert-danger">
                  <button type="button" class="close" data-dismiss="alert">&times;</button>
                  {{ message }}
              </div>
              {% endfor %}
 
              {% for message in app.flashes('success') %}
              <div class="alert alert-dismissible alert-success" style="margin-bottom: 0;">
                  <button type="button" class="close" data-dismiss="alert">&times;</button>
                  {{ message }}
              </div>
              {% endfor %}
 
 
        {% block body %}{% endblock %}
 
        <footer></footer>
        <script src="{{ asset('build/app.js') }}"></script>
        {{ encore_entry_script_tags('app') }}
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        {% block javascripts %}{% endblock %}
    </body>
</html>

Je regarde pour comprendre l'erreur, et sa serais un problème de serveur, sachant qu'en dev, j'utilisais npm run dev-server pour faire tourner webpack encore. Le problème pourrait il venir de la ? Il n'y a pas une manip à faire pour le faire tourné en prod ? Genre configurer l'environnement d'execution de webpack ? J'ai essayé mais sa n'a rien donné.

[PhiMau]

Salut,

Qu'est ce que tu entends par problème de serveur ?

Je fais comme toi en dev j'utilise la commande "npm run dev-server", et ça ne pose aucun soucis pour passer en prod.
Pour build avant de balancer sur ton serveur tu as bien fait un "npm run build" ??

Quand tu affiche le code source, tu vois le chemin de tes fichiers CSS / JS ? Tu as cliqué dessus pour voir si ils sont accessibles ? (si tu vois un lien du style "<script src="127.0.0.1....")

[Robin_Gouverner]

Salut phimau, merci pour ta réponse. Alors pour passer en prod j'avais fait : ./node_modules/.bin/encore production ( comme indiqué dans la doc symfony ), c'est différent de npm run build ?
et dans le code source quand j'essaye d'accéder a l'image du logo par exemple ( http://localhost:8080/build/images/b...o.a9201e68.png ) il me dit site inaccessible ( forcément c'est encore localhost ). C'est sa que j'appelle un problème de serveur, c'est que je devrais avoir le nom de domaine au lieu de localhost je pense.
EDIT : OUIIIII merci t'est un tueur phimau, sa fonctionne, en fait j'avais préparé la mise en production mais je l'avais pas builder. Merci pour tout ta refait ma journée la. je passe en résolu

[PhiMau]

Ravi que ça fonctionne pour toi

Bon courage !