Problème de compréhension avec collectstatic et npm run build

Bonjour, j'ai un soucis de compréhension avec le collectstatic et sa relation avec npm run build. J'ai un projet django où j'utilise tailwind et daisyui que j'ai pu utiliser avec django-tailwind qui me créé une app 'theme'. Pour installer daisyui et tailwind je fais des simples npm install à l'intérieur de theme/static_src et par la suite je fais npm run build. Mais lorsque je suis en production et que je fais python manage.py collectstatic, tailwind et daisyui ne sont pas fonctionnels.

Salut Yanis ! :)

Tu aurais un repo stp à partager ?

Merci d'avance

Ah oui, j'y ai pas pensé merci ! https://github.com/yanis-san/institut-torii

Re ! :)

Mon projet actuel :

Ton repo :

Moi j'ai un static/css/dist/style.css .

Et quand on regarde ce qu'a collecté django, ton css est quasi vide. Dans ton repo tu n'aurais pas exclu le css build par tailwind ?

Ah oui ! J'avais exclu le dist dans mon gitignore... J'ai compilé les fichiers css et ça marche pour moi en local ! Maintenant est-ce qu'on fait le collectstatic avant de le mettre en prod ou après ? Et est-ce que j'ai besoin de mettre ces deux chemins ( qui correspondent à mon projet) pour faire le collectstatic ?

STATICFILES_DIRS = [
    BASE_DIR / 'static',
    BASE_DIR / 'theme' / 'static_src' / 'src', 
]

Mais rien n'y fait sur python anhywhere quand je déploie avec les bons fichiers statiques pourtant, le collectstatic ne change rien... Voici les logs :

2024-09-08 14:18:01 Not Found: /static/css/dist/styles.css
2024-09-08 14:18:01 Not Found: /static/css/style.css
2024-09-08 14:18:01 Not Found: /static/css/dist/styles.css
2024-09-08 14:18:01 Not Found: /static/img/logo_horizontal.png
2024-09-08 14:18:01 Not Found: /static/img/hero.jpg
2024-09-08 14:18:01 Not Found: /static/js/script.js
2024-09-08 14:18:01 Not Found: /images/logo_verticale.png
2024-09-08 14:18:19 Not Found: /static/css/dist/styles.css
2024-09-08 14:18:19 Not Found: /static/css/dist/styles.css
2024-09-08 14:18:19 Not Found: /static/css/style.css
2024-09-08 14:18:19 Not Found: /static/img/logo_horizontal.png
2024-09-08 14:18:19 Not Found: /static/img/hero.jpg
2024-09-08 14:18:19 Not Found: /static/js/script.js
2024-09-08 14:18:20 Not Found: /static/js/script.js
2024-09-08 14:18:23 Not Found: /static/css/dist/styles.css
2024-09-08 14:18:23 Not Found: /static/css/dist/styles.css
2024-09-08 14:18:23 Not Found: /static/css/style.css
2024-09-08 14:18:23 Not Found: /static/img/logo_horizontal.png
2024-09-08 14:18:23 Not Found: /static/js/script.js
2024-09-08 14:18:23 Not Found: /static/js/script.js
2024-09-08 14:18:23 Not Found: /contact/images/logo_verticale.png
2024-09-08 14:21:01 Not Found: /static/css/dist/styles.css
2024-09-08 14:21:02 Not Found: /static/css/dist/styles.css
2024-09-08 14:21:02 Not Found: /static/css/style.css
2024-09-08 14:21:02 Not Found: /static/img/logo_horizontal.png
2024-09-08 14:21:02 Not Found: /static/js/script.js

Update ! J'ai réussi à charger mon tailwind (enfin) et j'avais beaucoup d'erreurs : le dist dans gitignore, une erreur de frappe dans le chemin de staticfiles dans pythonanywhere...

""Maintenant est-ce qu'on fait le collectstatic avant de le mettre en prod ou après ? Et est-ce que j'ai besoin de mettre ces deux chemins ( qui correspondent à mon projet) pour faire le collectstatic ?""

Je le fais que en production le collect. Par contre pas besoin de modifier les chemins :)

Je pense avoir compris ce point là ! C'est la compilation des fichiers CSS qu'on fait avant pour ne pas avoir besoin de Npm en production et le collectstatic si j'ai bien compris se fait après ça. Maintenant pourquoi forcément après ? Je ne sais pas si le Debug=False n'a pas un lien avec ça.

Sinon update : ça fonctionne sur python anywhere et j'ai reussi à faire fonctionner tailwind et daisyUi mais pas sur Cpanel où ya le fichier .hacces et où je n'arrive pas à avoir mes staticfiles :) j'ai donc utilisé whitenoise même si c'est pas conseillé dans mon cas...

Salut Yanis !

Content de voir que ça fonctionne déjà sur PythonAnywhere ! :) Pour faire un petit récapitulatif sur le fil de discussion :

Effectivement, tu compiles tes fichiers CSS avant de déployer ton application en production pour éviter d'avoir besoin de npm sur ton serveur de production. Le but est de générer tous les fichiers statiques (comme le CSS) nécessaires avant le déploiement pour qu'ils soient prêts à être servis.

Généralement, collectstatic est exécuté après que tout soit prêt du côté des fichiers statiques (donc après la compilation des CSS).

• En production, tu utilises DEBUG=False, ce qui signifie que Django va servir les fichiers statiques de manière optimisée. collectstatic rassemble tous tes fichiers statiques en un seul endroit (STATIC_ROOT) pour qu'ils puissent être servis de manière efficace.

• Intégrité des fichiers : Si tu exécutes collectstatic avant de compiler tes fichiers CSS, les fichiers requis ne seront pas présents, et l'opération collectstatic sera incomplète.

Pour les chemins dans STATICFILES_DIRS, ces chemins te permettent d'indiquer où Django doit chercher les fichiers statiques avant de les collecter. Les chemins que tu as sont corrects et tu n'as effectivement pas besoin de les modifier fréquemment à moins que la structure de ton projet change.

Il est important de noter que DEBUG=False en production signifie que Django va utiliser les fichiers statiques collectés. Donc si collectstatic n'a pas été exécuté après que tous tes fichiers statiques soient au bon endroit (compilés, etc.), tu risques de rencontrer des erreurs 404 pour ces fichiers.

J'ai parfaitement bien compris ! Merci pour l'éxplication