Add non-interactive app dev prompt bypasses

.changeset/app-dev-non-interactive-flags.md

@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+Add non-interactive `app dev` options: `--store-password` and `--install-mkcert`.

docs-shopify.dev/generated/generated_docs_data_v2.json

@@ -979,6 +979,15 @@
           "isOptional": true,
           "environmentValue": "SHOPIFY_FLAG_CLIENT_ID"
         },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-dev.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--install-mkcert",
+          "value": "''",
+          "description": "Install and use mkcert to generate localhost certificates when --use-localhost is enabled without prompting.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_INSTALL_MKCERT"
+        },
         {
           "filePath": "docs-shopify.dev/commands/interfaces/app-dev.interface.ts",
           "syntaxKind": "PropertySignature",
@@ -1042,6 +1051,15 @@
           "isOptional": true,
           "environmentValue": "SHOPIFY_FLAG_SKIP_DEPENDENCIES_INSTALLATION"
         },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-dev.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--store-password <value>",
+          "value": "string",
+          "description": "The password for storefronts with password protection.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_STORE_PASSWORD"
+        },
         {
           "filePath": "docs-shopify.dev/commands/interfaces/app-dev.interface.ts",
           "syntaxKind": "PropertySignature",
@@ -1115,7 +1133,7 @@
           "environmentValue": "SHOPIFY_FLAG_THEME"
         }
       ],
