klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-10 11:59:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Completely integrate wepack in django

Browse Source 
* Migrate alpine
* Migrate jquery and jquery-ui
* Migrate shorten
* Add babel for javascript
* Introduce staticfiles django app
* Only bundle -index.js files in static/webpack
* Unify scss and webpack generated files
* Convert scss calls to static
* Add --clear-generated option to collectstatic
* Fix docs warnings
This commit is contained in:
Antoine Bartuccio
2024-09-17 23:42:05 +02:00
committed by Bartuccio Antoine
parent 71c96fdf62
commit 655d72a2b1
86 changed files with 6170 additions and 1268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/explanation/technos.md
View File

@ -366,3 +366,35 @@ dans la CI : `djHTML`.
En utilisant conjointement Ruff et djHTML,
on arrive donc à la fois à formater les fichiers
Python et les fichiers relatifs au frontend.
### Npm
[Utiliser npm](https://docs.npmjs.com/cli/v6/commands/npm/)
Npm est un gestionnaire de paquets pour Node.js. C'est l'un des gestionnaires les plus répandus sur le marché et est très complet et utilisé.
Npm possède, tout comme Poetry, la capacité de locker les dépendances au moyen d'un fichier `.lock`. Il a également l'avantage de presque toujours être facilement disponible à l'installation.
Nous l'utilisons ici pour gérer les dépendances JavaScript. Celle-ci sont déclarées dans le fichier `package.json` situé à la racine du projet.
### Webpack
[Utiliser webpack](https://webpack.js.org/concepts/)
Webpack est un bundler de fichiers static. Il nous sert ici à mettre à disposition les dépendances frontend gérées par npm.
Il sert également à intégrer les autres outils JavaScript au workflow du Sith de manière transparente.
Webpack a été choisi pour sa versatilité et sa popularité. C'est un des plus anciens bundler et il est là pour rester.
Le logiciel se configure au moyen du fichier `webpack.config.js` à la racine du projet.
### Babel
[Babel](https://babeljs.io/)
Babel est un outil qui offre la promesse de convertir le code JavaScript moderne en code JavaScript plus ancien sans action de la part du développeur. Il permet de ne pas se soucier de la compatibilité avec les navigateurs et de coder comme si on était toujours sur la dernière version du langage.
Babel est intégré dans Webpack et tout code bundlé par celui-ci est automatiquement converti.
Le logiciel se configure au moyen du fichier `babel.config.json` à la racine du projet.

55
docs/howto/statics.md Normal file
View File

@ -0,0 +1,55 @@
## C'est quoi les fichiers statics ?
Les fichiers statics sont tous les fichiers qui ne sont pas générés par le backend Django et qui sont téléchargés par le navigateur.
Cela comprend les fichiers css, javascript, images et autre.
La [documentation officielle](https://docs.djangoproject.com/fr/4.2/howto/static-files/) est très compréhensive.
Pour faire court, dans chaque module d'application il existe un dossier `static`
où mettre tous ces fichiers. Django se débrouille ensuite pour aller chercher
ce qu'il faut à l'intérieur.
Pour accéder à un fichier static dans un template Jinja il suffit d'utiliser la fonction `static`.
```jinja
{# Exemple pour ajouter sith/core/static/core/base.css #}
<link rel="stylesheet" href="{{ static('core/base.css') }}">
```
## L'intégration des scss
Les scss sont à mettre dans le dossier static comme le reste.
Il n'y a aucune différence avec le reste pour les inclure,
le système se débrouille automatiquement pour les transformer en `.css`
```jinja
{# Exemple pour ajouter sith/core/static/core/base.scss #}
<link rel="stylesheet" href="{{ static('core/style.scss') }}">
```
## L'intégration webpack
Webpack est intégré un peu différement. Le principe est très similaire mais
les fichiers sont à mettre dans un dossier `static/webpack` de l'application à la place.
Pour accéder au fichier, il faut utiliser `static` comme pour le reste mais en ajouter `webpack/` comme prefix.
```jinja
{# Exemple pour ajouter sith/core/webpack/alpine-index.js #}
<script src="{{ static('webpack/alpine-index.js') }}" defer></script>
```
!!!note
Seuls les fichiers se terminant par `index.js` sont exportés par webpack.
Les autres fichiers sont disponibles à l'import dans le JavaScript comme
si ils étaient tous au même niveau.
## Comment ça fonctionne le post processing ?
Le post processing est géré par le module `staticfiles`. Les fichiers sont
compilés à la volée en mode développement.
Pour la production, ils sont compilés uniquement lors du `./manage.py collectstatic`.
Les fichiers générés sont ajoutés dans le dossier `sith/generated`. Celui-ci est
ensuite enregistré comme dossier supplémentaire à collecter dans Django.

1
docs/reference/staticfiles/apps.md Normal file
View File

@ -0,0 +1 @@
::: staticfiles.apps.StaticFilesConfig

1
docs/reference/staticfiles/finders.md Normal file
View File

@ -0,0 +1 @@
::: staticfiles.finders

1
docs/reference/staticfiles/processors.md Normal file
View File

@ -0,0 +1 @@
::: staticfiles.processors

1
docs/reference/staticfiles/storage.md Normal file
View File

@ -0,0 +1 @@
::: staticfiles.storage

11
docs/tutorial/install.md
View File

@ -45,7 +45,7 @@ cd /mnt/<la_lettre_du_disque>/vos/fichiers/comme/dhab
!!!note
A ce stade, si vous avez réussi votre installation de `WSL` ou bien qu'il
À ce stade, si vous avez réussi votre installation de `WSL` ou bien qu'il
était déjà installé, vous pouvez effectuer la mise en place du projet en suivant
les instructions pour votre distribution.
@ -70,7 +70,7 @@ cd /mnt/<la_lettre_du_disque>/vos/fichiers/comme/dhab
Puis installez les autres dépendances :
```bash
sudo apt install build-essential libssl-dev libjpeg-dev zlib1g-dev python-dev \
sudo apt install build-essential libssl-dev libjpeg-dev zlib1g-dev python-dev npm \
libffi-dev python-dev-is-python3 pkg-config \
gettext git pipx
@ -84,7 +84,7 @@ cd /mnt/<la_lettre_du_disque>/vos/fichiers/comme/dhab
sudo pacman -S python
sudo pacman -S gcc git gettext pkgconf python-poetry
sudo pacman -S gcc git gettext pkgconf python-poetry npm
```
=== "macOS"
@ -93,7 +93,7 @@ cd /mnt/<la_lettre_du_disque>/vos/fichiers/comme/dhab
Il est également nécessaire d'avoir installé xcode
```bash
brew install git python pipx
brew install git python pipx npm
pipx install poetry
# Pour bien configurer gettext
@ -114,6 +114,9 @@ cd sith3
# Création de l'environnement et installation des dépendances
poetry install
# Configuration du frontend
npm install
# Activation de l'environnement virtuel
poetry shell

62
docs/tutorial/structure.md
View File

@ -66,17 +66,19 @@ sith3/
│ └── ...
├── antispam/ (23)
│ └── ...
├── staticfiles/ (24)
│ └── ...
│
├── .coveragerc (24)
├── .envrc (25)
├── .coveragerc (25)
├── .envrc (26)
├── .gitattributes
├── .gitignore
├── .mailmap
├── .env.exemple
├── manage.py (26)
├── mkdocs.yml (27)
├── manage.py (27)
├── mkdocs.yml (28)
├── poetry.lock
├── pyproject.toml (28)
├── pyproject.toml (29)
└── README.md
```
</div>
@ -114,16 +116,19 @@ sith3/
19. Application principale du projet, contenant sa configuration.
20. Gestion des stocks des comptoirs.
21. Gestion des cotisations des utilisateurs du site.
22. Fonctionalitées pour gérer le spam.
23. Gestion des trombinoscopes.
24. Fichier de configuration de coverage.
25. Fichier de configuration de direnv.
26. Fichier généré automatiquement par Django. C'est lui
22. Outil pour faciliter la fabrication des trombinoscopes de promo.
23. Fonctionnalités pour gérer le spam.
24. Gestion des statics du site. Override le système de statics de Django.
Ajoute l'intégration du scss et de webpack
de manière transparente pour l'utilisateur.
25. Fichier de configuration de coverage.
26. Fichier de configuration de direnv.
27. Fichier généré automatiquement par Django. C'est lui
qui permet d'appeler des commandes de gestion du projet
avec la syntaxe `python ./manage.py <nom de la commande>`
27. Le fichier de configuration de la documentation,
28. Le fichier de configuration de la documentation,
avec ses plugins et sa table des matières.
28. Le fichier où sont déclarés les dépendances et la configuration
29. Le fichier où sont déclarés les dépendances et la configuration
de certaines d'entre elles.
@ -175,13 +180,16 @@ comme suit :
│ └── ...
├── templates/ (2)
│ └── ...
├── api.py (3)
├── admin.py (4)
├── models.py (5)
├── tests.py (6)
├── schemas.py (7)
├── urls.py (8)
└── views.py (9)
├── static/ (3)
│ └── webpack/ (4)
│ └── ...
├── api.py (5)
├── admin.py (6)
├── models.py (7)
├── tests.py (8)
├── schemas.py (9)
├── urls.py (10)
└── views.py (11)
```
</div>
@ -190,17 +198,19 @@ comme suit :
de mettre à jour la base de données.
cf. [Gestion des migrations](../howto/migrations.md)
2. Dossier contenant les templates jinja utilisés par cette application.
3. Fichier contenant les routes d'API liées à cette application
4. Fichier de configuration de l'interface d'administration.
3. Dossier contenant les fichiers statics (js, css, scss) qui sont récpérée par Django.
4. Dossier contenant du js qui sera process avec webpack. Le contenu sera automatiquement process et accessible comme si ça avait été placé dans le dossier `static/webpack`.
5. Fichier contenant les routes d'API liées à cette application
6. Fichier de configuration de l'interface d'administration.
Ce fichier permet de déclarer les modèles de l'application
dans l'interface d'administration.
5. Fichier contenant les modèles de l'application.
7. Fichier contenant les modèles de l'application.
Les modèles sont des classes Python qui représentent
les tables de la base de données.
6. Fichier contenant les tests de l'application.
7. Schémas de validation de données utilisés principalement dans l'API.
8. Configuration des urls de l'application.
9. Fichier contenant les vues de l'application.
8. Fichier contenant les tests de l'application.
9. Schémas de validation de données utilisés principalement dans l'API.
10. Configuration des urls de l'application.
11. Fichier contenant les vues de l'application.
Dans les plus grosses applications,
ce fichier peut être remplacé par un package
`views` dans lequel les vues sont réparties entre