CI/CD

GitHub Actions and GitLab CI recipes for publish-on-build with DISPLAYDEV_API_KEY.

On this page

Wire dsp publish into your build so every merge produces a fresh URL. The two most common cases are an HTML report (Storybook, MkDocs, a static dashboard) and Playwright HTML test reports.

Authentication

In every CI flow, set the DISPLAYDEV_API_KEY secret. The CLI reads it from the environment:

bash

DISPLAYDEV_API_KEY=$DISPLAYDEV_API_KEY dsp publish report/index.html --id <shortId>

Store the key as a GitHub Actions secret, GitLab CI variable, or whatever your CI exposes. Never check it in.

GitHub Actions

yaml

name: Publish report
 
on:
  push:
    branches: [main]
 
jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22 }
      - run: npm ci
      - run: npm run build:report
      - run: npx -y @displaydev/cli publish dist/report.html --id ${{ vars.DISPLAY_ARTIFACT_ID }}
        env:
          DISPLAYDEV_API_KEY: ${{ secrets.DISPLAYDEV_API_KEY }}

Try this without committing

Before pushing the YAML, sanity-check the publish locally:

bash

DISPLAYDEV_API_KEY=$DISPLAYDEV_API_KEY \
  dsp publish dist/report.html --id <shortId>

If the local invocation prints a URL, your YAML will work too.

Playwright HTML reports

Playwright writes its HTML report to playwright-report/index.html. Republish it on every CI run, pinned to the same artifact ID, and your team always has the latest results at a stable URL.

yaml

- name: Run Playwright tests
  run: npx playwright test
 
- name: Publish report
  if: always()
  run: |
    npx -y @displaydev/cli publish playwright-report/index.html \
      --id ${{ vars.PLAYWRIGHT_ARTIFACT_ID }}
  env:
    DISPLAYDEV_API_KEY: ${{ secrets.DISPLAYDEV_API_KEY }}

if: always() makes sure the report uploads even when the test step fails. Most teams want exactly that — the failures are the most interesting case.

GitLab CI

yaml

publish:
  stage: deploy
  image: node:22
  script:
    - npm ci
    - npm run build:report
    - npx -y @displaydev/cli publish dist/report.html --id $DISPLAY_ARTIFACT_ID
  variables:
    DISPLAYDEV_API_KEY: $DISPLAYDEV_API_KEY
  only:
    - main

Set DISPLAYDEV_API_KEY and DISPLAY_ARTIFACT_ID as masked CI/CD variables in the project settings.

Was this page helpful?