Skip to main content
Ondersteunde frameworks
Language

CLI-integratie

Gebruik de cside CLI-tool om het script na uw build automatisch in statische HTML-bestanden te injecteren, met detectie van .next- en dist-mappen.

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. Geef uw team-ID door met --team-id; de CLI accepteert geen positionele argumenten:

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

Uw team-ID staat onder Team Settings > General in het cside-dashboard. Zonder --team-id injecteert de CLI de gedeelde host proxy.csidetm.com in plaats van de host van uw team.

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-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 blijft een alias van --device-intelligence, zodat bestaande buildscripts blijven werken.

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

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

Het Device Intelligence-script injecteren in plaats van het monitoringscript:

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

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:

  1. Verwijdert elke cside-scripttag die al in de HTML staat, zodat opnieuw uitvoeren na elke build nooit een duplicaat toevoegt
  2. Injecteert het cside script als eerste <script> of <link> in elk HTML-bestand
  3. Voegt het vereiste referrerpolicy="origin"-attribuut toe
  4. Slaat de mappen node_modules en vendor over bij het zoeken naar HTML-bestanden

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

Was this page helpful?