Add hosted HTML apps prototype to Shopify CLI#6796
Draft
Conversation
This commit implements a prototype for hosted HTML applications in the Shopify CLI, based on technical requirements for static/hosted apps. ## Key Features - New `hosted_html` extension type specification - Support for pure HTML/CSS/JS apps (no React required) - Iframe sandboxing with srcdoc for security isolation - Hash-based routing support via postMessage API - Static file serving with comprehensive MIME type support - File validation (size limits, HTTPS enforcement) - Dev server integration with sandboxed rendering ## Files Added - `hosted_html.ts`: Extension specification with validation - Middleware: `getHostedHtmlMiddleware()` for sandboxed serving - Test app: Complete sample hosted HTML application - Documentation: HOSTED_HTML_PROTOTYPE.md ## Implementation Details ### Security Model - Iframe with srcdoc creates null origin for isolation - Sandbox attributes: allow-scripts, allow-same-origin, allow-forms - CSP headers restrict frame ancestors - HTTPS enforcement for external resources - 50MB bundle size limit ### Build System - Uses existing `copy_files` build mode - Copies HTML, CSS, JS, images, fonts to dist/ - Validates file types and sizes - Ignores node_modules, .git, test files ### Dev Server - New route handler for hosted_html extensions - Wraps content in sandboxed iframe wrapper - Supports client-side navigation via postMessage - Serves assets from build directory ## Technical Background Based on internal tech docs and discussions about: - Asset management and CDN scalability - Security sandboxing similar to UI extensions - Content-addressable hashing for assets (future work) - Direct API access by default - Escape hatch from UI Extensions framework ## Testing Sample test app included in `test-hosted-app/`: - Demonstrates pure HTML/CSS/JS structure - Client-side routing example - Sandboxed execution validation - Mock API integration ## Future Work - AMF module integration for deployment - Content-addressable asset hashing - Image optimization service integration - Subdomain isolation per app - Session token support for Shopify API 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This commit implements a prototype for hosted HTML applications in the Shopify CLI, based on technical requirements for static/hosted apps.
Key Features
hosted_htmlextension type specificationFiles Added
hosted_html.ts: Extension specification with validationgetHostedHtmlMiddleware()for sandboxed servingImplementation Details
Security Model
Build System
copy_filesbuild modeDev Server
Technical Background
Based on internal tech docs and discussions about:
Testing
Sample test app included in
test-hosted-app/:Future Work
🤖 Generated with Claude Code
WHY are these changes introduced?
Fixes #0000
WHAT is this pull request doing?
How to test your changes?
Post-release steps
Measuring impact
How do we know this change was effective? Please choose one:
Checklist