Chapitre 36 / 39

Cloudflare Pages avec Claude Code

L’un des atouts que Sodimo offre à chaque membre de l’équipe, c’est la capacité de publier sa propre page interne. Si Rani veut une vue « top of mind » de ses dix comptes les plus chauds, elle ne crée pas de ticket — elle ouvre Claude Code (l’assistant en ligne de commande d’Anthropic) sur son ordinateur, décrit la page en français ou en anglais, examine ce qui est produit, et la déploie sur une URL sodimo.eu accessible au reste de l’équipe. Même chose pour Paul avec un résumé financier, même chose pour quiconque se retrouve à copier-coller les mêmes données deux fois.

Statut : Prévu — le schéma est éprouvé sur les machines de Thomas et sera accessible à l’équipe Sodimo dès que le Framework Desktop est installé en rack et que Claude Code est installé sur le premier ordinateur portable. La procédure ci-dessous décrit la forme qu’il prendra.

Ce chapitre est une procédure pas à pas, pas une référence. Pour la liste des outils que votre page peut interroger (le CRM, l’entrepôt de données, l’archive email), voir le chapitre Ce à quoi l’IA peut accéder. Pour la liste des skills déjà rédigées comme modèles à copier, voir le chapitre Bibliothèque de skills.

Ce dont vous avez besoin, une fois pour toutes

Trois éléments, à configurer une fois par ordinateur, par Thomas pendant l’engagement :

