Merge pull request #5943 from Shopify/shauns/06-04-add_support_for_deploy_without_build

Add support for deploy without build

Author: gonzaloriestra

.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

@@ -18,6 +18,7 @@ import {
   buildFunctionExtension,
   buildThemeExtension,
   buildUIExtension,
+  bundleFunctionExtension,
 } from '../../services/build/extension.js'
 import {bundleThemeExtension} from '../../services/extensions/bundle.js'
 import {Identifiers} from '../app/identifiers.js'
@@ -29,7 +30,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} from '@shopify/cli-kit/node/fs'
 import {getPathValue} from '@shopify/cli-kit/common/object'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 
@@ -44,6 +45,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 +338,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 +374,33 @@ 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') {
+          await bundleFunctionExtension(this.outputPath, this.outputPath)
+        }
+      }
+
+      if (this.isThemeExtension) {
+        await bundleThemeExtension(this, options)
+      }
+    }
+  }
+
   getOutputFolderId(extensionId?: string) {
     return extensionId ?? this.uid ?? this.handle
   }
@@ -437,6 +470,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/build/extension.ts

@@ -186,9 +186,7 @@ export async function buildFunctionExtension(
     }
 
     if (fileExistsSync(extension.outputPath) && bundlePath !== extension.outputPath) {
-      const base64Contents = await readFile(extension.outputPath, {encoding: 'base64'})
-      await touchFile(bundlePath)
-      await writeFile(bundlePath, base64Contents)
+      await bundleFunctionExtension(extension.outputPath, bundlePath)
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
@@ -210,6 +208,13 @@ export async function buildFunctionExtension(
   }
 }
 
+export async function bundleFunctionExtension(wasmPath: string, bundlePath: string) {
+  outputDebug(`Converting WASM from ${wasmPath} to base64 in ${bundlePath}`)
+  const base64Contents = await readFile(wasmPath, {encoding: 'base64'})
+  await touchFile(bundlePath)
+  await writeFile(bundlePath, base64Contents)
+}
+
 async function runCommandOrBuildJSFunction(extension: ExtensionInstance, options: BuildFunctionExtensionOptions) {
   if (extension.buildCommand) {
     return runCommand(extension.buildCommand, extension, options)

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,
   }
 }
 
@@ -513,6 +514,7 @@ describe('ensureDeployContext', () => {
       force: false,
       noRelease: false,
       developerPlatformClient: buildDeveloperPlatformClient({supportsAtomicDeployments: true}),
+      skipBuild: false,
     }
     await ensureDeployContext(options)
 
@@ -554,6 +556,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