-      "value": "export interface appdev {\n  /**\n   * Alias of the Shopify account to use for authentication.\n   * @environment SHOPIFY_FLAG_AUTH_ALIAS\n   */\n  '--auth-alias <value>'?: string\n\n  /**\n   * Resource URL for checkout UI extension. Format: \"/cart/{productVariantID}:{productQuantity}\"\n   * @environment SHOPIFY_FLAG_CHECKOUT_CART_URL\n   */\n  '--checkout-cart-url <value>'?: string\n\n  /**\n   * The Client ID of your app.\n   * @environment SHOPIFY_FLAG_CLIENT_ID\n   */\n  '--client-id <value>'?: string\n\n  /**\n   * The name of the app configuration.\n   * @environment SHOPIFY_FLAG_APP_CONFIG\n   */\n  '-c, --config <value>'?: string\n\n  /**\n   * Port to use for localhost. Must be between 1 and 65535.\n   * @environment SHOPIFY_FLAG_LOCALHOST_PORT\n   */\n  '--localhost-port <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Uses the app URL from the toml file instead an autogenerated URL for dev.\n   * @environment SHOPIFY_FLAG_NO_UPDATE\n   */\n  '--no-update'?: ''\n\n  /**\n   * The file path or URL. The file path is to a file that you want updated on idle. The URL path is where you want a webhook posted to report on file changes.\n   * @environment SHOPIFY_FLAG_NOTIFY\n   */\n  '--notify <value>'?: string\n\n  /**\n   * The path to your app directory.\n   * @environment SHOPIFY_FLAG_PATH\n   */\n  '--path <value>'?: string\n\n  /**\n   * Reset all your settings.\n   * @environment SHOPIFY_FLAG_RESET\n   */\n  '--reset'?: ''\n\n  /**\n   * Skips the installation of dependencies. Deprecated, use workspaces instead.\n   * @environment SHOPIFY_FLAG_SKIP_DEPENDENCIES_INSTALLATION\n   */\n  '--skip-dependencies-installation'?: ''\n\n  /**\n   * Store URL. Must be an existing development or Shopify Plus sandbox store.\n   * @environment SHOPIFY_FLAG_STORE\n   */\n  '-s, --store <value>'?: string\n\n  /**\n   * Resource URL for subscription UI extension. Format: \"/products/{productId}\"\n   * @environment SHOPIFY_FLAG_SUBSCRIPTION_PRODUCT_URL\n   */\n  '--subscription-product-url <value>'?: string\n\n  /**\n   * Theme ID or name of the theme app extension host theme.\n   * @environment SHOPIFY_FLAG_THEME\n   */\n  '-t, --theme <value>'?: string\n\n  /**\n   * Local port of the theme app extension development server. Must be between 1 and 65535.\n   * @environment SHOPIFY_FLAG_THEME_APP_EXTENSION_PORT\n   */\n  '--theme-app-extension-port <value>'?: string\n\n  /**\n   * Use a custom tunnel, it must be running before executing dev. Format: \"https://my-tunnel-url:port\".\n   * @environment SHOPIFY_FLAG_TUNNEL_URL\n   */\n  '--tunnel-url <value>'?: string\n\n  /**\n   * Service entry point will listen to localhost. A tunnel won't be used. Will work for testing many app features, but not those that directly invoke your app (E.g: Webhooks)\n   * @environment SHOPIFY_FLAG_USE_LOCALHOST\n   */\n  '--use-localhost'?: ''\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
+      "value": "export interface appdev {\n  /**\n   * Alias of the Shopify account to use for authentication.\n   * @environment SHOPIFY_FLAG_AUTH_ALIAS\n   */\n  '--auth-alias <value>'?: string\n\n  /**\n   * Resource URL for checkout UI extension. Format: \"/cart/{productVariantID}:{productQuantity}\"\n   * @environment SHOPIFY_FLAG_CHECKOUT_CART_URL\n   */\n  '--checkout-cart-url <value>'?: string\n\n  /**\n   * The Client ID of your app.\n   * @environment SHOPIFY_FLAG_CLIENT_ID\n   */\n  '--client-id <value>'?: string\n\n  /**\n   * The name of the app configuration.\n   * @environment SHOPIFY_FLAG_APP_CONFIG\n   */\n  '-c, --config <value>'?: string\n\n  /**\n   * Install and use mkcert to generate localhost certificates when --use-localhost is enabled without prompting.\n   * @environment SHOPIFY_FLAG_INSTALL_MKCERT\n   */\n  '--install-mkcert'?: ''\n\n  /**\n   * Port to use for localhost. Must be between 1 and 65535.\n   * @environment SHOPIFY_FLAG_LOCALHOST_PORT\n   */\n  '--localhost-port <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Uses the app URL from the toml file instead an autogenerated URL for dev.\n   * @environment SHOPIFY_FLAG_NO_UPDATE\n   */\n  '--no-update'?: ''\n\n  /**\n   * The file path or URL. The file path is to a file that you want updated on idle. The URL path is where you want a webhook posted to report on file changes.\n   * @environment SHOPIFY_FLAG_NOTIFY\n   */\n  '--notify <value>'?: string\n\n  /**\n   * The path to your app directory.\n   * @environment SHOPIFY_FLAG_PATH\n   */\n  '--path <value>'?: string\n\n  /**\n   * Reset all your settings.\n   * @environment SHOPIFY_FLAG_RESET\n   */\n  '--reset'?: ''\n\n  /**\n   * Skips the installation of dependencies. Deprecated, use workspaces instead.\n   * @environment SHOPIFY_FLAG_SKIP_DEPENDENCIES_INSTALLATION\n   */\n  '--skip-dependencies-installation'?: ''\n\n  /**\n   * Store URL. Must be an existing development or Shopify Plus sandbox store.\n   * @environment SHOPIFY_FLAG_STORE\n   */\n  '-s, --store <value>'?: string\n\n  /**\n   * The password for storefronts with password protection.\n   * @environment SHOPIFY_FLAG_STORE_PASSWORD\n   */\n  '--store-password <value>'?: string\n\n  /**\n   * Resource URL for subscription UI extension. Format: \"/products/{productId}\"\n   * @environment SHOPIFY_FLAG_SUBSCRIPTION_PRODUCT_URL\n   */\n  '--subscription-product-url <value>'?: string\n\n  /**\n   * Theme ID or name of the theme app extension host theme.\n   * @environment SHOPIFY_FLAG_THEME\n   */\n  '-t, --theme <value>'?: string\n\n  /**\n   * Local port of the theme app extension development server. Must be between 1 and 65535.\n   * @environment SHOPIFY_FLAG_THEME_APP_EXTENSION_PORT\n   */\n  '--theme-app-extension-port <value>'?: string\n\n  /**\n   * Use a custom tunnel, it must be running before executing dev. Format: \"https://my-tunnel-url:port\".\n   * @environment SHOPIFY_FLAG_TUNNEL_URL\n   */\n  '--tunnel-url <value>'?: string\n\n  /**\n   * Service entry point will listen to localhost. A tunnel won't be used. Will work for testing many app features, but not those that directly invoke your app (E.g: Webhooks)\n   * @environment SHOPIFY_FLAG_USE_LOCALHOST\n   */\n  '--use-localhost'?: ''\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
     }
   },
   "appenvpull": {

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

@@ -0,0 +1,72 @@
+import Dev from './dev.js'
+import {dev} from '../../services/dev.js'
+import {linkedAppContext} from '../../services/app-context.js'
+import {storeContext} from '../../services/store-context.js'
+import {getTunnelMode} from '../../services/dev/tunnel-mode.js'
+import {checkFolderIsValidApp} from '../../models/app/loader.js'
+import {
+  testAppLinked,
+  testDeveloperPlatformClient,
+  testOrganization,
+  testOrganizationApp,
+  testOrganizationStore,
+  testProject,
+} from '../../models/app/app.test-data.js'
+import {inTemporaryDirectory} from '@shopify/cli-kit/node/fs'
+import {addPublicMetadata} from '@shopify/cli-kit/node/metadata'
+import {beforeEach, describe, expect, test, vi} from 'vitest'
+
+vi.mock('../../services/dev.js')
+vi.mock('../../services/app-context.js')
+vi.mock('../../services/store-context.js')
+vi.mock('../../services/dev/tunnel-mode.js')
+vi.mock('../../models/app/loader.js')
+vi.mock('@shopify/cli-kit/node/metadata')
+
+describe('app dev command', () => {
+  beforeEach(() => {
+    vi.mocked(dev).mockReset()
+    vi.mocked(linkedAppContext).mockReset()
+    vi.mocked(storeContext).mockReset()
+    vi.mocked(getTunnelMode).mockReset()
+    vi.mocked(checkFolderIsValidApp).mockReset()
+    vi.mocked(addPublicMetadata).mockReset()
+  })
+
+  test('does not require --use-localhost when --install-mkcert is not passed', async () => {
+    await inTemporaryDirectory(async (tmp) => {
+      const app = testAppLinked({directory: tmp})
+      const appContextResult = {
+        app,
+        remoteApp: testOrganizationApp(),
+        organization: testOrganization(),
+        project: testProject(),
+        activeConfig: {} as never,
+        specifications: [],
+        developerPlatformClient: testDeveloperPlatformClient(),
+      } as Awaited<ReturnType<typeof linkedAppContext>>
+      const store = testOrganizationStore({shopDomain: 'dev-store.myshopify.com'})
+
+      vi.mocked(linkedAppContext).mockResolvedValue(appContextResult)
+      vi.mocked(storeContext).mockResolvedValue(store)
+      vi.mocked(getTunnelMode).mockResolvedValue({mode: 'auto'})
+
+      await Dev.run(['--path', tmp, '--store', store.shopDomain], import.meta.url)
+
+      expect(getTunnelMode).toHaveBeenCalledWith({
+        useLocalhost: false,
+        tunnelUrl: undefined,
+        localhostPort: undefined,
+      })
+      expect(dev).toHaveBeenCalledWith(expect.objectContaining({installMkcert: false, tunnel: {mode: 'auto'}}))
+    })
+  })
+
+  test('requires --use-localhost when --install-mkcert is passed', async () => {
+    await inTemporaryDirectory(async (tmp) => {
+      await expect(Dev.run(['--path', tmp, '--install-mkcert'], import.meta.url)).rejects.toThrow()
+
+      expect(dev).not.toHaveBeenCalled()
+    })
+  })
+})

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

@@ -54,9 +54,14 @@ export default class Dev extends AppLinkedCommand {
       description:
         "Service entry point will listen to localhost. A tunnel won't be used. Will work for testing many app features, but not those that directly invoke your app (E.g: Webhooks)",
       env: 'SHOPIFY_FLAG_USE_LOCALHOST',
-      default: false,
       exclusive: ['tunnel-url'],
     }),
