Make bind address configurable for app dev server

.changeset/orange-boxes-unite.md

@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+Add --host flag to shopify app dev command for Docker container development

docs-shopify.dev/commands/interfaces/app-dev.interface.ts

@@ -18,6 +18,12 @@ export interface appdev {
    */
   '-c, --config <value>'?: string
 
+  /**
+   * Set which network interface the web server listens on. The default value is 127.0.0.1.
+   * @environment SHOPIFY_FLAG_HOST
+   */
+  '--host <value>'?: string
+
   /**
    * Port to use for localhost.
    * @environment SHOPIFY_FLAG_LOCALHOST_PORT

packages/app/src/cli/commands/app/dev.ts

@@ -88,9 +88,9 @@ If you're using the Ruby app template, then you need to complete the following s
       exclusive: ['tunnel-url'],
     }),
     host: Flags.string({
-      description: 'Set which network interface the web server listens on. The default value is localhost.',
+      description: 'Set which network interface the web server listens on. The default value is 127.0.0.1.',
       env: 'SHOPIFY_FLAG_HOST',
-      default: 'localhost',
+      default: '127.0.0.1',
     }),
     'localhost-port': Flags.integer({
       description: 'Port to use for localhost.',

packages/app/src/cli/services/dev/processes/setup-dev-processes.test.ts

@@ -95,7 +95,7 @@ describe('setup-dev-processes', () => {
       commandConfig: new Config({root: ''}),
       skipDependenciesInstallation: false,
       tunnel: {mode: 'auto'},
-      host: 'localhost',
+      host: '127.0.0.1',
     }
     const network: DevConfig['network'] = {
       proxyUrl: 'https://example.com/proxy',
@@ -289,7 +289,7 @@ describe('setup-dev-processes', () => {
           cert: 'cert',
           key: 'key',
         },
-        host: 'localhost',
+        host: '127.0.0.1',
         rules: {
           '/extensions': `http://localhost:${previewExtensionPort}`,
           '/ping': `http://localhost:${hmrPort}`,
@@ -301,7 +301,7 @@ describe('setup-dev-processes', () => {
   })
 
   test('proxy server process includes host parameter when configured for Docker', async () => {
-    // Given  
+    // Given
     const developerPlatformClient: DeveloperPlatformClient = testDeveloperPlatformClient({supportsDevSessions: false})
     const storeFqdn = 'store.myshopify.io'
     const storeId = '123456789'
@@ -331,23 +331,25 @@ describe('setup-dev-processes', () => {
         certPath: 'path',
       },
     }
-    
+
     // Create simple app without theme extensions to avoid the theme API calls
     const localApp = testAppWithConfig({
       config: {},
       app: testAppLinked({
         allExtensions: [await testUIExtension({type: 'web_pixel_extension'})],
-        webs: [{
-          directory: 'web',
-          configuration: {
-            roles: [WebType.Backend, WebType.Frontend],
-            commands: {dev: 'npm exec remix dev'},
-            webhooks_path: '/webhooks',
-            hmr_server: {
-              http_paths: ['/ping'],
+        webs: [
+          {
+            directory: 'web',
+            configuration: {
+              roles: [WebType.Backend, WebType.Frontend],
+              commands: {dev: 'npm exec remix dev'},
+              webhooks_path: '/webhooks',
+              hmr_server: {
+                http_paths: ['/ping'],
+              },
             },
           },
-        }],
+        ],
       }),
     })
     vi.spyOn(loader, 'reloadApp').mockResolvedValue(localApp)
@@ -384,7 +386,7 @@ describe('setup-dev-processes', () => {
       commandConfig: new Config({root: ''}),
       skipDependenciesInstallation: false,
       tunnel: {mode: 'auto'},
-      host: 'localhost',
+      host: '127.0.0.1',
     }
     const network: DevConfig['network'] = {
       proxyUrl: 'https://example.com/proxy',
@@ -458,7 +460,7 @@ describe('setup-dev-processes', () => {
       commandConfig: new Config({root: ''}),
       skipDependenciesInstallation: false,
       tunnel: {mode: 'auto'},
-      host: 'localhost',
+      host: '127.0.0.1',
     }
     const network: DevConfig['network'] = {
       proxyUrl: 'https://example.com/proxy',
@@ -555,7 +557,7 @@ describe('setup-dev-processes', () => {
       commandConfig: new Config({root: ''}),
       skipDependenciesInstallation: false,
       tunnel: {mode: 'auto'},
-      host: 'localhost',
+      host: '127.0.0.1',
     }
     const network: DevConfig['network'] = {
       proxyUrl: 'https://example.com/proxy',
@@ -642,7 +644,7 @@ describe('setup-dev-processes', () => {
       commandConfig: new Config({root: ''}),
       skipDependenciesInstallation: false,
       tunnel: {mode: 'auto'},
-      host: 'localhost',
+      host: '127.0.0.1',
     }
     const network: DevConfig['network'] = {
       proxyUrl: 'https://example.com/proxy',

packages/app/src/cli/services/dev/processes/setup-dev-processes.ts

@@ -202,7 +202,12 @@ export async function setupDevProcesses({
   ].filter(stripUndefineds)
 
   // Add http server proxy & configure ports, for processes that need it
-  const processesWithProxy = await setPortsAndAddProxyProcess(processes, network.proxyPort, network.reverseProxyCert, commandOptions)
+  const processesWithProxy = await setPortsAndAddProxyProcess(
+    processes,
+    network.proxyPort,
+    network.reverseProxyCert,
+    commandOptions,
+  )
 
   return {
     processes: processesWithProxy,

packages/cli/README.md

@@ -224,8 +224,8 @@ FLAGS
       --checkout-cart-url=<value>         Resource URL for checkout UI extension. Format:
                                           "/cart/{productVariantID}:{productQuantity}"
       --client-id=<value>                 The Client ID of your app.
-      --host=<value>                      [default: localhost] Set which network interface the web server listens on.
-                                          The default value is localhost.
+      --host=<value>                      [default: 127.0.0.1] Set which network interface the web server listens on.
+                                          The default value is 127.0.0.1.
       --localhost-port=<value>            Port to use for localhost.
       --no-color                          Disable color output.
       --no-update                         Skips the Partners Dashboard URL update step.

packages/cli/oclif.manifest.json

@@ -460,8 +460,8 @@
           "type": "option"
         },
         "host": {
-          "default": "localhost",
-          "description": "Set which network interface the web server listens on. The default value is localhost.",
+          "default": "127.0.0.1",
+          "description": "Set which network interface the web server listens on. The default value is 127.0.0.1.",
           "env": "SHOPIFY_FLAG_HOST",
           "hasDynamicHelp": false,
           "multiple": false,