Claude Code installé sur l’ordinateur et connecté sous votre compte Google @sodimo.eu.
Une courte liste d’identifiants autorisés tirés du coffre Sodimo, déposés dans la configuration de Claude Code — un token en lecture seule pour l’entrepôt D1, un token de déploiement Cloudflare Pages, un identifiant git pour l’organisation sodimo/*. Vous n’avez jamais à les copier ni à les saisir ; Thomas les colle depuis le coffre lors de la première configuration.
Un dossier de travail sur votre ordinateur où vivent vos pages (~/sodimo-pages/, un sous-dossier par page). Claude Code l’utilise comme répertoire de travail.

Après cela, chaque nouvelle page est une conversation de dix minutes.

Créer une nouvelle page

Ouvrez un terminal, placez-vous dans ~/sodimo-pages/, et lancez Claude Code. Décrivez la page souhaitée, dans la langue qui vous vient naturellement — le français et l’anglais fonctionnent tous les deux. Claude Code clarifie, écrit la page, vous montre ce qu’il a construit, et itère avec vous.

Un tour d’ouverture réaliste :

Je veux une page interne appelée « Top of Mind » qui liste mes dix comptes les plus chauds. Chaud signifie : une opportunité est ouverte et progresse, ou il y a eu une activité dans les dix derniers jours. Pour chaque compte, je veux le nom, le stade, la date du dernier contact, et un résumé en une ligne. Je veux pouvoir l’ouvrir sur mon téléphone lors d’une visite.

Claude Code fera à peu près ce qui suit, en vous guidant à chaque étape :

Créer un dossier pour la page avec un squelette Astro ou HTML simple.
Écrire une petite requête qui demande à l’entrepôt D1 les dix comptes les plus chauds, en utilisant le token en lecture seule issu de votre configuration.
Construire la page (titre, tableau, mise en page responsive adaptée au téléphone).
Vous montrer un aperçu en direct, en local.
Vous demander ce qu’il faut ajuster.

Vous itérez en langage courant — « trier par date de dernier contact plutôt que par nom », « supprimer la colonne résumé », « mettre le stade sous forme d’étiquette colorée ». Chaque itération prend quelques secondes.

Déployer

Quand l’aperçu vous convient, un seul tour :

Déploie cette page sur topofmind.dash.sodimo.eu.

Claude Code lance le déploiement Cloudflare Pages, protège l’URL derrière Cloudflare Access (le même portail Google Workspace que tous les autres outils internes), et vous confirme quand l’URL est en ligne. Quatre-vingt-dix secondes, du début à la fin, pour une page que personne n’avait construite auparavant.

L’URL est permanente. La prochaine fois que Rani veut consulter son top of mind, elle ouvre le signet. Si les données changent en cours de journée — une opportunité avance, un contact atterrit dans sa boîte — la page le reflète au prochain rafraîchissement.

Modifier une page existante

Même flux, moins de friction. Ouvrez Claude Code dans le dossier de la page à modifier :

Dans Top of Mind, ajouter une colonne indiquant le nombre de jours avant la prochaine réunion planifiée, le cas échéant.

Claude Code lit le code existant, prépare la modification, en affiche l’aperçu, et redéploie dès que vous approuvez. Vous n’éditez pas le code vous-même. Vous n’avez pas besoin de savoir si la modification porte sur la requête, le template ou le CSS — décrire ce que vous voulez en termes métier suffit.

Que faire quand quelque chose ne fonctionne pas

Trois situations, trois réponses.

L’aperçu est incorrect mais le déploiement n’a pas encore eu lieu. Dites à Claude Code ce qui ne va pas. Il corrigera la page et régénèrera l’aperçu. Aucune conséquence — rien n’est en ligne.

Le déploiement a réussi mais la page en ligne est vide ou affiche une erreur. Deux causes fréquentes : le token D1 a été renouvelé et votre configuration locale contient encore l’ancien (voir le chapitre Rotation de clés), ou la requête exécutée par la page a dérivé parce qu’une colonne a été renommée en amont. Demandez à Claude Code d’examiner l’erreur en direct et de la corriger. Dans la plupart des cas, c’est une correction en un seul tour.

Le déploiement lui-même échoue. Cloudflare Pages a refusé l’envoi. La cause habituelle est un problème de quota ou d’authentification. Copiez l’erreur dans Claude Code et il l’expliquera et la corrigera. Si la correction nécessite qu’« un administrateur fasse X », Claude Code le précisera — envoyez un message à Thomas ou, après la passation, à la personne responsable de l’administration Cloudflare.

Dans tous les cas : vous n’avez pas besoin de lire le code, vous n’avez pas besoin de comprendre la trace d’erreur, et vous n’avez pas besoin de contacter Thomas en premier réflexe. Claude Code est votre premier recours. Il vous dira quand il ne peut pas résoudre quelque chose et qu’une intervention humaine est nécessaire.

Conventions à adopter ensemble

Quelques conventions communes rendent chaque page plus facile à maintenir :

Nommer les pages d’après la question à laquelle elles répondent. « Top of Mind », « Qui nous doit de l’argent », « Les exécutions d’agents de cette semaine ». Pas « Tableau de Rani v2 ».
Une page, un public. Une page pour la vue commerciale de Rani et une page pour la vue financière de Paul sont deux pages séparées, pas des onglets sur la même page. Bon marché à construire, bon marché à abandonner.
Données en direct, toujours. Les pages interrogent D1 au moment du rendu. Il n’existe pas de raccourci « exporter une fois et coller dans la page » — si ça mérite une page, ça mérite une requête en direct.
Si ça tient depuis un mois, faites-en la promotion. Une page que tout le monde ouvre trois fois par semaine mérite une tuile sur le launchpad (chapitre Le launchpad). Signalez-le à Thomas ; c’est une modification d’une ligne.

Ce que ce n’est pas

Ce n’est pas un remplacement du CRM, d’OpenWebUI, ou de Paperclip. Ces outils sont des applications complètes avec leurs propres interfaces et leurs propres chapitres. Cloudflare Pages avec Claude Code couvre le milieu léger — le rapport que personne n’a encore construit, la vue ponctuelle pour une question précise, le tableau de bord qui répond à une question récurrente dans le vocabulaire propre de l’équipe.

Un bon test : si vous demanderiez autrement à Rani ou à Paul « peux-tu m’envoyer une capture d’écran de ça chaque lundi », la réponse est une page.