Modèle de base pour commencer un projet React avec Typescript comme un pro.

• Vite + plugins ==> Vitejs
• Typescript ==> Typescript
• ts-node
• postcss ==> Postcss
  • autoprefixer
  • cssnano ==> CSSNano
  • sort-media-queries
  • flexbugs-fixes
• react ==> React
• react-dom
• react-router-dom
• react-hook-form ==> React Hook Form
• yup (bibliothèque de validation de données) ==> Yup
• sass-swing (framework scss/css) ==> Sass Swing

• ESlint + plugins ==> ESLint
• stylelint + plugins ==> Stylelint
• Prettier ==> Prettier
• JSDom
• Vitest ==> Vitest
  • coverage-c8
  • Testing-library/React ==> Testing Library
  • Testing-library/jest-dom
  • Testing-library/user-event
• husky ==> Husky
  • commitlint
  • lint-staged

ATTENTION

Si vous utilisez pnpm (principalement) comme gestionnaire de package.

Assurez-vous que votre projet ne soit pas stocké sur un HD externe branché sur USB.

Evitez d'avoir des espaces dans le nom de vos dossiers et que le path complet (avec les sous-dossiers de node_modules) ne dépasse les 260 caractères sous Windows.

En effet, cela peut causer des problèmes d'indexation, principalement sous Windows.

Installation de PNPM

> npm install -g pnpm

Installation des dépendances

> pnpm install

Préparation de husky (uniquement si Husky ne s'est pas installé automatiquement)

> pnpm run prepare

A lancer avec pnpm <nom_du_script>

• start : Lance le serveur de développement en local
• build : Creation du projet final
• lint : Vérification et fix js/ts avec eslint
• lint:scss: Vérification et fix scss avec stylelint
• format : Lance le formatage du code Prettier
• test : Lance les tests
• test:watch : Lance les tests avec observation continue
• test:coverage : Lance le test de couverture de code par les tests

> pnpm docker:start:dev

> pnpm docker:stop:dev

NOTE

Avec ce serveur dev, lorsque vous ferez des changements dans votre code ceux-ci seront automatiquement visibles dans votre navigateur.

Le conteneur de prod, vous permet de tester votre application avant de la deployer définitivement. Le conteneur de prod utilise le SSL ce qui fait que vous avez un serveur en https sur localhost.

Placer vous dans le dossier docker/prod/http_server/nginx/ssl. Lancer la commande en mode administrateur (sudo, sous linux) suivant pour créer vaut certificats SSL.

N'oubliez pas de configurer un mot de passe fort (VotreMotDePassFort).

Ensuite vous devrez répondre aux questions qui vous sont posées.

> openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout my-site.key -out my-site.crt -config my-site.conf -passin pass:VotreMotDePassFort

NOTE Si vous déployer ce conteneur sur votre serveur VPS, vous devrez remplacer les chemins d'acces des certificats vers ceux de votre service d'hébergement

> pnpm docker:start:prod

> pnpm docker:stop:prod

Ce modèle suit les recommandations du conventionnal commit organization les types autorisés sont :

"ci", "chore", "docs", "feat", "fix", "perf", "refactor", "revert", "style"

La description est tout en minuscule.

exemple

chore: projet setup

feat(component/foo): add new bar in foo

Avant chaque commit eslint, styelint et prettier sont lancés automatiquement

Si vous le désirez, il est possible de contourner l’utilisation des hooks via l’option --no-verify dans la plupart des commandes Git,

(!) Les tests sont lancés avant chaque push automatiquement, ce qui signifie que tous vos tests doivent être validés (vert)

Par défaut l'environnement de test est JSDom et la bibliothèque Testing Library est incluse.

Pour changer l'environnement ajoutez ce commentaire au début de vos tests

/**
 * @vitest-environment node
 */ 

Les méthodes de test sont déclarées globalement donc pas besoin de faire un import pour expect, describe, test, _ it_,...

• Le modèle de l'application React met en place le système de route avec react-router-dom (dossier : router)
• Un composant basique d'intégration avec le framework SCSS/CSS Sass Swing pour basculer du mode light au mode sombre est fourni. (dossier : App/components/ThemeSwitcher)