DEV Community

Cover image for Generate a QR Code for Every Preview Deployment
Timo
Timo

Posted on

Generate a QR Code for Every Preview Deployment

A preview URL is only useful when somebody can open it.

That sounds obvious, but it is a recurring friction point in reviews. A developer posts a link in a pull request. Someone opens the PR on a phone, copies the URL, switches apps, pastes it, and hopes the preview still exists. The link is correct, but the path to it is needlessly long.

A QR code is a small improvement here: generate one alongside the deployment artifact, attach it to the workflow, and let reviewers scan it from the pull request on a second screen.

The workflow

The input is a preview URL. The output is a PNG or SVG that a CI workflow can upload as an artifact.

With QR Master CLI, the core command is deliberately small:

npx qrmaster-cli "https://preview.example.com/pr/42" --output ./preview-qr.svg
Enter fullscreen mode Exit fullscreen mode

The SVG format is useful when the code may appear in a report, a release note, or another asset that needs to scale cleanly. PNG is fine for a fast artifact.

A GitHub Actions example

name: Create preview QR code

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  preview-qr:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Generate QR code
        run: npx qrmaster-cli "https://preview.example.com/pr/PR_NUMBER" --output ./preview-qr.svg
      - name: Upload QR artifact
        uses: actions/upload-artifact@v4
        with:
          name: preview-qr
          path: ./preview-qr.svg
Enter fullscreen mode Exit fullscreen mode

Replace PR_NUMBER with the deployment identifier your workflow exposes.

The command can encode any URL or text payload. For review flows, the useful rule is simple: keep the code close to the thing it opens.

A few practical details

  1. Test the code on a phone before you make it part of a release workflow.
  2. Keep the preview URL accessible to the people who scan it; a QR code does not bypass authentication.
  3. Prefer SVG if the artifact will be reused in documentation or printed.
  4. Label the artifact clearly so a reviewer knows which environment it opens.

QR codes do not replace a clickable link. They give a second, low-friction route when the link is being viewed away from the device that should open it.

For static codes generated locally and dynamic codes with editable destinations, see QR Master.

What small review step would you remove if a second-screen scan were one command away?

Top comments (0)