Skip to content

Add same-origin proxy mode for Cypress compatibility#22

Merged
ctrlaltdylan merged 5 commits intomainfrom
http-proxy-middleware
Mar 2, 2026
Merged

Add same-origin proxy mode for Cypress compatibility#22
ctrlaltdylan merged 5 commits intomainfrom
http-proxy-middleware

Conversation

@ctrlaltdylan
Copy link
Copy Markdown
Owner

Summary

  • Adds --proxy CLI flag that mounts http-proxy-middleware at /__proxy/ to reverse-proxy the app through mock-bridge
  • Makes the iframe same-origin, enabling Cypress to interact with embedded app content (fixes Feature request: same-origin / proxy mode for Cypress compatibility #17)
  • Includes WebSocket proxying for HMR support
  • Fully backwards compatible — no behavior change without --proxy

Usage

npx mock-bridge http://localhost:3000 --proxy

Or test this branch directly:

npx github:ctrlaltdylan/mock-bridge#http-proxy-middleware http://localhost:3000 --proxy

Then in Cypress:

cy.visit('http://localhost:3080');
cy.get('iframe').its('0.contentDocument.body')
  .should('not.be.empty')
  .within(() => {
    cy.contains('Your App Content');
  });

Test plan

  • Start with --proxy flag, confirm app loads via /__proxy/ (same-origin iframe)
  • Confirm HMR/WebSocket still works through the proxy
  • Confirm session tokens and mock App Bridge still function
  • Confirm Cypress can access iframe content
  • Start without --proxy, confirm no behavior change

🤖 Generated with Claude Code

ctrlaltdylan and others added 5 commits February 13, 2026 13:22
Implements Admin API request interception with three modes:
- 'mock': Returns mock data for products, orders, customers (default)
- { proxy: string }: Forwards requests to app's backend proxy
- { accessToken: string }: Direct requests to Shopify with token

Changes:
- Add AdminApiConfig type to src/types/index.ts
- Add /mock-admin-api endpoint with GraphQL and REST handlers
- Update App Bridge to intercept fetch('/admin/api/...') calls
- Add adminApi option to CLI init template
- Update README with API support matrix and configuration docs

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add `files` field to package.json and create admin-frame/.npmignore
so that dist/, admin-frame/dist/, and app-bridge/dist/ are included
in the published tarball instead of being excluded by .gitignore.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When --proxy is passed, mount http-proxy-middleware at /__proxy/ to
reverse-proxy the app through mock-bridge. This makes the iframe
same-origin, which is required for Cypress (which cannot interact
with cross-origin iframes). WebSocket proxying is included for HMR.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Allows running directly from the feature branch via:
npx github:ctrlaltdylan/mock-bridge#http-proxy-middleware

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@ctrlaltdylan ctrlaltdylan merged commit c053bad into main Mar 2, 2026
1 check passed
@ctrlaltdylan ctrlaltdylan deleted the http-proxy-middleware branch March 2, 2026 14:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature request: same-origin / proxy mode for Cypress compatibility

1 participant