+    'install-mkcert': Flags.boolean({
+      description:
+        'Install and use mkcert to generate localhost certificates when --use-localhost is enabled without prompting.',
+      env: 'SHOPIFY_FLAG_INSTALL_MKCERT',
+      dependsOn: ['use-localhost'],
+    }),
     'localhost-port': portFlag({
       description: 'Port to use for localhost.',
       env: 'SHOPIFY_FLAG_LOCALHOST_PORT',
@@ -70,6 +75,10 @@ export default class Dev extends AppLinkedCommand {
       description: 'Local port of the theme app extension development server.',
       env: 'SHOPIFY_FLAG_THEME_APP_EXTENSION_PORT',
     }),
+    'store-password': Flags.string({
+      description: 'The password for storefronts with password protection.',
+      env: 'SHOPIFY_FLAG_STORE_PASSWORD',
+    }),
     notify: Flags.string({
       description:
         'The file path or URL. The file path is to a file that you want updated on idle. The URL path is where you want a webhook posted to report on file changes.',
@@ -96,7 +105,7 @@ export default class Dev extends AppLinkedCommand {
     const {flags} = await this.parse(Dev)
 
     const tunnelMode = await getTunnelMode({
-      useLocalhost: flags['use-localhost'],
+      useLocalhost: flags['use-localhost'] ?? false,
       tunnelUrl: flags['tunnel-url'],
       localhostPort: flags['localhost-port'],
     })
@@ -134,9 +143,11 @@ export default class Dev extends AppLinkedCommand {
       checkoutCartUrl: flags['checkout-cart-url'],
       theme: flags.theme,
       themeExtensionPort: flags['theme-app-extension-port'],
+      storePassword: flags['store-password'],
       notify: flags.notify,
       graphiqlPort: flags['graphiql-port'],
       graphiqlKey: flags['graphiql-key'],
+      installMkcert: flags['install-mkcert'] ?? false,
       tunnel: tunnelMode,
     }
 

packages/app/src/cli/models/app/app.test-data.ts

@@ -41,7 +41,6 @@ import {
 } from '../../utilities/developer-platform-client.js'
 import {AllAppExtensionRegistrationsQuerySchema} from '../../api/graphql/all_app_extension_registrations.js'
 import {AppDeploySchema, AppDeployVariables} from '../../api/graphql/app_deploy.js'
-import {ConvertDevToTransferDisabledStoreVariables} from '../../api/graphql/convert_dev_to_transfer_disabled_store.js'
 import {SendSampleWebhookSchema, SendSampleWebhookVariables} from '../../services/webhook/request-sample.js'
 import {PublicApiVersionsSchema} from '../../services/webhook/request-api-versions.js'
 import {WebhookTopicsSchema, WebhookTopicsVariables} from '../../services/webhook/request-topics.js'
@@ -1241,13 +1240,6 @@ const generateSignedUploadUrlResponse: AssetUrlSchema = {
   userErrors: [],
 }
 
-const convertedToTransferDisabledStoreResponse = {
-  convertDevToTestStore: {
-    convertedToTestStore: true,
-    userErrors: [],
-  },
-}
-
 const organizationsResponse: Organization[] = [testOrganization()]
 
 const sendSampleWebhookResponse: SendSampleWebhookSchema = {
@@ -1339,8 +1331,6 @@ export function testDeveloperPlatformClient(stubs: Partial<DeveloperPlatformClie
     deploy: (_input: AppDeployVariables) => Promise.resolve(deployResponse),
     release: (_input: {app: MinimalAppIdentifiers; version: AppVersionIdentifiers}) => Promise.resolve(releaseResponse),
     generateSignedUploadUrl: (_app: MinimalAppIdentifiers) => Promise.resolve(generateSignedUploadUrlResponse),
-    convertToTransferDisabledStore: (_input: ConvertDevToTransferDisabledStoreVariables) =>
-      Promise.resolve(convertedToTransferDisabledStoreResponse),
     sendSampleWebhook: (_input: SendSampleWebhookVariables) => Promise.resolve(sendSampleWebhookResponse),
     apiVersions: () => Promise.resolve(apiVersionsResponse),
     topics: (_input: WebhookTopicsVariables) => Promise.resolve(topicsResponse),

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

@@ -111,15 +111,6 @@ export async function selectStorePrompt({
   return currentStores.find((store) => store.shopId === id)
 }
 
-export async function confirmConversionToTransferDisabledStorePrompt(): Promise<boolean> {
-  return renderConfirmationPrompt({
-    message: `Make this store transfer-disabled? For security, once you use a dev store to preview an app locally, the store can never be transferred to a merchant to use as a production store.`,
-    confirmationMessage: 'Yes, make this store transfer-disabled permanently',
-    cancellationMessage: 'No, select another store',
-    defaultValue: false,
-  })
-}
-
 export async function appNamePrompt(currentName: string): Promise<string> {
   return renderTextPrompt({
     message: 'App name',

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

@@ -57,9 +57,11 @@ export interface DevOptions {
   tunnel: TunnelMode
   theme?: string
   themeExtensionPort?: number
+  storePassword?: string
   notify?: string
   graphiqlPort?: number
   graphiqlKey?: string
+  installMkcert?: boolean
 }
 
 export async function dev(commandOptions: DevOptions) {
@@ -141,6 +143,7 @@ async function prepareForDev(commandOptions: DevOptions): Promise<DevConfig> {
     tunnel,
     tunnelClient,
     remoteApp.configuration,
+    commandOptions.installMkcert,
   )
   app.webs = webs
 
@@ -250,6 +253,7 @@ async function setupNetworkingOptions(
   tunnelOptions: TunnelMode,
   tunnelClient?: TunnelClient,
   remoteAppConfig?: AppConfigurationUsedByCli,
+  installMkcert?: boolean,
 ) {
   const {backendConfig, frontendConfig} = frontAndBackendConfig(webs)
 
@@ -287,6 +291,7 @@ async function setupNetworkingOptions(
   if (tunnelOptions.mode === 'use-localhost') {
     const {keyContent, certContent, certPath} = await generateCertificate({
       appDirectory,
+      forceInstall: installMkcert,
     })
 
     reverseProxyCert = {

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

@@ -169,6 +169,7 @@ export async function setupDevProcesses({
       storeFqdn,
       theme: commandOptions.theme,
       themeExtensionPort: commandOptions.themeExtensionPort,
+      storePassword: commandOptions.storePassword,
     }),
     setupSendUninstallWebhookProcess({
       webs: reloadedApp.webs,

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

@@ -212,6 +212,24 @@ describe('setupPreviewThemeAppExtensionsProcess', () => {
     expect(result!.options.storefrontPassword).toEqual(storefrontPassword)
     expect(result!.options.crawlerSignatureHeaders).toEqual(crawlerSignatureHeaders)
   })
+
+  test('uses the provided store password when one is required', async () => {
+    const mockTheme = {id: 123} as Theme
+    vi.mocked(fetchTheme).mockResolvedValue(mockTheme)
+    vi.mocked(isStorefrontPasswordProtected).mockResolvedValue(true)
+    vi.mocked(ensureValidPassword).mockResolvedValue('validated-password')
+
+    const result = await setupPreviewThemeAppExtensionsProcess({
+      localApp: testApp({allExtensions: [await testThemeExtensions()]}),
+      remoteApp: testOrganizationApp(),
+      storeFqdn: 'test.myshopify.com',
+      theme: '1',
+      storePassword: 'provided-password',
+    })
+
+    expect(ensureValidPassword).toHaveBeenCalledWith('provided-password', 'test.myshopify.com', crawlerSignatureHeaders)
+    expect(result!.options.storefrontPassword).toEqual('validated-password')
+  })
 })
 
 describe('findOrCreateHostTheme', () => {

packages/app/src/cli/services/dev/processes/theme-app-extension.ts

@@ -33,6 +33,7 @@ interface HostThemeSetupOptions {
   storeFqdn: string
   theme?: string
   themeExtensionPort?: number
+  storePassword?: string
 }
 
 export interface PreviewThemeAppExtensionsProcess extends BaseProcess<ThemeAppExtensionServerOptions> {
@@ -64,7 +65,7 @@ export async function setupPreviewThemeAppExtensionsProcess(
     isStorefrontPasswordProtected(adminSession),
   ])
   const storefrontPassword = isPasswordProtected
-    ? await ensureValidPassword(undefined, storeFqdn, crawlerSignatureHeaders)
+    ? await ensureValidPassword(options.storePassword, storeFqdn, crawlerSignatureHeaders)
     : undefined
 
   const theme = await findOrCreateHostTheme(adminSession, options.theme)