Tunnel fix and cors defaults (#215)

Author: montalvomiguelo

.changeset/ten-bars-drive.md

@@ -0,0 +1,9 @@
+---
+"vite-plugin-shopify": minor
+---
+
+This release addresses a critical compatibility issue with Vite 7 and enhances the development server experience.
+
+**Vite 7 Tunnel Fix:** The plugin now automatically configures `server.allowedHosts` to work with the dynamic tunnel feature (`tunnel: true`), resolving the "Blocked request" error.
+
+**Smart CORS Defaults:** To improve the out-of-the-box experience, the plugin now sets a default CORS policy that allows requests from `localhost` and `*.myshopify.com`, which is a common requirement for theme development. Your custom `server.cors` settings will always take precedence.

docs/guide/troubleshooting.md

@@ -94,7 +94,7 @@ export default {
 
 If you are experiencing Cloudflare tunnel errors with the Shopify Vite Plugin, you can use ngrok as a workaround.
 First, create an ngrok account and install the ngrok CLI, then follow their instructions to set up your access token.
-Next, run the command `ngrok http 3000` (or any other port number you prefer) and take note of the URL
+Next, run the command `ngrok http 5173` (or any other port number you prefer) and take note of the URL
 provided by ngrok, which ends with `ngrok-free.app`. Keep ngrok running. Finally, configure the plugin.
 
 ::: code-group
@@ -105,7 +105,7 @@ import shopify from 'vite-plugin-shopify'
 export default {
   plugins: [
     shopify({
-      tunnel: 'https://123abc.ngrok-free.app:3000' // [!code ++]
+      tunnel: 'https://123abc.ngrok-free.app' // [!code ++]
     })
   ]
 }

examples/vite-shopify-example/package.json

@@ -8,11 +8,10 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@vitejs/plugin-basic-ssl": "^1.0.2",
     "cross-env": "^7.0.3",
     "sass": "^1.52.2",
     "tsconfig": "workspace:*",
-    "vite": "^6.0.11",
+    "vite": "^7.2.4",
     "vite-plugin-page-reload": "workspace:*",
     "vite-plugin-shopify": "workspace:*"
   },

packages/vite-plugin-shopify/src/config.ts

@@ -67,7 +67,26 @@ export default function shopifyConfig (options: Required<Options>): Plugin {
             ? false
             : {
                 ...(config.server?.hmr === true ? {} : config.server?.hmr)
-              }
+              },
+          allowedHosts: config.server?.allowedHosts ?? [
+            ...(typeof options.tunnel === 'string'
+              ? (() => {
+                  try {
+                    return [new URL(options.tunnel).hostname]
+                  } catch {
+                    throw new Error(`Invalid tunnel URL: ${options.tunnel}`)
+                  }
+                })()
+              : options.tunnel
+                ? ['.trycloudflare.com']
+                : [])
+          ],
+          cors: config.server?.cors ?? {
+            origin: config.server?.origin ?? [
+              /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/, // allows localhost (default)
+              /\.myshopify\.com$/ // allows myshopify.com URLs
+            ]
+          }
         }
       }
 

packages/vite-plugin-shopify/src/html.ts

