[symfony] Le css et le js ne chargent pas en production
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 :
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:
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:
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:
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">×</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">×</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é.
