template

Template est une application Next développée par la Fabrique des ministères sociaux suivant les préconisations du Système de Design de l'État.

L'application dispose de deux branches principales :

main qui est la branche principale du projet, celle-ci dispose d'une instance keycloak et d'une API hasura connectées sur une base de données postgres
static qui est un template de site en statique sans la partie authentification

Ce template intègre les recommendations de la documentation technique SocialGouv

Description

D'un point de vue fonctionnel

Ce template est composé de page :

Page principale
Politique de confidentialité
Mentions légales
Conditions générales d'utilisation
Statistiques d'utilisation (fonctionnant avec matomo)
Déclaration d'accessibilité
Healthz
Page 404
Page d'authentification gérée par keycloak (exclusive à main)
Page d'inscription gérée par keycloak (exclusive à main)
Page profil (exclusive à main)

D'un point de vue technique

react-dsfr pour l'utilisation du design système de l'état
next-seo pour gérer les balises meta au sein de l'application
storybook permettant de réaliser des stories pour les composants
@testing-library pour tester de manière unitaire les composants
jest pour tester de manière unitaire le code
cypress pour tester en e2e le frontend
matomo pour sauvegarder de manière anonyme les statistiques d'utilisation
sentry pour gérer les erreurs
keycloak qui est un serveur d'authentification (exclusive à main)
next-auth qui est un wrapper pour gérer l'authentification au sein de l'application (exclusive à main)
hasura qui permet d'exposer une API GraphQL sur votre Postgres et de gérer les authorisations (RBAC)
talisman qui permet de prévenir la publication de secrets dans votre code

Lancer le code

Après avoir cloné le projet :

Développement

⚠️ Avant de lancer le projet, vous devez installer gomplate

docker-compose up -d # to run keycloak and postgres in background
yarn # to install dependencies
yarn dev # to run in dev mode

Hasura

Lancer les seeds :

yarn hasura seed apply --file books.sql --project ./hasura --database-name default --endpoint http://127.0.0.1:8082 --admin-secret myadminsecretkey

Mettre à jour les metadatas et migrations :

Lancer la console avec yarn hasura console --project ./hasura --endpoint http://127.0.0.1:8082 --admin-secret myadminsecretkey. Les modifs faites dans l'UI seront reportées dans les dossiers hasura/metadata et hasura/migrations

Cf migrations documentation

Production

yarn # to install dependencies
yarn build # to build code
yarn start # to start

Gestion des environnements

Les variables issues des docker build-args, sont à utiliser dans next.config.js, pour les autres, il faut les définir dans les différents .env.*.

Le fichier .env.staging est utilisé pour les environnements de review et de pré-production.

Le fichier .env.development est utilisé pour l'environnement de développement.

⚠️ Les variables d'environnement sont publiques (utilisées durant le build), ne commitez donc pas de variables privées dans ces fichiers.

KeyCloak

Le template intègre Next-auth et KeyCloak 18 qui assure tous les workflows d'authentification.

Le realm par défaut est dans .kontinuous/files/realm-export.json. Pour générer realm utilisable par docker-compose à partir de celui-ci, utilisez yarn keycloak.

Le thème keycloak est basé sur le design-système de l'état, cf keycloak-dsfr.

FranceConnect

Cf https://partenaires.franceconnect.gouv.fr/fcp/fournisseur-service

Dans les URLs de callback définies sur le compte FranceConnect, utiliser https://[votre-hostname]/realms/app-realm/broker/franceconnect-particulier/endpoint et https://[votre-hostname]/realms/app-realm/broker/franceconnect-particulier/endpoint/logout_response.

Liens

https://template.fabrique.social.gouv.fr/ : Version en production du projet
https://socialgouv.github.io/template/ : Storybook liés à la branche principale du projet
https://github.com/socialgouv/keycloak-dsfr : Thème keycloak-DSFR
https://socialgouv.github.io/support : Documentation technique SocialGouv

lsagetlethias / template