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)