CLI-integratie | cside docs

De CLI is een zelfstandige integratiemethode voor statische sites. Het injecteert automatisch het cside monitoring script in uw HTML-bestanden. Geen handmatige script-tag nodig.

Geen handmatige scripttoevoeging nodig

Bij gebruik van de CLI hoeft u het cside script niet handmatig aan uw site toe te voegen. De CLI doet dit automatisch voor u. Gebruik de CLI of handmatige scriptinstallatie, niet beide.

Alleen statische HTML

De CLI ondersteunt alleen statische HTML-bestanden. Gebruik voor SSR-applicaties het handmatige script of het Next.js-pakket.

Ondersteunde frameworks

De CLI werkt met elk framework dat statische HTML-bestanden genereert:

Astro (statische modus)
Next.js (statische export)
Gatsby
Nuxt (statische modus)
SvelteKit (statische adapter)
Eleventy (11ty)
Hugo
VitePress / VuePress
Docusaurus

Elk ander framework dat statische HTML-bestanden genereert, werkt ook. De CLI detecteert automatisch .next en dist uitvoermappen, of specificeer een aangepaste map met --dir.

Installatie

npm i @cside.dev/cli

Of direct uitvoeren zonder installatie:

npx @cside.dev/cli

Gebruik

Voer de CLI uit na uw bouwproces om het cside script in uw HTML-bestanden te injecteren:

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

CLI-opties

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]

Voorbeelden

Een specifieke map verwerken:

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

Een enkel bestand verwerken:

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

Een team-specifieke scripthost injecteren:

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

Wanneer de CLI gebruiken

Gebruik de CLI als:

U een statisch site (SSG) bouwproces heeft
U een zero-code integratie wilt
U uw broncode niet wilt wijzigen

De CLI doet automatisch het volgende:

Injecteert het cside script in uw HTML
Voegt de vereiste referrerpolicy-attributen toe

Content Security Policy (CSP)

Als uw site een Content Security Policy gebruikt, moet u deze nog steeds bijwerken bij gebruik van de CLI. Voeg *.csidetm.com toe aan uw script-src en connect-src richtlijnen. Dit is alleen vereist als u die richtlijnen gebruikt. Als connect-src niet aanwezig is, hoeft u connect-src niet toe te voegen:

Content-Security-Policy: script-src 'self' *.csidetm.com; connect-src 'self' *.csidetm.com

Alleen als u deze richtlijnen gebruikt

U hoeft uw CSP alleen bij te werken als u al script-src of connect-src richtlijnen heeft gedefinieerd. Als u geen CSP gebruikt, of deze specifieke richtlijnen niet gebruikt, zijn er geen wijzigingen nodig.

Wat elke richtlijn toestaat:

script-src: Als u deze richtlijn gebruikt, voeg *.csidetm.com toe om het cside script uit te laten voeren
connect-src: Als u deze richtlijn gebruikt, voeg *.csidetm.com toe om het cside script te laten communiceren met de edge-infrastructuur

Voor meer details over CSP-configuratie, zie cside toevoegen aan uw CSP en CSP-rapportageconfiguratie.

Alternatieve integratiemethoden

Handmatige scriptinstallatie: Voor elke site, voeg de script-tag zelf toe
Next.js-pakket: Voor Next.js-apps met App Router of Pages Router