Mise en production

Compilez, définissez les métadonnées et déployez Acme Deploys.

L’application de ce chapitre s’exécute dans votre console. Ouvrez-la avec ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (activez les fonctionnalités pour développeurs au préalable), puis essayez-la.
Regarder le chapitre3:04

Dans ce chapitre

  • Compilation
  • Metadata
  • Hébergement statique
  • Avant le déploiement

text build produit un client statique et, si vous avez des gestionnaires de route, un serveur pour text start.

Compilation

bun run build
   ▼ Text.js 1.0.1 (Turbolog)   Creating an optimized console production build... ✓ Compiled successfully in 0.8s ✓ Collecting route data ✓ Generating static console cells (3/4) ✓ Prerendering console shells (3/3) ✓ Prerendering curl frames (3/3) ✓ Finalizing console optimizationRoute (app)                              Type       Target┌ ○ /                                    Static     console.log (%c)├ ○ /_not-found                          Static     console.log (%c)├ ○ /deployments                         Static     console.log (%c)├ ƒ /deployments/[id]                    Dynamic    console.log (%c)├ ○ /settings                            Static     console.log (%c)└ ƒ /api/deployments                     Dynamic    Route Handler+ First Load JS shared by all             698.2 kB (241.6 kB gzip)○  (Static)   prerendered as static console cellsƒ  (Dynamic)  on-demand console reconciliation

text start sert le build et exécute vos gestionnaires de route. Il fonctionne sur tout hébergement disposant de Bun 1.2+ ou de Node.js 22+.

Metadata

Définissez le titre de l’onglet du navigateur dans le layout racine. Les pages peuvent le remplacer.

app/deployments/page.tsx+1tsx
Ajouté : export const metadata = { title: "Deployments" }; // → "Deployments · Acme"

Hébergement statique

Sans gestionnaires de route, le build est un site statique classique. Chaque route statique possède son propre fichier HTML. Les routes dynamiques telles que /deployments/[id] sont servies par index.html.

Sur Vercel et Cloudflare Pages, text build détecte la plateforme et écrit lui-même cette règle de repli. Les autres hébergements statiques nécessitent une règle de réécriture. Sur Netlify, ajoutez un fichier _redirects à public/ :

public/_redirects+1text
Ajouté : /*  /index.html  200

Netlify sert les fichiers existants avant d’appliquer la règle, ce qui laisse les ressources et les routes prérendues inchangées.

Avant le déploiement

  • Désactivez « Conserver le journal » dans les paramètres de votre console. Vos utilisateurs doivent aussi désactiver cette option.
  • Testez des dimensions étroites comme 80×24. DevTools ancré sur le côté donne une grille étroite.
  • Exécutez bun test.

Appuyez sur Enter dans la console pour déployer. Récupérez ensuite votre certificat.

Essayer

Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.

▼ 10 · Mise en production

Ouvrir la console

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur Enter.

Ouvrir sur ordinateur

Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.

Quiz

2 questions

Répondez à toutes les questions pour terminer le chapitre.

De quoi un hébergement statique a-t-il besoin pour les routes dynamiques ?

 

Quel paramètre de la console faut-il désactiver ?