Entourage Pro Frontend

Document mis à jour le 05/08/2024

Sommaire

• Modules principaux & versions
• Architecture
• Configuration
• Documentation
• Tests
• Styles
• Pipeline
• Déploiement
• Extra.
• Stack technique
• Code
  • Use cases
  • Permissions des routes

Modules principaux & versions

App	Version
Node	18.x
YARN	1.22.x
Next.js	12.1.0
React	17.0.2
Webpack	5.74.0
esLint	8.0.1

Architecture

• entourage-job-front/
• .github: configuration de la CI avec Github Actions
• .husky : scripts de hook de commit avec Husky
• .storybook : Dossier de configuration de Storybook
• assets/ : fichiers de styles globaux avec UIkit
• cypress/ : fichiers de tests e2e Cypress
• public/ : stockage des ressources non dynamique accessible publiquement tels que les images, le CSS ou les fonts
• src/
  • api/: dossier contenant la définition de l'Api
  • components/ : dossier contenant les composants React écrit avec les particularités de Next.js
  • constants/ : fichiers de constantes
  • hooks/ : hooks communs à plusieurs composants
  • lib/ : librairies pure JS (analytics ...)
  • pages/ : dossier contenant les composants React de rendu de pages
  • store/ : dossier contenant la définition du store reduxjs/toolkit
  • styles/ : feuilles CSS compilés à partir de UIkit + certains styles customs
  • use-cases/ : store redux séparé en modules
  • utils/ : fonctions utilitaires communes
  • tsconfig: configuration TS pour l'app
• .editorconfig: configuration par défaut de la syntaxe du code de l'éditeur
• .env: fichier de configuration de votre environnement local
• .env.dist: fichier de distribution des variables d'env
• .eslintignore: configuration pour ESLint
• .eslintrc.json: configuration pour ESLint
• .gitignore.json: configuration des fichiers et dossiers ignorés dans le stage de Git
• .lintstagedrc.js: fichier de configuration du lint-stage
• .prettierignore: configuration des fichiers et dossiers ignorés par Prettier
• .prettierrc.json: configuration pour Prettier
• cypress.config.ts: configuration pour Cypress
• docker-compose.yml: Définition des différents containers Docker pour le développement local
• Dockerfile: configuration du container Docker de l'application
• jest.config.js: configuration de Jest
• Makefile: permet l'execution de la commande make init créant interactivement le fichier .env
• next-env.d.ts: Fichier auto-généré par nextjs
• next.config.js: configuration pour nexjs
• package.json: configuration du projet et des dépendances
• Procfile : configuration des process Heroku à lancer après déploiement
• server-next.js: point d'entrée de lancement du serveur
• tracer.ts: fichier d'initialisation de la connexion à DataDog
• next.config.js: fichier de configuration pour Next.js
• Procfile: configuration des process Heroku à lancer après déploiement
• .prettierrc.json: configuration pour Prettier

Installation

Pré-requis

• Avoir installé yarn Yarn est requis pour installer le projet

npm install -g yarn

• Avoir correctement intallé et exécuté le back-end Entourage Pro

• Avoir créé un fichier avec les variables d'environnement nécessaires en utilisant .env.dist

Variables d'environnement

Installation des dépendances

yarn install

Lancement en mode développement

yarn dev

Lancement en mode production

Pour le moment sans Docker

yarn build

Puis

npm start

Prettier + Linter

yarn lint && yarn format

Avec docker, précéder chaque commande par docker exec front ${cmd}

Ces deux commandes sont lancées par les hooks de commit

Si un bug apparait lors de l'utilisation de git ajouter l'option suivante

--no-verify

TS Config

Du fait d'une différence nécessaire de configuration TS entre le dossier srcet cypress, nous avons dû créer un fichier tsconfig.base.json à la racine du projet. Le dossier srcde l'app autant que le dossier cypressdes tests utilisent chacun leur propre tsconfigen extension de la base.

Le path du tsconfigpour le build de l'app est fixé dans le fichier next.config.ts.

Pour tester le typage du projet (app + cypress), utiliser

yarn run test:ts-check

Storybook

Les différents composants de l'application front sont documentés dans un storybook.

Pour executer Storybook en local :

yarn storybook

Lorsque vous ajoutez de nouvelles icones dans "/assets/icons", n'oubliez pas de les intégrer au storybook grâce à cette commande :

yarn add-icons

Styles

Suppression progressive de la librairie UIkit

Les fichiers du thème globale, qui utilisent la librairie UIkit, se trouvent dans le dossier /assets/custom

• entourage.less : style globale qui surcharge le thème par défaut de UIkit

• entourage.print.less : style utilisé pour le CV en version PDF

• /icons : icônes en SVG rajoutés aux icônes UIkit

Après avoir modifié les fichiers du thème, ou après avoir rajouté un icône, il faut recompiler les fichiers en CSS

• Installer d'abord UIkit au sein de son propre module

yarn uikit-install

• Si le module est déjà installé, le mettre à jour

yarn uikit-update

• Ensuite, compiler les fichiers SCSS en CSS

yarn uikit-compile

Les fichiers se retrouvent dans le dossier /src/styles/dist.

Tests

Tests Unitaires - Jest

La commande pour lancer les tests une fois

yarn test

La commande pour lancer les tests en mode watch

yarn test:watch

Si vous souhaitez obtenir le code coverage

jest --coverage

Un dossier coverage sera créé. Afin de pouvoir le consulter dans le navigateur.

Tests End to End (E2E) - Cypress

La commande suivante permet de lancer les tests Cypress:

yarn cypress:local

Pour obtenir la vidéo des tests sur cypress.io, utilisez la commande suivante:

yarn cypress:io

Pipeline CI/CD

Pipeline CI

Lire le fichier .github/workflows/main.yml Ce fichier constitue le workflow Github Actions

À chaque évènement de type: open, synchronized, reopened sur une PR executera le workflow.

Et ici la documentation concernant l'action Cypress.io.

Pipeline CD

Déploiement

Le déploiement se fait automatiquement grâce à Github Actions et Heroku.

Si une branche, après PR et review, est mergée à develop alors l'application sera automatiquement déployée sur la pre-production: https://entourage-job-front-preprod.herokuapp.com

Si une branche, après test en pre-production, est mergée à master, alors l'application sera automatiquement déployée sur la production: [https://Entourage Pro.fr](https://Entourage Pro.fr)

Extra.

Régulièrement, lancer la commande ci-dessous, afin de cleaner le code en supprimant les dependances, imports, et exports qui ne sont plus utilisés

npx dead-exports

A lire également

L'ensemble des documentations du répertoire : ./docs

• Routes Permissions
• Use Cases

Stack technique