--- title: "Automating Mobile QR Code Previews in CI/CD Pipelines with GitHub Actions" description: "A complete DevOps guide to building a custom GitHub Action that generates dynamic preview QR codes to create a qr code from a link for Vercel/Netlify preview deployments." tags: github, devops, ci-cd, automation keywords: create qr code from link, create qr code with link, generate qr code for link, make a qr code for a link, qr code generator link canonical_url: https://www.qrmaster.net/blog/qr-code-api-documentation --- # Automating Mobile QR Code Previews in CI/CD Pipelines with GitHub Actions When reviewing Pull Requests (PRs) for mobile-first web applications, responsive websites, or PWA features, developers and QA engineers frequently waste time manually copying Vercel or Netlify preview URLs, opening messaging apps, sending links to test devices, or re-typing long URLs into mobile browser address bars. What if every time a developer opened a Pull Request, a **GitHub Action automatically allowed you to create a qr code from a link** pointing directly to that branch's live preview URL and commented it right into the PR thread? Quality Assurance testers could simply point their mobile phone camera at the computer screen and instantly test the live staging build! In this DevOps workflow guide, we will build a custom GitHub Actions workflow (`.github/workflows/qr-preview.yml`) that auto-generates QR preview images when you **create a qr code with a link**. --- ## 1. CI/CD Preview Architecture Here is how the automated PR feedback loop operates: ``` ┌────────────────────────────────────────┐ │ Developer Pushes Code to GitHub PR │ └───────────────────┬────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ Vercel / Netlify Deploy Preview Builds │ (Generates e.g. https://preview-xyz.vercel.app) └───────────────────┬────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ GitHub Action Triggered (pull_request) │ └───────────────────┬────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ Node.js Script Generates QR Code SVG │ (Create QR Code From Link) └───────────────────┬────────────────────┘ │ ▼ ┌────────────────────────────────────────┐ │ Action Posts/Updates PR Markdown Comm. │ └────────────────────────────────────────┘ ``` --- ## 2. Setting Up the GitHub Action Workflow Create a new file in your repository at `.github/workflows/qr-preview.yml`. ### Workflow Configuration (`.github/workflows/qr-preview.yml`) ```yaml name: Mobile QR Code Preview Generator on: pull_request: types: [opened, synchronize, reopened] permissions: pull-requests: write contents: read jobs: generate-qr-preview: runs-on: ubuntu-latest steps: - name: Checkout Repository uses: actions/checkout@v4 - name: Setup Node.js Environment uses: actions/setup-node@v4 with: node-version: '20' - name: Install QR Code Generator Dependencies run: | npm install qrcode - name: Get Preview URL & Create QR Code From Link id: generate_qr env: PR_NUMBER: ${{ github.event.pull_request.number }} REPO_NAME: ${{ github.repository }} BRANCH_NAME: ${{ github.head_ref }} run: | # Target deployment URL to create a qr code from a link PREVIEW_URL="https://preview-${PR_NUMBER}-${BRANCH_NAME}.vercel.app" echo "Preview Target URL: $PREVIEW_URL" echo "preview_url=$PREVIEW_URL" >> $GITHUB_OUTPUT # Create inline Node script to generate SVG QR code as Data URI node -e " const QRCode = require('qrcode'); const url = '$PREVIEW_URL'; QRCode.toString(url, { type: 'svg', margin: 2, color: { dark: '#0F172A', light: '#FFFFFF' } }, (err, svg) => { if (err) throw err; const encoded = Buffer.from(svg).toString('base64'); const dataUri = 'data:image/svg+xml;base64,' + encoded; require('fs').writeFileSync('qr_data_uri.txt', dataUri); }); " DATA_URI=$(cat qr_data_uri.txt) echo "qr_data_uri=$DATA_URI" >> $GITHUB_OUTPUT - name: Comment QR Code on Pull Request uses: actions/github-script@v7 with: github-token: ${{ secrets.GITHUB_TOKEN }} script: | const prNumber = context.payload.pull_request.number; const previewUrl = '${{ steps.generate_qr.outputs.preview_url }}'; const qrDataUri = '${{ steps.generate_qr.outputs.qr_data_uri }}'; const commentBody = `### 📱 Mobile Preview QR Code Scan this QR code with your phone camera to open and test this PR preview instantly:

