France Chaleur Urbaine

Le site officiel de france-chaleur-urbaine.beta.gouv.fr

Ce dépôt regroupe le code relatif au site france-chaleur-urbaine.beta.gouv.fr.

Il utilise, entre autre, Docker, React, Next.js, PostgreSQL et MapLibre.

Installation de l'environnement de développement

Pré-requis :

• Node.js version 20
• pnpm
• Docker
• Posséder un compte Scalingo et avois accès aux applications FCU
• Récupérer le fichier .env.local auprès d'un membre de l'équipe

Site local

• Installer les dépendances

pnpm i

• Déposer le fichier .env.local à la racine du projet.

• Lancer les conteneurs Docker (services annexes + app next).

docker compose up -d

• Installer la CLI Scalingo puis s'authentifier (servira à voir les logs et créer des tunnels vers les bases de données prod et dev)

scalingo login

• Préparer la structure de la BDD

pnpm db:migrate

• Peupler la base de données locale à partir de la base de production, notamment les tables de référence et calculées.

pnpm db:bootstrap

• Si jamais l'étape de bootstrap est trop lente, essayer de récupérer un dump depuis le dashboard Scalingo et l'importer en local (~ 20-30 minutes)

tar -xzvf 20240XXXXXXXXXX_france_chal_3098.tar.gz
pg_restore --clean --if-exists --no-owner --no-privileges --verbose --no-comments --dbname postgres://postgres:postgres_fcu@localhost:5432/postgres 20240XXXXXXXXXX_france_chal_3098.pgsql

• Désormais, sont accessibles :
  • Le site internet : http://localhost:3000/
  • L'interface mailpit pour les emails : http://localhost:8025/
  • La base de données PostgreSQL : localhost:5432

Airtable

Une partie des données est stockées dans Airtable, l'email/mot de passe est partagé, à récupérer auprès d'un membre de l'équipe.

1. Copier la base de données FCU Prod vers FCU Dev <ton prenom> (Cocher uniquement Duplicate records)
2. Récupérer les API Keys et les modifier dans le fichier .env.local

Kysely

Certaines requêtes à la base de données sont générées par Kysely à partir du fichier src/server/db/kysely/database.ts. Celui-ci doit être généré à partir de la base de données à chaque fois que celle-ci est modifiée.

• pnpm db:verify pour voir si des modifications ont été faites à la base de données sans avoir été incluses dans le fichier src/db/kysely/database.ts
• pnpm db:sync pour générer le fichier src/db/kysely/database.ts à partir de la base de données

Développement avec Publicodes

Les commandes ci-dessous sont à réaliser une fois pour lier la dépendance @betagouv/france-chaleur-urbaine-publicodes directement au répertoire local france-chaleur-urbaine-publicodes pour faciliter le développement sans avoir besoin de publier une version sur le registre NPM.

# rend disponible le paquet @betagouv/france-chaleur-urbaine-publicodes globalement en local
(cd france-chaleur-urbaine-publicodes && pnpm link)

# utilise le paquet local @betagouv/france-chaleur-urbaine-publicodes plutôt que celui du registre
(cd france-chaleur-urbaine && pnpm link @betagouv/france-chaleur-urbaine-publicodes)

Note : Le lien créé est un lien symbolique, il ne fonctionne pas quand le serveur est lancé dans un conteneur Docker. Il faut donc lancer le serveur en dehors du conteneur Docker.

# arrêter le conteneur du serveur
docker compose stop web
# corriger les permissions (root dans le conteneur != de l'utilisateur local)
sudo chown -R $USER: .next node_modules
# lancer le serveur
pnpm dev

Lint

• Prettier est utilisé comme formatteur de code.
• ESLint est utilisé pour détecter les erreurs de programmation.

pnpm lint

Tests

Vitest est le framework utilisé pour les tests unitaires.

pnpm test

Build

pnpm build

Hook pre-commit