@@ -37,12 +37,7 @@ export default function shopifyHTML (options: Required<Options>): Plugin {
       }
     },
     configureServer ({ config, middlewares, httpServer }) {
-      const tunnelConfig = resolveTunnelConfig(options)
-
-      if (tunnelConfig.frontendPort !== -1) {
-        config.server.port = tunnelConfig.frontendPort
-        config.server.allowedHosts = [new URL(tunnelConfig.frontendUrl).hostname]
-      }
+      const { frontendUrl, frontendPort, usingLocalhost } = generateFrontendURL(options)
 
       httpServer?.once('listening', () => {
         const address = httpServer?.address()
@@ -55,16 +50,16 @@ export default function shopifyHTML (options: Required<Options>): Plugin {
             plugin.name === 'vite:react-babel' || plugin.name === 'vite:react-refresh'
           )
 
-          debug({ address, viteDevServerUrl, tunnelConfig })
+          debug({ address, viteDevServerUrl, frontendUrl, frontendPort, usingLocalhost })
 
           setTimeout(() => {
             void (async (): Promise<void> => {
               if (options.tunnel === false) {
                 return
               }
 
-              if (tunnelConfig.frontendUrl !== '') {
-                tunnelUrl = tunnelConfig.frontendUrl
+              if (frontendUrl !== '') {
+                tunnelUrl = frontendUrl
                 isTTY() && renderInfo({ body: `${viteDevServerUrl} is tunneled to ${tunnelUrl}` })
                 return
               }
@@ -76,7 +71,6 @@ export default function shopifyHTML (options: Required<Options>): Plugin {
               })
               tunnelClient = hook.valueOrAbort()
               tunnelUrl = await pollTunnelUrl(tunnelClient)
-              config.server.allowedHosts = [new URL(tunnelUrl).hostname]
               isTTY() && renderInfo({ body: `${viteDevServerUrl} is tunneled to ${tunnelUrl}` })
               const viteTagSnippetContent = viteTagSnippetPrefix(config) + viteTagSnippetDev(
                 tunnelUrl, options.entrypointsDir, reactPlugin, options.themeHotReload
@@ -88,8 +82,8 @@ export default function shopifyHTML (options: Required<Options>): Plugin {
           }, 100)
 
           const viteTagSnippetContent = viteTagSnippetPrefix(config) + viteTagSnippetDev(
-            tunnelConfig.frontendUrl !== ''
-              ? tunnelConfig.frontendUrl
+            frontendUrl !== ''
+              ? frontendUrl
               : viteDevServerUrl, options.entrypointsDir, reactPlugin, options.themeHotReload
           )
 
@@ -314,8 +308,14 @@ function isIpv6 (address: AddressInfo): boolean {
     address.family === 6
 }
 
-function resolveTunnelConfig (options: Required<Options>): FrontendURLResult {
-  let frontendPort = -1
+/**
+ * The tunnel creation logic depends on the tunnel option:
+ * - If tunnel is false, uses localhost
+ * - If tunnel is a string (custom URL), uses that URL
+ * - If tunnel is true, a tunnel is created (by default using cloudflare)
+ */
+function generateFrontendURL (options: Required<Options>): FrontendURLResult {
+  const frontendPort = -1
   let frontendUrl = ''
   let usingLocalhost = false
 
@@ -328,12 +328,7 @@ function resolveTunnelConfig (options: Required<Options>): FrontendURLResult {
     return { frontendUrl, frontendPort, usingLocalhost }
   }
 
-  const matches = options.tunnel.match(/(https:\/\/[^:]+):([0-9]+)/)
-  if (matches === null) {
-    throw new Error(`Invalid tunnel URL: ${options.tunnel}`)
-  }
-  frontendPort = Number(matches[2])
-  frontendUrl = matches[1]
+  frontendUrl = options.tunnel
   return { frontendUrl, frontendPort, usingLocalhost }
 }
 

packages/vite-plugin-shopify/test/config.test.ts

@@ -44,6 +44,71 @@ describe('vite-plugin-shopify:config', () => {
     expect(config.publicDir).toEqual('public')
     expect(config.build.rollupOptions.input).toEqual(['frontend/entrypoints/theme.js', 'resources/js/foo.js'])
   })
+
+  it('sets allowedHosts for dynamic tunnel', () => {
+    const options = resolveOptions({ tunnel: true })
+    const userConfig = plugin(options)
+    const config = userConfig.config({}, { command: 'serve', mode: 'development' })
+
+    expect(config.server.allowedHosts).toEqual(['.trycloudflare.com'])
+  })
+
+  it('sets allowedHosts for static tunnel URL', () => {
+    const options = resolveOptions({ tunnel: 'https://my-tunnel.ngrok-free.app' })
+    const userConfig = plugin(options)
+    const config = userConfig.config({}, { command: 'serve', mode: 'development' })
+
+    expect(config.server.allowedHosts).toEqual(['my-tunnel.ngrok-free.app'])
+  })
+
+  it('does not override user-defined allowedHosts', () => {
+    const options = resolveOptions({ tunnel: true })
+    const userConfig = plugin(options)
+
+    const config = userConfig.config({
+      server: {
+        allowedHosts: ['my-custom-host.com']
+      }
+    }, { command: 'serve', mode: 'development' })
+
+    expect(config.server.allowedHosts).toEqual(['my-custom-host.com'])
+  })
+
+  it('applies default CORS configuration when none is provided', () => {
+    const options = resolveOptions({})
+    const userConfig = plugin(options)
+    const config = userConfig.config({}, { command: 'serve', mode: 'development' })
+    const expectedCorsOrigin = [
+      /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/,
+      /\.myshopify\.com$/
+    ]
+    expect(config.server.cors.origin).toEqual(expectedCorsOrigin)
+  })
+
+  it('does not override user-defined CORS configuration (boolean)', () => {
+    const options = resolveOptions({})
+    const userConfig = plugin(options)
+    const config = userConfig.config({
+      server: {
+        cors: false
+      }
+    }, { command: 'serve', mode: 'development' })
+    expect(config.server.cors).toBe(false)
+  })
+
+  it('does not override user-defined CORS configuration (object)', () => {
+    const options = resolveOptions({})
+    const userConfig = plugin(options)
+    const customCorsConfig = {
+      origin: 'https://my-custom-origin.com'
+    }
+    const config = userConfig.config({
+      server: {
+        cors: customCorsConfig
+      }
+    }, { command: 'serve', mode: 'development' })
+    expect(config.server.cors).toEqual(customCorsConfig)
+  })
 })
 
 describe('resolveOptions', () => {

packages/vite-plugin-shopify/test/html.test.ts

@@ -167,8 +167,6 @@ describe('vite-plugin-shopify:html', () => {
 
     const tagsHtml = await fs.readFile(path.join(__dirname, '__fixtures__', 'snippets', 'vite-tag.liquid'), { encoding: 'utf8' })
 
-    expect(mockViteDevServer.config.server.allowedHosts).toContain(new URL(mockResult.url).hostname)
-
     expect(tagsHtml).toMatchSnapshot()
 
     vi.useRealTimers()
@@ -178,7 +176,7 @@ describe('vite-plugin-shopify:html', () => {
     const options = resolveOptions({
       themeRoot: 'test/__fixtures__',
       sourceCodeDir: 'test/__fixtures__/frontend',
-      tunnel: 'https://123abc.ngrok.io:3000'
+      tunnel: 'https://123abc.ngrok.io'
     })
 
     vi.useFakeTimers()
@@ -191,8 +189,6 @@ describe('vite-plugin-shopify:html', () => {
 
     const tagsHtml = await fs.readFile(path.join(__dirname, '__fixtures__', 'snippets', 'vite-tag.liquid'), { encoding: 'utf8' })
 
-    expect(mockViteDevServer.config.server.allowedHosts).toContain(new URL(options.tunnel).hostname)
-
     expect(tagsHtml).toMatchSnapshot()
 
     vi.useRealTimers()