PWA Deployment

Architecture

User Browser
    ↓ HTTPS
https://your-cms.example.com/player/pwa/
    ↓
Reverse Proxy (SWAG/nginx, Port 443)
    ↓
Xibo CMS container
    ↓
web/chromeos/ → PWA Player Files (HTML/JS/CSS)

Same origin = No CORS issues.

The PWA must be served from the same domain as the CMS. All API calls (REST, SOAP, file downloads) target the CMS origin.

Build

# From the xiboplayer monorepo
pnpm install
pnpm --filter @xiboplayer/pwa build    # Production bundle → packages/pwa/dist/

Deploy to CMS

Copy dist/* into the CMS container's web/chromeos/ directory. The CMS .htaccess rewrites /player/pwa/* → web/chromeos/*.

# Example with podman
podman cp dist/. xibo-cms-web:/var/www/cms/web/chromeos/

Verify

1. Open https://your-cms.example.com/player/pwa/
2. Setup page should appear on first visit
3. Enter CMS address (same domain), CMS key, display name
4. Player connects and starts showing layouts

Alternative: Electron or Chromium (for kiosk/desktop)

For local or kiosk deployments where same-origin hosting isn't available, the Electron and Chromium wrappers include a built-in proxy server that handles CORS.

• Electron Player — bundles its own browser
• Chromium Player — uses the system browser

File Locations