mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-20 14:30:41 +00:00

Files

snomiao 0d5ced4686 feat: deploy frontend preview to Cloudflare Pages with ConnectionPanel

- Add CI workflow to build and deploy to comfy-ui.pages.dev on every push/PR
- Add deploy script with auto PR comments following storybook pattern
- Add ConnectionPanelView at /connect with backend URL config, HTTP/WS test, CLI guide, build info
- Inject CI metadata (branch, PR#, run ID, job ID) as build-time defines
- Add i18n strings, route, unit tests (8/8 passing)

Amp-Thread-ID: https://ampcode.com/threads/T-019d7738-d170-7409-8699-23a55d8ad5e7
Co-authored-by: Amp <amp@ampcode.com>

2026-04-10 15:58:32 +00:00

3.0 KiB

Raw Blame History

ComfyUI Frontend Preview — Cloudflare Pages Deployment

Deploy the ComfyUI frontend to comfy-ui.pages.dev with a connection panel for users to connect to their local (or remote) ComfyUI backend.

Plan

Phase 1: Build Metadata & CI Pipeline

Plan: track everything in TODO.md (bujo)
global.d.ts: declare new CI build-time constants
eslint.config.ts: register CI globals as readonly
vite.config.mts: inject CI env vars (__CI_BRANCH__, __CI_PR_NUMBER__, __CI_RUN_ID__, __CI_JOB_ID__)
.github/workflows/ci-deploy-preview.yaml: build + deploy to CF Pages on every push/PR
scripts/cicd/pr-preview-deploy-and-comment.sh: deploy script + PR comment (follows storybook pattern)

Phase 2: ConnectionPanel Component

src/views/ConnectionPanelView.vue: standalone connection/setup page
- Build info badge (PR/branch, commit SHA tooltip, job ID, action ID, base version from package.json)
- Backend URL input (default http://127.0.0.1:8188/, saved in localStorage)
- Test button: HTTP (GET /api/system_stats) + WebSocket (ws://host/ws)
- Connection status indicators (HTTP ✓/✗, WS ✓/✗)
- Command-line guide to run ComfyUI with CORS enabled
- Local network permission guidance
src/locales/en/main.json: i18n strings for connection panel

Phase 3: Router Integration

src/router.ts: add /connect route for ConnectionPanelView

Phase 4: Tests

src/views/ConnectionPanelView.test.ts: unit tests (8/8 passing)

Phase 5: Verification

pnpm typecheck — ✅ passed
pnpm lint — ✅ passed
pnpm test:unit -- src/views/ConnectionPanelView.test.ts — ✅ 8/8 passed

Files Changed/Created

File	Action
`TODO.md`	created
`.github/workflows/ci-deploy-preview.yaml`	created
`scripts/cicd/pr-preview-deploy-and-comment.sh`	created
`src/views/ConnectionPanelView.vue`	created
`src/views/ConnectionPanelView.test.ts`	created
`src/locales/en/main.json`	modified (added `connectionPanel` section)
`src/router.ts`	modified (added `/connect` route)
`global.d.ts`	modified (added `__CI_*` declarations)
`vite.config.mts`	modified (added `__CI_*` defines)
`eslint.config.ts`	modified (added `__CI_*` globals)

Log

[2026-04-10] Created plan, implemented all phases, all checks passing

3.0 KiB Raw Blame History