Skip to content
AMN Docs

Phase 0 - Test : Prérequis du Composant 1 (Page d'accueil)

Phase 0 - Test : Prérequis du Composant 1 (Page d'accueil)

Documentation technique

Phase : 0 - Golden Path (Composant 1 : Page d’accueil)
Slice : Slice 1
Cycle : DOC → SPEC → CODE → TEST → INTÉG
Statut : En cours

1. Contexte

Cette phase a pour objectif de mettre en place les prérequis manquants pour le premier composant du Golden Path : Page d’accueil (vitrine SSG + Sanity).

1.1. Changements effectués1/2

Sanity Studio :

  • Schéma page créé avec PageBuilder
  • 6 blocs PageBuilder créés : hero, features, testimonials, cta, richText, imageGallery
  • Schéma et types Sanity régénérés

1.1. Changements effectués2/2

Astro :

  • Layout MainLayout.astro créé
  • Composant BaseHead.astro mis à jour pour supporter canonicalURL

Cloudflare :

  • Middleware Worker preview-middleware créé (conforme à l’ADR L3)
  • L’approche existante (route Astro /api/preview) est conservée pour les tests

2. Test du schéma Sanity

2.1. Extraction du schéma

Terminal window
cd apps/studio
npx sanity schema extract --force

Attendu :

  • Fichier schema.json généré
  • Message de succès : ✔ Extracted schema to /home/anderson/PP/apps/studio/schema.json

2.2. Vérification du schéma

Terminal window
ls -la apps/studio/schema.json

Attendu :

  • Fichier schema.json existe
  • Contient les types : page, hero, features, testimonials, cta, richText, imageGallery

3. Test du build Astro

3.1. Build en mode hybride

Terminal window
cd apps/web
npx pnpm@12.3.4 build

Attendu :

  • Build réussi sans erreurs
  • Message de succès : [build] Complete!
  • Mode hybride actif

3.2. Vérification du layout

Terminal window
ls -la apps/web/src/layouts/MainLayout.astro

Attendu :

  • Fichier MainLayout.astro existe
  • Layout utilise Header, Footer, BaseHead

4. Test du middleware Cloudflare

4.1. Démarrage du middleware via Taskfile

Terminal window
task dev:preview-middleware

Attendu :

  • Middleware démarré sur http://localhost:8790
  • Message de succès : Ready on http://localhost:8790

4.2. Configuration des secrets1/3

Pour les tests locaux, configurer le secret via le script d’injection ciblé :

Terminal window
./scripts/inject_secret_to_cloudflare.sh --env=dev --service=preview-middleware

Ce script :

  • Injecte automatiquement le secret SANITY_PREVIEW_SECRET dans le worker Cloudflare
  • Crée le worker s’il n’existe pas
  • Configure les secrets locaux dans .dev.vars pour wrangler dev

4.2. Configuration des secrets2/3

Attendu :

  • Secret configuré pour l’environnement dev
  • Message de succès à la fin de l’injection
  • Worker créé/déployé automatiquement
  • Fichier .dev.vars créé avec les secrets locaux

4.2. Configuration des secrets3/3

Note : Le script lit les valeurs depuis le fichier .env à la racine du projet. Assurez-vous que SANITY_PREVIEW_SECRET est défini dans votre .env (déjà présent dans .env.example).

Autres services disponibles :

  • --service=web : pour l’app Astro (tous les secrets Sanity)
  • --service=submission-processor : pour le worker de traitement des formulaires
  • --service=preview-middleware : pour le middleware de preview

4.3. Test de validation du secret

Terminal window
curl "http://localhost:8790/api/preview?secret={SANITY_PREVIEW_SECRET}&slug=/test"

Attendu :

  • Si secret invalide : Invalid preview secret (HTTP 401)
  • Si secret valide : Redirect avec cookie sanity-preview

4.4. Note sur le mode hybride

Selon l’ADR-SSR-Pur.md, le mode hybride Astro fonctionne avec output: 'server' et le mode hybride est réalisé via export const prerender = true/false sur les pages individuelles. Il n’est pas nécessaire de changer le mode de rendu dans astro.config.mjs pour activer le SSG sur la page d’accueil.

4.5. Note sur la compatibilité wrangler

Les services Cloudflare (form-handler, submission-processor, preview-middleware) utilisent maintenant wrangler@^4.112.0 pour assurer la compatibilité avec @astrojs/cloudflare@14.3.1. Les versions des packages Cloudflare ont été mises à jour :

  • wrangler: ^4.112.0
  • @cloudflare/workers-types: ^5.20260911.1

5. Résultats des tests

5.1. Schéma Sanity

  • ✅ Schéma page créé avec succès
  • ✅ 6 blocs PageBuilder créés
  • ✅ Schéma extrait avec succès
  • ✅ Types générés

5.2. Build Astro

  • ✅ Build réussi sans erreurs
  • ✅ Layout MainLayout créé
  • ✅ BaseHead mis à jour

5.3. Middleware Cloudflare

  • ✅ Middleware Worker créé
  • ✅ Validation du secret fonctionnelle
  • ✅ Worker démarrable en local

6. Conclusion

La Phase 0 - Prérequis du Composant 1 est terminée avec succès.

6.1. Changements effectués1/2

  1. Sanity Studio :

    • Schéma page avec PageBuilder
    • 6 blocs PageBuilder (hero, features, testimonials, cta, richText, imageGallery)
    • Schéma et types régénérés

6.1. Changements effectués2/2

  1. Astro :

    • Layout MainLayout.astro créé
    • BaseHead mis à jour

  2. Cloudflare :

    • Middleware Worker preview-middleware créé (conforme à l’ADR L3)
    • Route Astro /api/preview conservée pour les tests

6.2. Prochaines étapes

  • Passer à l’implémentation du composant 1 (Page d’accueil)
  • Créer les composants Astro pour les blocs PageBuilder
  • Configurer la route index.astro pour utiliser le schéma page
  • Configurer export const prerender = true pour le SSG (selon les besoins de la page)
  • Note : Selon l’ADR-SSR-Pur.md, le mode hybride Astro fonctionne avec output: 'server' et le mode hybride est réalisé via export const prerender = true/false sur les pages individuelles

7. Notes importantes

  • Le middleware Cloudflare est conforme à l’ADR L3 (Worker indépendant)
  • La route Astro /api/preview est conservée pour les tests
  • Le schéma page utilise les blocs PageBuilder modulaires
  • Le layout MainLayout fournit la structure commune des pages marketing

8. Historique des modifications

Date Version Description Auteur
2026-09-16 1.0 Création initiale Devin
Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare