Add support for deploy without build

Author: shauns

.changeset/little-rockets-serve.md

@@ -0,0 +1,6 @@
+---
+'@shopify/app': minor
+'@shopify/cli': minor
+---
+
+Add `--no-build` flag to `shopify app deploy`. When provided, the deploy command will assume you have already run `shopify app build` or otherwise put build files in place.

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

@@ -24,6 +24,12 @@ export interface appdeploy {
    */
   '--message <value>'?: string
 
+  /**
+   * Use with caution: Skips building any elements of the app that require building. You should ensure your app has been prepared in advance, such as by running `shopify app build` or by caching build artifacts.
+   * @environment SHOPIFY_FLAG_NO_BUILD
+   */
+  '--no-build'?: ''
+
   /**
    * Disable color output.
    * @environment SHOPIFY_FLAG_NO_COLOR

docs-shopify.dev/generated/generated_docs_data.json

@@ -322,6 +322,15 @@
                 "isOptional": true,
                 "environmentValue": "SHOPIFY_FLAG_MESSAGE"
               },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/app-deploy.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "--no-build",
+                "value": "\"\"",
+                "description": "Use with caution: Skips building any elements of the app that require building. You should ensure your app has been prepared in advance, such as by running `shopify app build` or by caching build artifacts.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_NO_BUILD"
+              },
               {
                 "filePath": "docs-shopify.dev/commands/interfaces/app-deploy.interface.ts",
                 "syntaxKind": "PropertySignature",
@@ -404,7 +413,7 @@
                 "environmentValue": "SHOPIFY_FLAG_FORCE"
               }
             ],
-            "value": "export interface appdeploy {\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   * Deploy without asking for confirmation.\n   * @environment SHOPIFY_FLAG_FORCE\n   */\n  '-f, --force'?: ''\n\n  /**\n   * Optional message that will be associated with this version. This is for internal use only and won't be available externally.\n   * @environment SHOPIFY_FLAG_MESSAGE\n   */\n  '--message <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Creates a version but doesn't release it - it's not made available to merchants.\n   * @environment SHOPIFY_FLAG_NO_RELEASE\n   */\n  '--no-release'?: ''\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   * URL associated with the new app version.\n   * @environment SHOPIFY_FLAG_SOURCE_CONTROL_URL\n   */\n  '--source-control-url <value>'?: string\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n\n  /**\n   * Optional version tag that will be associated with this app version. If not provided, an auto-generated identifier will be generated for this app version.\n   * @environment SHOPIFY_FLAG_VERSION\n   */\n  '--version <value>'?: string\n}"
+            "value": "export interface appdeploy {\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   * Deploy without asking for confirmation.\n   * @environment SHOPIFY_FLAG_FORCE\n   */\n  '-f, --force'?: ''\n\n  /**\n   * Optional message that will be associated with this version. This is for internal use only and won't be available externally.\n   * @environment SHOPIFY_FLAG_MESSAGE\n   */\n  '--message <value>'?: string\n\n  /**\n   * Use with caution: Skips building any elements of the app that require building. You should ensure your app has been prepared in advance, such as by running `shopify app build` or by caching build artifacts.\n   * @environment SHOPIFY_FLAG_NO_BUILD\n   */\n  '--no-build'?: ''\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Creates a version but doesn't release it - it's not made available to merchants.\n   * @environment SHOPIFY_FLAG_NO_RELEASE\n   */\n  '--no-release'?: ''\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   * URL associated with the new app version.\n   * @environment SHOPIFY_FLAG_SOURCE_CONTROL_URL\n   */\n  '--source-control-url <value>'?: string\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n\n  /**\n   * Optional version tag that will be associated with this app version. If not provided, an auto-generated identifier will be generated for this app version.\n   * @environment SHOPIFY_FLAG_VERSION\n   */\n  '--version <value>'?: string\n}"
           }
         }
       }

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

@@ -44,6 +44,12 @@ export default class Deploy extends AppLinkedCommand {
       env: 'SHOPIFY_FLAG_NO_RELEASE',
       default: false,
     }),
