Skip to main content
Frameworks pris en charge
Language

Integration CLI

Utilisez l'outil CLI cside pour ajouter automatiquement cside aux fichiers HTML statiques apres votre processus de build.

Le CLI est une methode d’integration autonome pour les sites statiques. Il injecte automatiquement le script de surveillance cside dans vos fichiers HTML. Aucune balise script manuelle necessaire.

Pas besoin d'ajouter le script manuellement

Lorsque vous utilisez le CLI, il n’est pas necessaire d’ajouter le script cside a votre site. Le CLI l’ajoute automatiquement pour vous. Utilisez soit le CLI soit l’installation manuelle du script, pas les deux.

HTML statique uniquement

Le CLI ne prend en charge que les fichiers HTML statiques. Pour les applications SSR, utilisez le script manuel ou le package Next.js a la place.

Frameworks pris en charge

Le CLI fonctionne avec tout framework qui genere des fichiers HTML statiques :

  • Astro (mode statique)
  • Next.js (export statique)
  • Gatsby
  • Nuxt (mode statique)
  • SvelteKit (adaptateur statique)
  • Eleventy (11ty)
  • Hugo
  • VitePress / VuePress
  • Docusaurus

Tout autre framework qui genere des fichiers HTML statiques fonctionnera egalement. Le CLI detecte automatiquement les dossiers de sortie .next et dist, ou specifiez un repertoire personnalise avec --dir.

Installation

npm i @cside.dev/cli

Ou executez directement sans installer :

npx @cside.dev/cli

Utilisation

Executez le CLI apres votre processus de build pour injecter le script cside dans vos fichiers HTML :

// package.json
{
  "scripts": {
    "build": "next build && npx @cside.dev/cli"
  }
}

Options du CLI

Usage: @cside.dev/cli [options]

Options:
      --version  Show version number                                   [boolean]
  -d, -f, --dir  Directory which include html files to process. By default we'll
                 try to look for a `.next` and `dist` folder. Also a single file
                 can be used.                                           [string]
  -s, --silent   Disable outputting processed html files.
                                                      [boolean] [default: false]
  -t, --team, --team-id
                 Inject a team-scoped cside script host using the provided team
                 ID.                                                     [string]
      --fingerprint
                 Inject cside fingerprint hosts on csidefd.com instead of the
                 default csidetm.com domain.
                                                      [boolean] [default: false]
  -h, --help     Show help                                             [boolean]

Exemples

Traiter un repertoire specifique :

npx @cside.dev/cli --dir ./out

Traiter un seul fichier :

npx @cside.dev/cli --dir ./dist/index.html

Injecter un hote de script associe a l’equipe :

npx @cside.dev/cli --team-id 345678765434567890

Quand utiliser le CLI

Utilisez le CLI si :

  • Vous avez un processus de build de site statique (SSG)
  • Vous voulez une integration sans code
  • Vous ne voulez pas modifier votre code source

Le CLI automatiquement :

  1. Injecte le script cside dans votre HTML
  2. Ajoute les attributs referrerpolicy requis

Content Security Policy (CSP)

Si votre site utilise une Content Security Policy, vous devez quand meme la mettre a jour lorsque vous utilisez le CLI. Ajoutez *.csidetm.com a vos directives script-src et connect-src. Cela n’est necessaire que si vous utilisez ces directives. Si connect-src n’est pas present, vous n’avez pas besoin d’ajouter connect-src :

Content-Security-Policy: script-src 'self' *.csidetm.com; connect-src 'self' *.csidetm.com
Uniquement si vous utilisez ces directives

Vous n’avez besoin de mettre a jour votre CSP que si vous avez deja des directives script-src ou connect-src definies. Si vous n’utilisez pas de CSP, ou n’utilisez pas ces directives specifiques, aucune modification n’est necessaire.

Ce que chaque directive autorise :

  • script-src : Si vous utilisez cette directive, ajoutez *.csidetm.com pour autoriser le script cside a s’executer
  • connect-src : Si vous utilisez cette directive, ajoutez *.csidetm.com pour autoriser le script cside a communiquer avec l’infrastructure edge

Pour plus de details sur la configuration CSP, consultez Ajouter cside a votre CSP et Configuration des rapports CSP.

Methodes d’integration alternatives

Was this page helpful?