DX / outils : Vite + Angular + Analog pour blogs statiques/ISR

DX / outils : Vite + Angular + Analog pour blogs statiques/ISR

Pipeline 2025 pour un blog Angular sur Vite/Analog avec ISR, builds rapides et mesures dev/prod.

Pipeline 2025 pour un blog Angular sur Vite/Analog avec ISR, builds rapides et mesures dev/prod.

Un blog Angular sur Vite/Analog se build vite et se déploie proprement en ISR. Voici une config pragmatique.

Dépendances clés

  • @analogjs/platform pour le SSR/ISR.
  • @angular/platform-server + @angular/ssr.
  • vite + @analogjs/vite-plugin-angular.

Scripts recommandés

{
  "scripts": {
    "dev": "analog dev --host",
    "build": "analog build",
    "preview": "analog preview",
    "lint": "ng lint",
    "test": "ng test --watch=false"
  }
}

ISR en 2 lignes

// analog.config.ts
import { defineConfig } from '@analogjs/platform';

export default defineConfig({
  prerender: { routes: ['/', '/articles', '/tags'] },
  ssr: { static: { revalidate: 300 } },
});
  • prerender.routes pour les pages stables.
  • revalidate: 300 pour régénérer toutes les 5 minutes.

Benchmarks rapides

  • analog build (M2, 16 Go) : 6-8s pour ~30 pages.
  • analog dev --host : cold start ~1.2s, HMR <200ms sur templates.
  • Lighthouse (SSR + hydration partielle) : LCP 1.2-1.6s, TBT <60ms.

Pipeline CI minimal (GitHub Actions)

name: ci
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --watch=false
      - run: npm run build

Ajoutez un job de déploiement (Netlify/Vercel) qui pousse le dossier dist/analog/public.

Tips DX

  • Activer @analogjs/content pour le markdown + frontmatter natif.
  • Ajouter vite --clearScreen=false pour des logs lisibles en CI.
  • Sur VS Code, configurer typescript.tsdk vers node_modules/typescript/lib pour profiter des derniers types Angular.