Mobile Preview QR Code
Open Direct Preview Link ↗

--- *Automated by QR CI/CD Pipeline*`; const comments = await github.rest.issues.listComments({ owner: context.repo.owner, repo: context.repo.repo, issue_number: prNumber, }); const botComment = comments.data.find(comment => comment.user.type === 'Bot' && comment.body.includes('Mobile Preview QR Code') ); if (botComment) { await github.rest.issues.updateComment({ owner: context.repo.owner, repo: context.repo.repo, comment_id: botComment.id, body: commentBody }); console.log('Updated existing PR comment.'); } else { await github.rest.issues.createComment({ owner: context.repo.owner, repo: context.repo.repo, issue_number: prNumber, body: commentBody }); console.log('Created new PR comment.'); } ``` --- ## 3. How It Works Under the Hood ### Base64 Data URI Trick for Markdown Rendering GitHub Markdown does not allow uploading local SVG files directly from a runner disk into a comment thread without hosted storage. By encoding the generated vector SVG into a **Base64 Data URI string** (`data:image/svg+xml;base64,PHN2Zy...`), the image renders natively inside GitHub PR comment threads without requiring any external S3 bucket uploads when you **generate a qr code for a link**! ```html ``` ### Preventing Comment Spam The script lists existing PR comments and searches for a previous bot message containing `"Mobile Preview QR Code"`. If a developer pushes 5 new commits to the PR, the action **updates the single existing comment** with the latest deployment link instead of posting 5 separate duplicate comments. --- ## 4. Advanced Integrations: Netlify & Cloudflare Pages Pipelines If your repository deploys via Netlify or Cloudflare Pages instead of Vercel, you can hook into their deployment completion events. ### Netlify Deployment Hook Example: ```yaml - name: Fetch Netlify Preview Link id: netlify uses: nwtgck/actions-netlify@v3.0 with: publish-dir: './build' github-token: ${{ secrets.GITHUB_TOKEN }} deploy-alias: pr-${{ github.event.number }} env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} ``` ### Adding Device UTM Tracking Parameters To measure how many QA test scans originate from GitHub Pull Request comments vs Slack links, append custom UTM parameters to **make a qr code for a link** before generating the barcode: ```javascript const previewUrlWithUtm = `${previewUrl}?utm_source=github&utm_medium=pr_comment&utm_campaign=qa_mobile_test`; ``` --- ## 5. Automated Unit & E2E Testing with Playwright To take mobile QA automation a step further, you can combine this workflow with headless E2E testing tools like Microsoft Playwright or Cypress. For instance, your CI runner can launch a mobile Chrome emulation context, load the preview deployment URL encoded in the QR code, take automated screenshots across different screen viewport sizes (iPhone 15 Pro, Pixel 8, iPad Air), and upload visual diffs directly into the Pull Request build artifact summary. ```typescript import { test, expect, devices } from '@playwright/test'; test.use({ ...devices['iPhone 15 Pro'] }); test('Mobile Staging Visual Regression Check', async ({ page }) => { await page.goto(process.env.STAGING_URL || 'http://localhost:3000'); await expect(page).toHaveTitle(/QR Master/); await page.screenshot({ path: 'mobile-preview.png' }); }); ``` --- ## 6. Security & Rate Limiting Guidelines ``` [ ] Grant `pull-requests: write` permission scoped strictly to the workflow job. [ ] Store third-party tokens (Vercel/Netlify tokens) securely in GitHub Repository Secrets (`${{ secrets.VERCEL_TOKEN }}`). [ ] Enforce Base64 length checks to ensure generated SVG payload remains under 64 KB to comply with GitHub comment payload size limits. ``` --- ## Conclusion Automating mobile QR code previews in your CI/CD pipeline to **create a qr code from a link** eliminates friction for QA teams, product managers, and developers testing mobile-first web features. To integrate automated REST API QR code generation into your custom developer workflows, check out [QR Master Developer API Documentation](https://www.qrmaster.net/blog/qr-code-api-documentation).