Init tunnels

examples/vite-shopify-example/vite.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
   plugins: [
     basicSsl(),
     shopify({
+      tunnel: true,
       snippetFile: 'vite.liquid',
       additionalEntrypoints: [
         'frontend/foo.ts', // relative to sourceCodeDir

packages/vite-plugin-shopify/package.json

@@ -36,7 +36,8 @@
   },
   "dependencies": {
     "debug": "^4.3.4",
-    "fast-glob": "^3.2.11"
+    "fast-glob": "^3.2.11",
+    "untun": "^0.1.3"
   },
   "devDependencies": {
     "tsconfig": "workspace:*",

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

@@ -5,7 +5,7 @@ import { Manifest, Plugin, ResolvedConfig, normalizePath } from 'vite'
 import createDebugger from 'debug'
 
 import { CSS_EXTENSIONS_REGEX, KNOWN_CSS_EXTENSIONS } from './constants'
-import type { Options, DevServerUrl } from './types'
+import type { Options, DevServerUrl, FrontendURLResult } from './types'
 
 const debug = createDebugger('vite-plugin-shopify:html')
 
@@ -30,6 +30,8 @@ export default function shopifyHTML (options: Required<Options>): Plugin {
       }
     },
     configureServer ({ config, middlewares, httpServer }) {
+      const tunnelOption = generateFrontendURL(options)
+
       httpServer?.once('listening', () => {
         const address = httpServer?.address()
 
@@ -38,7 +40,7 @@ export default function shopifyHTML (options: Required<Options>): Plugin {
         if (isAddressInfo(address)) {
           viteDevServerUrl = resolveDevServerUrl(address, config)
 
-          debug({ address, viteDevServerUrl })
+          debug({ address, viteDevServerUrl, tunnelOption })
 
           const reactPlugin = config.plugins.find(plugin => plugin.name === 'vite:react-babel' || plugin.name === 'vite:react-refresh')
 
@@ -243,3 +245,21 @@ function isIpv6 (address: AddressInfo): boolean {
     // @ts-expect-error-next-line
     address.family === 6
 }
+
+function generateFrontendURL (options: Required<Options>): FrontendURLResult {
+  let frontendPort = 4040
+  let frontendUrl = ''
+  let usingLocalhost = false
+
+  if (typeof options.tunnel !== 'string') {
+    usingLocalhost = true
+    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]
+  return { frontendUrl, frontendPort, usingLocalhost }
+}

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

@@ -11,13 +11,15 @@ export const resolveOptions = (
   const additionalEntrypoints = options.additionalEntrypoints ?? []
   const snippetFile = options.snippetFile ?? 'vite-tag.liquid'
   const versionNumbers = options.versionNumbers ?? false
+  const tunnel = options.tunnel ?? false
 
   return {
     themeRoot,
     sourceCodeDir,
     entrypointsDir,
     additionalEntrypoints,
     snippetFile,
-    versionNumbers
+    versionNumbers,
+    tunnel
   }
 }

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

@@ -40,6 +40,19 @@ export interface Options {
    * @default false
    */
   versionNumbers?: boolean
+
+  /**
+   * Enables the creation of Cloudflare tunnels during dev, allowing previews from any device.
+   *
+   * @default false
+   */
+  tunnel?: boolean | string
 }
 
 export type DevServerUrl = `${'http' | 'https'}://${string}:${number}`
+
+export interface FrontendURLResult {
+  frontendUrl: string
+  frontendPort: number
+  usingLocalhost: boolean
+}