Interface LexImpact budget
Ceci est le code source de l'interface Web de l'application LexImpact dédiée au calcul budgétaire de différents dispositifs (CSG, CRDS). Il comprend une représentation graphique des effets de la loi sur la population et le budget.
Présentation
Ce projet est construit sur la base du framework JavaScript SvelteKit, en TypeScript et avec TailwindCSS.
Il emploie l'API Web définie par leximpact-budget-api pour faire appel au moteur de microsimulation socio-fiscale OpenFisca-France et calculer les effets de la loi.
Configurer
Dans le répertoire de l'application leximpact-budget-ui/
, créer un fichier .env
en se basant sur l'exemple fourni :
cp example.env .env
Et adapter son contenu aux besoins du développement, de l'intégration ou de la production selon les commentaires indiqués dans l'example.env
.
Installer
NodeJS
Ce projet fonctionne avec NodeJS version 16
ou supérieure.
Si vous disposez déjà de NodeJS
, la version peut être vérifiée avec la commande suivante :
node --version
Sinon, NodeJS
peut-être téléchargé depuis son site officiel.
Ou si l'on dispose de Node Version Manager :
nvm install 16
Dépendances
Afin d'installer les dépendances, exécuter la commande suivante :
npm install
L'environnement peut également être réinitialisé avec la commande
npm run clean
.
Exécuter l'application
Deux modes d'exécution cohabitent et dépendent du cas d'usage que l'on a :
- le mode développeur permet de voir le produit du code ainsi que l'effet direct des modifications qui y sont apportées,
- ou le mode production qui permet de générer un build pour une mise en ligne sur serveur de production (ou une évaluation en local).
Mode développeur
Dans un terminal, exécuter la commande :
npm run dev
La commande conserve la main tout en restant à l'écoute des modifications de code.
L'application peut alors être consultée dans un navigateur à l'adresse indiquée (par défaut : http://localhost:3000
), mais la première fois il peut être nécessaire de la recharger plusieurs fois, le temps que toutes les dépendances se compilent.
L'application peut ensuite être arrêtée dans le terminal avec les touches
Ctrl
+C
.
Bravo, vous êtes prêts à utiliser et contribuer à leximpact-budget-ui
! 🎉
Mise en production
Dans un terminal, exécuter la commande :
npm run build
Le build produit peut alors être testé localement avec la commande suivante :
npm run preview
L'application peut ensuite être arrêtée dans le terminal avec les touches
Ctrl
+C
.
Bravo, vous êtes prêts à utiliser leximpact-budget-ui
! 🎉
Tester
Les tests unitaires de l'application sont développés selon le framework Jest. L'application étant développée en TypeScript, ce choix est propagé aux tests mais ceci nécessite l'emploi du transformateur ts-jest.
En particulier, deux fichiers de configuration définissent le comportement des tests :
-
./jest.config.js
est dédié aux tests, -
./tsconfig.json
est dédié au traitement du TypeScript.
Pour exécuter les tests, il est nécessaire d'avoir déjà installé l'application et d'exécuter la commande suivante :
npm run test
Tous les tests doivent s'achever sans erreur.
En savoir plus sur la structure de l'application
Les sources de l'application sont regroupées comme suit dans le répertoire ./src/
:
-
src/routes/
: les pages de l'application-
src/routes/__layout.svelte
est le template partagé par toutes les pages et initialise le contexte commun (via setContext), -
src/routes/index.svelte
est la page principale de l'application.
-
-
src/lib/
: les composants et utilitaires de l'application qu'ils interviennent du côté client ou serveur.-
src/lib/auditors/config.ts
: l'audit des éléments de configuration nécessaires à l'application (du.env
) -
src/lib/components/
: les composants Svelte de l'application -
src/lib/server/*.ts
: les utilitaires qui s'exécutent côté serveur -
src/lib/*.ts
: les utilitaires qui s'exécutent côté client.
-