Fix hot module reloading for theme development#7673
Open
graygilmore wants to merge 2 commits into
Open
Conversation
Picks up four releases that improve the hot-reload script served to the browser during `theme dev`: - Prevent EventSource connections to unknown origins - Use the original storefront domain when calling the Section Rendering API - Allow messages from the tab opener for theme preview - Improve stylesheet hot-reloading in the Online Store Editor to avoid full refreshes
Hot reload stopped working in the theme editor after 226b49e locked the dev server's CORS allowlist down to localhost and the store domain to close a vulnerability where any site could read from the localhost server. The theme editor renders its storefront preview in an iframe served from https://online-store-web.shopifyapps.com, which opens a hot-reload EventSource back to the local dev server. That origin wasn't on the allowlist, so the browser blocked the connection ("Connection closed by the server, attempting to reconnect..."). Add the Online Store Editor origin to the allowlist so hot reload works in the editor again, without reopening the wildcard CORS hole.
Contributor
Author
|
/snapit |
Contributor
|
🫰✨ Thanks @graygilmore! Your snapshot has been published to npm. Test the snapshot by installing your package globally: pnpm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20260529205834Caution After installing, validate the version by running |
graygilmore
changed the title
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
1 participant
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.
WHY are these changes introduced?
Fixes Shopify/developer-tools-team#1033.
Hot reload stopped working in the theme editor (Online Store Editor) a while back. With
shopify theme devrunning, reloading the customizer just logs[HotReload] Connection closed by the server, attempting to reconnect...and never reconnects. It's been reported a few times (community forum threads, dev-tools issue #1033), and an earlier attempt to fix it (#6833) stalled.There are two separate problems:
{% schema %}changes.localhostand the store domain in 226b49e (to close a hole where any website could read from the localhost server). The theme editor renders its preview in an iframe served fromhttps://online-store-web.shopifyapps.com, which opens the hot-reloadEventSourceback to the local dev server. That origin isn't on the allowlist, so the browser blocks the connection — which is the reconnect loop above.The dependency bump on its own doesn't fix this — I confirmed the CORS errors on #6833 back in March. The server has to allow the editor's origin too.
WHAT is this pull request doing?
@shopify/theme-hot-reloadfrom0.0.18to0.0.22. On the client side this triggers a full reload on schema changes, restricts the EventSource to known origins, and uses the original storefront domain when calling the Section Rendering API.https://online-store-web.shopifyapps.comto the dev server's CORS allowlist so the theme editor's preview iframe can open the hot-reload connection.Originheader).This intentionally keeps the allowlist approach from 226b49e instead of going back to wildcard CORS, so the original vulnerability stays closed. It also only allowlists the production editor origin.
How to test your changes?
A snapshot has been created for easy testing:
shopify theme devagainst a store and open the theme editor (useeshortcut).[HotReload] Connected. Before this change you'd get[HotReload] Connection closed by the server, attempting to reconnect...instead.