Un hook pre-commit Git permet de vérifier que le code est correctement linté avec lint-staged, et talisman est un outil qui permet de détecter les fuites de secrets dans les commits. À noter que GitGuardian est configuré sur l'organisation beta.gouv et fait la même chose, mais le secret a alors été rendu public et il faut alors l'invalider.

Si talisman détecte une erreur au moment d'un commit, 2 options sont possibles :

• soit corriger l'erreur pour supprimer l'alerte ;
• soit ajouter une exception via la commande pnpm talisman:add-exception.

Architecture de déploiement et outils

Le site de France Chaleur Urbaine est hébergé chez Scalingo, sous le compte du MTE (tristan-robert). 2 applications sont créées et branchées aux branches main et dev du dépôt GitHub.

Chaque application contient :

• un conteneur Next.js pour l'application web
• un conteneur clock qui est utilisé pour faire tourner des tâches récurrentes et de synchronisation
• une BDD PostgreSQL

graph LR;
    subgraph Scalingo
        N("Next.js - france-chaleur-urbaine.beta.gouv.fr")-->BDD@{shape: cyl, label: "PostgreSQL"};
        C[[Clock]]-->BDD;
    end
    subgraph Services externes
      C-->A;
      N-->A("Airtable (SaaS)");
      N-->B("SMTP Brevo (SaaS)");
      N-->M("Matomo (stats.beta.gouv.fr)");
      N-->S("Sentry (sentry.beta.gouv.fr)");
    end

Loading

Particularité de l'environnement de dev :

• Des review apps Scalingo sont utilisées pour créer des environnements à partir des pull requests GitHub.
• Les emails sont branchés sur smtp.ethereal.email
• Utilise la base Airtable de production

En local, Docker est utilisé pour 2 conteneurs :

• Postgres pour la BDD
• Mailpit est utilisé comme serveur SMTP et interface de visualisation des emails. L'application se lance sans conteneur, pour éviter les problèmes de droits avec les volumes mappés et ne pas casser les chemins entre le code et l'IDE quand des stack traces apparaissent

FCU intègre plusieurs outils d'analyse d'audience :

• Matomo
• HotJar, utilisé notamment pour des sondages
• Google Analytics
• LinkedIn (obsolète)
• Facebook (obsolète)

GitHub contient 2 dépôts :

• https://github.com/betagouv/france-chaleur-urbaine : pour tout le code de l'application
• https://github.com/betagouv/france-chaleur-urbaine-publicodes : pour les règles du comparateur de modes de chauffage

Les règles publicodes sont publiées sur le registre NPM et utilisé comme dépendance par le projet principal. L'URL GitHub pages (https://betagouv.github.io/france-chaleur-urbaine-publicodes/) est également utilisée par le projet pour expliquer les règles en détail.

Outils

• Un compte gmail est partagé pour l'équipe ([email protected]) et est souvent utilisé pour créer des comptes dans d'autres applications
• Trello est utilisé pour les kanbans des features à développer sur le site et aussi less intégrations des tracés sur la carte
• Airtable est utilisé pour enregistrer tout un tas de données, mais seulement pour l'application FCU
• GitBook est connecté au dépôt GitHub pour intégrer les actualités de FCU.
• Alwaysdata est utilisé pour gérer les zones DNS suivantes :
  • france-chaleur-urbaine.beta.gouv.fr (prod)
  • france-chaleur-urbaine.incubateur.net (dev)
• Le VaultWarden Beta est utilisé pour centraliser les mots de passe des comptes (mais pas complètement encore !)
• Le Mattermost Beta est utilisé pour échanger avec l'équipe avec ses différents canaux : Bizdev, Dev / UX, Team, Notifications (ce dernier est utilisé par Scalingo pour )
• Jitsi Meet est utilisé pour faire des points en visio
• Figma est utilisé pour les maquettes
• Pipedrive est utilisé par les bizdev pour gérer les relations avec les prospects et les usagers
• Brevo est utilisé pour les emails transactionnels de FCU mais aussi les campagnes marketing.

Licence

Le code de ce logiciel est soumis à la licence Etalab 2.0.