Aide Laravel chergement de css et js
Hello !
J'ai installé la dernière version de Laravel (en mars 2021) sur mon ubuntu 20.04 avec docker et sail. Je suis un noob absolu en Laravel, et desireux de me former.
J'ai créé une appli (laratest) avec:
curl -s https://laravel.build/laratest | bash
Ensuite , j'ai suivi un tuto pour créer une page un peu plus sophistiquée en copiant un exemple BootStrap 4.0, page qui utilise des resources css et js.
J'ai donc créé des répertoires "css", "js" et "img" dans mon répertoire "laratest/storage/app/public" et j'y ai placé les fichiers css et js nécessaires. J'ai fait des liens symboliques de "laratest/public" vers "laratest/storage/app/public".
je les utilise dans la vue par :
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
(j'ai aussi essayé d'ajouter public/ dans le path, sans succès)
Ma page se charge, mais sans aucun formatage. Les outils de developpement de chrome m'indiquent que les fichiers css et js ne sont pas trouvés.
Le chemin généré dans le code source de la page sur chrome est "http://localhost/css/bootstrap.min.css". Si j'essaye de le copier dans le navigateur, j'obtiens un 404.
Comment faire pour que Laravel me génère les bons chemins pour mes css et js ??
4 réponses
Salut,
Tu as pas utilisé la bonne manière, storage/app/public sert à créer un lien symbolink vers public/storage avec la commande artisan storage:link, ce dossier sert à stocker les stockages public (upload par exemple). Tes assets doivent être dans public/. Le mieux est d'utiliser laravel-mix (inclut au projet) et d'appeler tes assets avec la fonction mix
Merci pour ta réponse Balsakup !
Je ne comprends pas bien ce que tu me dit, il me semble que c'est l'opposé de la doc de Laravel 8. Je copie le petit passage auquel je pense :
--
The Public Disk
The public disk included in your application's filesystems configuration file is intended for files that are going to be publicly accessible. By default, the public disk uses the local driver and stores its files in storage/app/public.
To make these files accessible from the web, you should create a symbolic link from public/storage to storage/app/public. Utilizing this folder convention will keep your publicly accessible files in one directory that can be easily shared across deployments when using zero down-time deployment systems like Envoyer.
--
J'ai essayé ce que tu recommande, mais ça ne marche pas non plus.
Le lien symbolique crée un lien symbolique storage dans le dossier public.
l'url d'accès de ton fichier devrait plutôt être http://localhost/storage/css/bootstrap.min.css
Mais comme la précisé @Balsakup, tes assets doivent être situés directement dans ton dossier laratest/public/
et non pas dans le dossier laratest/storage/public qui sert généralement pour d'autres types de fichiers (comme les fichiers téléchargés)
Si tu veux complètement charger tes assets avec Laravel Mix, le mieux est de:
- les placer dans le dossier laratest/resources/(css|js)/
- Les ajouter à la config présente dans le fichier laratest/webpack.mix.js
- Installer les packages node nécessaire (npm install), et ensuite lancer la commande dev (npm run dev) pour que ceux-ci soient automatiquement placés dans ton dossier public (avec un manifest en plus :) )
- Charger ton css et ton js avec le helper "mix" dans tes fichiers Blade, ex: <link href="{{mix('css/bootstrap.min.css')}}" rel="stylesheet">
Pour plus d'info sur laravel-mix : https://laravel.com/docs/8.x/mix
J'ai finalement trouvé ce qui n'allait pas. J'avais fait des liens symbolique avec un chemin absolu, en remplaçant par des liens relatifs, tout fonctionne parfaitement.
Merci à ceux qui m'on répondu pour les infos utiles