mon-entreprise/site

mon-entreprise.urssaf.fr

Site 100 % statique, en Typescript, développé avec React.

Démarrage

Cloner le projet

# Clone this repo on your computer
git clone --depth 100 git@github.com:betagouv/mon-entreprise.git

# Mettre à jour votre config git locale
git config blame.ignoreRevsFile .git-blame-ignore-revs

Si l'historique des commits est trop volumineux, vous pouvez utiliser le paramètre depth de git pour ne télécharger que les derniers commits.

Fichier .env

Si possible, assurez-vous d'avoir toutes les clés d'API nécessaires dans votre fichier site/.env (un template est disponible dans site/.env.template).

[!NOTE] Pas d'inquiétude, ceci n'est pas nécessaire pour effectuer une première contribution à la base de code** Cependant, vous en aurez besoin pour la commande yarn postinstall et pour les commandes de traduction automatique français -> anglais. Si vous êtes confronté à ce type de besoin, demandez l'aide des contributeurs du projet.

Installation des dépendances

# Install the Javascript dependencies through Yarn 
yarn install

# Optional : fetch API data (stats, releases, etc.)
yarn postinstall

# Run the dev server for mon-entreprise
yarn start

Tests

Test unitaires / non regression

Nous utilisons vitest pour les tests.

Les règles publicodes de modele-social sont testées dans le dossier [./test/regression] avec des snapshots.

  yarn test

Mise à jour des snapshots

Nous testons un grand nombre de situations sur chaque simulateur, pour vérifier que les modification de règles suite à un changement de législation ou à l'implémentation d'un nouveau dispositif n'entrainent pas de résultats inattendus.

Si les changements apportés sont attendus, il est possible de mettre à jour les snapshots avec la commande suivante :

  yarn test -u

Tests d'integrations

Nous utilisons Cypress pour les tests d'intégration. Pré-requis:

yarn start &
yarn test:cypress

Pour tester la version anglaise :

yarn test:cypress:mycompanyinfrance

Nous utilisons des fixtures pour simuler les appels API. Pour les mettre à jour, il faut lancer le serveur de dev et lancer la commande suivante :

test:cypress:record-http

Déploiement

Le site est déployé sur Netlify, à chaque push sur la branche master. Par ailleurs, toutes les PR sont automatiquement déployées sur des URL de type https://<PR-NUMBER>--mon-entreprise.netlify.app.

Prerender

La plupart des pages sont pré-rendues statiquement lors du déploiement, pour améliorer les performances et le SEO. Un script se charge de générer les pages statiques grâce à renderToReadableStream, et de les placer dans le dossier site/dist/prerender.

Pour ajouter des pages à pré-rendre, il faut les ajouter dans le fichier site/build/prerender.ts.

A noter : nous n'utilisons pas nextJS pour des raisons historiques, mais il serait souhaitable de migre l'application à l'avenir

FAQ

Comment ajouter un nouveau simulateur ?

Pour ajouter un nouveau simulateur, il faut :

• Créer un nouveau dossier dans site/source/pages/simulateurs/ (ou /assistant si il s'agit d'un outil avec un parcours sur plusieurs pages).
• Créer un fichier config.tsx dans ce dossier, qui contient informations reliées au simulateur (nom, description, icône, etc.). Le type est PageConfig. Voir un exemple
• Créer la config de simulation dans le fichier simulationConfig.ts. Cette dernière contient la situation Publicodes et les paramètres pour configurer le simulateur. Voir un exemple
• Ajouter le simulateur sur la page /simulateurs-et-assistants, dans le fichier site/source/pages/simulateurs-et-assistants/index.tsx**
• Ajouter une route pour le simulateur dans le fichier sitePaths, avec la version anglaise également.

Redirections

Les redirections sont gérées par netlify, via le fichier netlify.base.toml.

C'est également dans ce fichier que sont définies les Content-Security-Policy.

Traduction 👽

Le site est disponible en français, et en anglais sur https://mycompanyinfrance.urssaf.fr

Les traductions se trouvent dans le répertoire site/source/locales.

La librairie utilisée pour la traduction de l'UI est react-i18next.

Lorsque l'on introduit une nouvelle chaîne de caractère dans l'UI il faut systématiquement penser à gérer sa traduction, via un composant <Trans>, ou via la fonction t

Le CI fait une analyse statique du code pour repérer les chaînes non traduites, dans le moteur et l'UI :

yarn run i18n:check

Pour traduire automatiquement les chaînes manquantes via l'api Deepl :

yarn run i18n:translate

N'oubliez pas de vérifier sur le diff que les traductions vous paraissent correctes.

Prévisualisation locale

Il est possible de simuler localement le comportement de l'application après le build complet, y compris le pré-rendu statique et les redirection Netlify, avec les commandes suivantes:

yarn run build:preview

yarn preview

# pour la version anglaise
yarn preview:en 

Statistiques

Nous utilisons ATInternet pour le reccueil des usages. La hierarchie des pages est organisée en 3 chapitre et un nom de page. Seul le chapitre 1 et le nom sont obligatoires.

• Chapitre 1 : par exemple simulateurs ou assistant. La liste est définie dans le fichier source/components/ATInternetTracking/index.tsx
• Chapitre 2 : le nom du simulateur / de l'assistant / de la famille de simulateur
• Chapitre 3 : le nom du simulateur si il n'est pas dans le chapitre 2

On utilise le nom de la page pour signifier les étapes dans le parcours de l'utilisateur. Par exemple, pour la plupart des simulateurs, on a les pages suivantes accueil, simulation_commencée simulation_terminée. Quand bien même il n'y a qu'une seule et même URL.

Cela permet de suivre le parcours des utilisateurs dans les simulateurs, et de voir les taux de completion facilement. Ces données sont ensuites compilées pour afficher la page /stats.