+    'no-build': Flags.boolean({
+      description:
+        'Use with caution: Skips building any elements of the app that require building. You should ensure your app has been prepared in advance, such as by running `shopify app build` or by caching build artifacts.',
+      env: 'SHOPIFY_FLAG_NO_BUILD',
+      default: false,
+    }),
     message: Flags.string({
       hidden: false,
       description:
@@ -111,6 +117,7 @@ export default class Deploy extends AppLinkedCommand {
       message: flags.message,
       version: flags.version,
       commitReference: flags['source-control-url'],
+      skipBuild: flags['no-build'],
     })
 
     return {app: result.app}

packages/app/src/cli/models/extensions/extension-instance.ts

@@ -29,7 +29,7 @@ import {constantize, slugify} from '@shopify/cli-kit/common/string'
 import {hashString, nonRandomUUID} from '@shopify/cli-kit/node/crypto'
 import {partnersFqdn} from '@shopify/cli-kit/node/context/fqdn'
 import {joinPath, basename} from '@shopify/cli-kit/node/path'
-import {fileExists, touchFile, moveFile, writeFile, glob} from '@shopify/cli-kit/node/fs'
+import {fileExists, touchFile, moveFile, writeFile, glob, copyFile, readFile} from '@shopify/cli-kit/node/fs'
 import {getPathValue} from '@shopify/cli-kit/common/object'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 
@@ -44,6 +44,8 @@ export const CONFIG_EXTENSION_IDS: string[] = [
   WebhooksSpecIdentifier,
 ]
 
+type BuildMode = 'theme' | 'function' | 'ui' | 'flow' | 'tax_calculation' | 'none'
+
 /**
  * Class that represents an instance of a local extension
  * Before creating this class we've validated that:
@@ -335,20 +337,23 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
   }
 
   async build(options: ExtensionBuildOptions): Promise<void> {
-    if (this.isThemeExtension) {
-      return buildThemeExtension(this, options)
-    } else if (this.isFunctionExtension) {
-      return buildFunctionExtension(this, options)
-    } else if (this.features.includes('esbuild')) {
-      return buildUIExtension(this, options)
-    } else if (this.specification.identifier === 'flow_template' && options.environment === 'production') {
-      return buildFlowTemplateExtension(this, options)
-    }
-
-    // Workaround for tax_calculations because they remote spec NEEDS a valid js file to be included.
-    if (this.type === 'tax_calculation') {
-      await touchFile(this.outputPath)
-      await writeFile(this.outputPath, '(()=>{})();')
+    const mode = this.buildMode(options)
+
+    switch (mode) {
+      case 'theme':
+        return buildThemeExtension(this, options)
+      case 'function':
+        return buildFunctionExtension(this, options)
+      case 'ui':
+        return buildUIExtension(this, options)
+      case 'flow':
+        return buildFlowTemplateExtension(this, options)
+      case 'tax_calculation':
+        await touchFile(this.outputPath)
+        await writeFile(this.outputPath, '(()=>{})();')
+        break
+      case 'none':
+        break
     }
   }
 
@@ -368,6 +373,35 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
     await this.keepBuiltSourcemapsLocally(bundleDirectory, extensionId)
   }
 
+  async copyIntoBundle(options: ExtensionBuildOptions, bundleDirectory: string, identifiers?: Identifiers) {
+    const extensionId = this.getOutputFolderId(identifiers?.extensions[this.localIdentifier])
+
+    const defaultOutputPath = this.outputPath
+
+    if (this.features.includes('bundling')) {
+      this.outputPath = this.getOutputPathForDirectory(bundleDirectory, extensionId)
+    }
+
+    const buildMode = this.buildMode(options)
+
+    if (buildMode !== 'none') {
+      outputDebug(`Will copy pre-built file from ${defaultOutputPath} to ${this.outputPath}`)
+      if (await fileExists(defaultOutputPath)) {
+        await copyFile(defaultOutputPath, this.outputPath)
+
+        if (buildMode === 'function') {
+          outputDebug(`Converting WASM ${this.outputPath} to base64`)
+          const base64Contents = await readFile(this.outputPath, {encoding: 'base64'})
+          await writeFile(this.outputPath, base64Contents)
+        }
+      }
+
+      if (this.isThemeExtension) {
+        await bundleThemeExtension(this, options)
+      }
+    }
+  }
+
   getOutputFolderId(extensionId?: string) {
     return extensionId ?? this.uid ?? this.handle
   }
@@ -437,6 +471,25 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
     await this.specification.contributeToSharedTypeFile?.(this, typeDefinitionsByFile)
   }
 
+  private buildMode(options: ExtensionBuildOptions): BuildMode {
+    if (this.isThemeExtension) {
+      return 'theme'
+    } else if (this.isFunctionExtension) {
+      return 'function'
+    } else if (this.features.includes('esbuild')) {
+      return 'ui'
+    } else if (this.specification.identifier === 'flow_template' && options.environment === 'production') {
+      return 'flow'
+    }
+
+    // Workaround for tax_calculations because they remote spec NEEDS a valid js file to be included.
+    if (this.type === 'tax_calculation') {
+      return 'tax_calculation'
+    }
+
+    return 'none'
+  }
+
   private buildHandle() {
     switch (this.specification.uidStrategy) {
       case 'single':

packages/app/src/cli/services/context.test.ts

@@ -95,6 +95,7 @@ const deployOptions = (app: AppLinkedInterface, reset = false, force = false): D
     force,
     noRelease: false,
     developerPlatformClient: buildDeveloperPlatformClient(),
+    skipBuild: false,
   }
 }
 
@@ -528,6 +529,7 @@ describe('ensureDeployContext', () => {
       force: false,
       noRelease: false,
       developerPlatformClient: buildDeveloperPlatformClient({supportsAtomicDeployments: true}),
+      skipBuild: false,
     }
     await ensureDeployContext(options)
 
@@ -573,6 +575,7 @@ describe('ensureDeployContext', () => {
       force: false,
       noRelease: false,
       developerPlatformClient: buildDeveloperPlatformClient({supportsAtomicDeployments: true}),
+      skipBuild: false,
     }
     await ensureDeployContext(options)
 

packages/app/src/cli/services/deploy.test.ts

@@ -548,5 +548,6 @@ async function testDeployBundle({
     version: options?.version,
     ...(commitReference ? {commitReference} : {}),
     developerPlatformClient,
+    skipBuild: false,
   })
 }

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

@@ -43,6 +43,9 @@ export interface DeployOptions {
 
   /** The git reference url of the app version */
   commitReference?: string
+
+  /** If true, skip building any elements of the app that require building */
+  skipBuild: boolean
 }
 
 interface TasksContext {
@@ -76,7 +79,7 @@ export async function deploy(options: DeployOptions) {
       bundlePath = joinPath(options.app.directory, '.shopify', `deploy-bundle.${developerPlatformClient.bundleFormat}`)
       await mkdir(dirname(bundlePath))
     }
-    await bundleAndBuildExtensions({app, bundlePath, identifiers})
+    await bundleAndBuildExtensions({app, bundlePath, identifiers, skipBuild: options.skipBuild})
 
     let uploadTaskTitle
 

packages/app/src/cli/services/deploy/bundle.test.ts

@@ -61,7 +61,7 @@ describe('bundleAndBuildExtensions', () => {
       }
 
       // When
-      await bundleAndBuildExtensions({app, identifiers, bundlePath})
+      await bundleAndBuildExtensions({app, identifiers, bundlePath, skipBuild: false})
 
       // Then
       expect(extensionBundleMock).toHaveBeenCalledTimes(2)
@@ -95,7 +95,38 @@ describe('bundleAndBuildExtensions', () => {
       }
 
       // When
-      await bundleAndBuildExtensions({app, identifiers, bundlePath})
+      await bundleAndBuildExtensions({app, identifiers, bundlePath, skipBuild: false})
+
+      // Then
+      await expect(file.fileExists(bundlePath)).resolves.toBeTruthy()
+    })
+  })
+
+  test('skips building extensions if skipBuild is true', async () => {
+    await file.inTemporaryDirectory(async (tmpDir: string) => {
+      // Given
+      const bundlePath = joinPath(tmpDir, 'bundle.zip')
+
+      const functionExtension = await testFunctionExtension()
+      const extensionCopyIntoBundleMock = vi.fn().mockImplementation(async (options, bundleDirectory, identifiers) => {
+        file.writeFileSync(joinPath(bundleDirectory, 'index.wasm'), '')
+      })
+      functionExtension.copyIntoBundle = extensionCopyIntoBundleMock
+      const app = testApp({allExtensions: [functionExtension], directory: tmpDir})
+
+      const extensions: {[key: string]: string} = {}
+      for (const extension of app.allExtensions) {
+        extensions[extension.localIdentifier] = extension.localIdentifier
+      }
+      const identifiers = {
+        app: 'app-id',
+        extensions,
+        extensionIds: {},
+        extensionsNonUuidManaged: {},
+      }
+
+      // When
+      await bundleAndBuildExtensions({app, identifiers, bundlePath, skipBuild: true})
 
       // Then
       await expect(file.fileExists(bundlePath)).resolves.toBeTruthy()

packages/app/src/cli/services/deploy/bundle.ts

@@ -12,6 +12,7 @@ interface BundleOptions {
   app: AppInterface
   bundlePath?: string
   identifiers?: Identifiers
+  skipBuild: boolean
 }
 
 export async function bundleAndBuildExtensions(options: BundleOptions) {
@@ -23,18 +24,28 @@ export async function bundleAndBuildExtensions(options: BundleOptions) {
 
   // Force the download of the javy binary in advance to avoid later problems,
   // as it might be done multiple times in parallel. https://github.com/Shopify/cli/issues/2877
-  await installJavy(options.app)
+  if (!options.skipBuild) {
+    await installJavy(options.app)
+  }
 
   await renderConcurrent({
     processes: options.app.allExtensions.map((extension) => {
       return {
         prefix: extension.localIdentifier,
         action: async (stdout: Writable, stderr: Writable, signal: AbortSignal) => {
-          await extension.buildForBundle(
-            {stderr, stdout, signal, app: options.app, environment: 'production'},
-            bundleDirectory,
-            options.identifiers,
-          )
+          if (options.skipBuild) {
+            await extension.copyIntoBundle(
+              {stderr, stdout, signal, app: options.app, environment: 'production'},
+              bundleDirectory,
+              options.identifiers,
+            )
+          } else {
+            await extension.buildForBundle(
+              {stderr, stdout, signal, app: options.app, environment: 'production'},
+              bundleDirectory,
+              options.identifiers,
+            )
+          }
         },
       }
     }),