Différences

Ci-dessous, les différences entre deux révisions de la page.

--- front:architecture [2025/09/24 16:32] – paolo
+++ front:architecture [2025/10/01 11:54] (Version actuelle) – paolo
@@ Ligne 3: / Ligne 3: @@
 {{ .:pasted:20250924-153606.png?150}}
-Le dossier mobile d'un projet SmartMaker contient un dossier ''public'' (fichiers statiques), un dossier ''src'' (code source) et des quelques fichiers de configuration, modèle que l'on retrouve dans la majorité des projets React.
+Le dossier mobile d'un projet SmartMaker contient un dossier ''node_modules'', un dossier ''public'' (fichiers statiques non compilés), un dossier ''src'' (code source) et quelques fichiers de configuration, modèle que l'on retrouve dans la majorité des projets React.
 Dans le dossier ''public'' :
-- images
+  * ''images'' rassemble les icônes de l'application (pwa) et autres images statiques.
-- locales
+  * ''locales'' contient les ichiers de traductions json.
+Vous pouvez bien évidemment agencer et/ou rajouter des dossiers comme ''videos'', ''audios'', ... comme vous le souhaitez.
-Dans le dossier ''src''
+Dans le dossier ''src'':
-Fichiers de configuration :
+  * ''assets'' contient les fichiers statiques pris en charges par la compilation.
+  * ''components'' regroupe les composants jsx de l'application.
+  * ''i18n'' contient les fichiers de configuration des traductions.
+  * ''redux'' contient les fichiers de gestion de l'état global de Redux.
+  * ''utils'' contient les constantes, les fonctions utilitaires, ...
+  * ''App.jsx'' est le premier composant de l'application englobant les pricipaux.
+  * ''main.jsx'' est le point d'entrée de tout le code source de l'application importé dans ''index.html''.
+  * ''appConfig.js'' est un fichier de configuration globale de l'application.
+Fichiers à la racine :
+  * ''.env'' contient les variables d'environnement ignoré par le ''.gitignore''.
+  * ''.env.example'' est le modèle du fichier ''.env''.
+  * ''.gitignore'' contient la liste des dossiers/fichiers ignorés par Git.
+  * ''eslint.config.js'' est la configuration de ESLint qui analyse le code et renvoie des erreurs.
+  * ''index.html'' est le fichier HTML dans lequel React monte l'application.
+  * ''package-lock.json'' est un fichier généré par npm afin de vérouiller les versions exactes des dépendances.
+  * ''package.json'' contient la configuration du projet, les dépendances, srcipts, ...
+  * ''README.md'' est un fichier de documentation.
+  * ''vite.config.js'' contient la configuration de Vite (c'est ici que l'on retrouve celle de la PWA).
+Vous serez probablement amené à ajouter, supprimer des dossiers/fichiers ou, plus généralement, modifier cette architecture. Vous remarquerez que la position de la plupart de ces dossiers/fichiers n'a pas une importance technique particulière, mais relève surtout d'une question d'organisation.