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

ReseauEntourage/entourage-job-front