Docker for Hardware Simulation in Dev/CI: Emulating Kiosks, Scanners, and Printers to Reproduce Angular 20+ Defects Fast

The airport kiosk that wouldn’t print—and why Docker solved it

Why Docker hardware simulation matters for Angular 20+ teams

Reference architecture: device simulators, Angular adapter, and CI harness

// device.store.ts — SignalStore for device state (Angular 20, @ngrx/signals)
import { Injectable, inject } from '@angular/core';
import { SignalStore, withState, withMethods } from '@ngrx/signals';
import { toSignal } from '@angular/core/rxjs-interop';
import { webSocket } from 'rxjs/webSocket';
import { retryBackoff } from 'backoff-rxjs';

interface DeviceState {
  scannerConnected: boolean;
  lastScan?: { value: string; ts: number };
  printerConnected: boolean;
  printQueue: number;
  errors: string[];
}

@Injectable({ providedIn: 'root' })
export class DeviceStore extends SignalStore(
  withState<DeviceState>({ scannerConnected: false, printerConnected: false, printQueue: 0, errors: [] }),
  withMethods((store) => {
    const scanner$ = webSocket<any>({ url: 'ws://localhost:9001' }).pipe(
      retryBackoff({ initialInterval: 500, maxInterval: 5000, randomizationFactor: 0.25 })
    );

    const msgs = toSignal(scanner$, { initialValue: null });

    function connectScanner() {
      const m = msgs();
      if (!m) return;
      if (m.type === 'connected') store.patch({ scannerConnected: true });
      if (m.type === 'scan') store.patch({ lastScan: m.payload });
      if (m.type === 'error') store.patch({ errors: [...store.state().errors, m.message] });
    }

    async function print(payload: Blob) {
      const res = await fetch('http://localhost:9100/print', { method: 'POST', body: payload });
      const json = await res.json();
      if (json.status === 'queued') store.patch({ printQueue: store.state().printQueue + 1 });
    }

    return { connectScanner, print };
  })
) {}

# simulators/scanner/scanner.js — WS + REST for deterministic tests
const { WebSocketServer } = require('ws');
const express = require('express');
const app = express();
app.use(express.json());

const wss = new WebSocketServer({ port: 9001 });
let sockets = [];
wss.on('connection', ws => {
  sockets.push(ws);
  ws.send(JSON.stringify({ type: 'connected' }));
  ws.on('close', () => (sockets = sockets.filter(s => s !== ws)));
});

app.post('/emit', (req, res) => {
  const value = req.body.value || 'TEST-123';
  const msg = JSON.stringify({ type: 'scan', payload: { value, ts: Date.now() } });
  sockets.forEach(s => s.readyState === 1 && s.send(msg));
  res.json({ ok: true });
});

app.listen(9002, () => console.log('scanner REST on :9002'));

# simulators/printer/printer.js — HTTP endpoint capturing print jobs + flaky acks
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.post('/print', (req, res) => {
  const id = Date.now();
  const file = fs.createWriteStream(path.join('/data', `${id}.bin`));
  req.pipe(file);
  file.on('finish', () => {
    // 10% of the time, drop the ack to reproduce field bugs
    if (Math.random() < 0.1) return res.destroy();
    res.json({ status: 'queued', id });
  });
});

app.get('/health', (_, r) => r.json({ ok: true }));
app.listen(9100, () => console.log('printer on :9100'));

Docker Compose and GitHub Actions pipeline

# docker-compose.yml
version: '3.9'
services:
  scanner:
    image: node:20-alpine
    working_dir: /app
    volumes:
      - ./simulators/scanner:/app
    command: sh -c "npm i ws express && node scanner.js"
    ports: ["9001:9001", "9002:9002"]
  printer:
    image: node:20-alpine
    working_dir: /app
    volumes:
      - ./simulators/printer:/app
      - ./artifacts/prints:/data
    command: sh -c "npm i express && node printer.js"
    ports: ["9100:9100"]

# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
  cypress:
    runs-on: ubuntu-latest
    services:
      scanner:
        image: node:20-alpine
        options: >-
          --health-cmd "wget -qO- localhost:9002 || exit 1" --health-interval 3s --health-timeout 2s --health-retries 20
        ports:
          - 9001:9001
          - 9002:9002
        volumes:
          - ${{ github.workspace }}/simulators/scanner:/app
        command: sh -c "cd /app && npm i ws express && node scanner.js"
      printer:
        image: node:20-alpine
        options: >-
          --health-cmd "wget -qO- localhost:9100/health || exit 1" --health-interval 3s --health-timeout 2s --health-retries 20
        ports:
          - 9100:9100
        volumes:
          - ${{ github.workspace }}/simulators/printer:/app
          - ${{ github.workspace }}/artifacts/prints:/data
        command: sh -c "cd /app && npm i express && node printer.js"
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx run web:build
      - run: npx http-server dist/apps/web -p 4200 &
      - run: npx wait-on http://localhost:4200
      - run: npx cypress run --browser chrome --record false
      - uses: actions/upload-artifact@v4
        with: { name: print-artifacts, path: artifacts/prints }

// cypress/e2e/scanner.cy.ts
it('accepts a barcode and routes to order page', () => {
  cy.visit('/scan');
  // inject deterministic scan
  cy.request('POST', 'http://localhost:9002/emit', { value: 'ORDER-ABC-123' });
  // assert UI reacts via DeviceStore (Signals)
  cy.findByRole('status', { name: /scanner connected/i }).should('exist');
  cy.findByText(/ORDER-ABC-123/).should('be.visible');
});

UI states, accessibility, and telemetry

<!-- status-banner.component.html -->
<p-toast></p-toast>
<div role="status" aria-live="polite" class="status-banner" [class.error]="device.errors().length">
  <ng-container *ngIf="device.scannerConnected(); else off">
    <i class="pi pi-barcode"></i> Scanner connected
  </ng-container>
  <ng-template #off>
    <i class="pi pi-ban"></i> Scanner offline — retrying…
  </ng-template>
</div>

.status-banner {
  padding: var(--space-2);
  background: var(--surface-50);
  &.error { background: var(--red-50); color: var(--red-900); }
}

When to hire an Angular developer for legacy rescue

What to measure next