Skip to main content
Frameworks pris en charge
Language

Integration CLI

Utilisez l'outil CLI cside pour ajouter automatiquement cside aux fichiers HTML statiques après 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. Passez l’ID de votre equipe avec --team-id ; le CLI n’accepte aucun argument positionnel :

// package.json
{
  "scripts": {
    "build": "next build && npx @cside.dev/cli@latest --team-id [your-team-id]"
  }
}

L’ID de votre equipe est affiche dans Team Settings > General du tableau de bord cside. Sans --team-id, le CLI injecte l’hote partage proxy.csidetm.com au lieu de l’hote de votre equipe.

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-id, --team
                 Inject a team-scoped cside script host using the provided team
                 ID.                                                     [string]
      --device-intelligence, --fingerprint
                 Inject cside device intelligence hosts on csidefd.com instead of
                 the default csidetm.com domain.
                                                      [boolean] [default: false]
  -h, --help     Show help                                             [boolean]

--fingerprint reste un alias de --device-intelligence pour que les scripts de build existants continuent de fonctionner.

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 (recommande) :

npx @cside.dev/cli@latest --team-id [your-team-id]

Injecter le script Device Intelligence a la place du script de surveillance :

npx @cside.dev/cli@latest --team-id [your-team-id] --device-intelligence

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. Supprime toute balise script cside deja presente dans le HTML, de sorte qu’une nouvelle execution apres chaque build n’ajoute jamais de doublon
  2. Injecte le script cside comme premier <script> ou <link> de chaque fichier HTML
  3. Ajoute l’attribut referrerpolicy="origin" requis
  4. Ignore les repertoires node_modules et vendor lors de la recherche des fichiers HTML

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?