Fix build step for ui extension to build to local directory first before copying over to the bundle

vividviolet · vividviolet · commit a65c60d95f48 · 2026-04-15T15:26:50.000-04:00
Remove copy_static_assets client step completely. It was doing nothing for specifications that were not ui_extension.
ui_extension now has its own steps for including static assets
diff --git a/packages/app/src/cli/models/extensions/extension-instance.test.ts b/packages/app/src/cli/models/extensions/extension-instance.test.ts
@@ -14,7 +14,7 @@ import {
   testSingleWebhookSubscriptionExtension,
   placeholderAppConfiguration,
 } from '../app/app.test-data.js'
-import {ExtensionBuildOptions, buildUIExtension} from '../../services/build/extension.js'
+import {ExtensionBuildOptions} from '../../services/build/extension.js'
 import {DeveloperPlatformClient} from '../../utilities/developer-platform-client.js'
 import {joinPath} from '@shopify/cli-kit/node/path'
 import {describe, expect, test, vi} from 'vitest'
@@ -172,33 +172,6 @@ describe('build', async () => {
     })
   })
 
-  test('calls copyStaticAssets after buildUIExtension when building UI extensions', async () => {
-    await inTemporaryDirectory(async (tmpDir) => {
-      // Given
-      const extensionInstance = await testUIExtension({
-        type: 'ui_extension',
-        directory: tmpDir,
-      })
-
-      const copyStaticAssetsSpy = vi.spyOn(extensionInstance, 'copyStaticAssets').mockResolvedValue()
-      vi.mocked(buildUIExtension).mockResolvedValue()
-
-      const options: ExtensionBuildOptions = {
-        stdout: new Writable({write: vi.fn()}),
-        stderr: new Writable({write: vi.fn()}),
-        app: testApp(),
-        environment: 'production',
-      }
-
-      // When
-      await extensionInstance.build(options)
-
-      // Then
-      expect(buildUIExtension).toHaveBeenCalledWith(extensionInstance, options)
-      expect(copyStaticAssetsSpy).toHaveBeenCalledOnce()
-    })
-  })
-
   test('does not copy shopify.extension.toml file when bundling theme extensions', async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       // Given
diff --git a/packages/app/src/cli/models/extensions/extension-instance.ts b/packages/app/src/cli/models/extensions/extension-instance.ts
@@ -459,16 +459,6 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
     return [...new Set(watchedFiles.map((file) => normalizePath(file)))]
   }
 
-  /**
-   * Copy static assets from the extension directory to the output path
-   * Used by both dev and deploy builds
-   */
-  async copyStaticAssets(outputPath?: string) {
-    if (this.specification.copyStaticAssets) {
-      return this.specification.copyStaticAssets(this.configuration, this.directory, outputPath ?? this.outputPath)
-    }
-  }
-
   /**
    * Rescans imports for this extension and updates the cached import paths
    * Returns true if the imports changed
diff --git a/packages/app/src/cli/models/extensions/specification.integration.test.ts b/packages/app/src/cli/models/extensions/specification.integration.test.ts
@@ -40,9 +40,9 @@ const testClientSteps: ClientSteps = [
     lifecycle: 'deploy',
     steps: [
       {
-        id: 'copy_static',
-        name: 'Copy static assets',
-        type: 'copy_static_assets',
+        id: 'bundle-ui',
+        name: 'Bundle UI Extension',
+        type: 'bundle_ui',
       },
     ],
   },
diff --git a/packages/app/src/cli/models/extensions/specification.ts b/packages/app/src/cli/models/extensions/specification.ts
@@ -133,11 +133,6 @@ export interface ExtensionSpecification<TConfiguration extends BaseConfigType =
     typeDefinitionsByFile: Map<string, Set<string>>,
   ) => Promise<void>
 
-  /**
-   * Copy static assets from the extension directory to the output path
-   */
-  copyStaticAssets?: (configuration: TConfiguration, directory: string, outputPath: string) => Promise<void>
-
   /**
    * Custom watch configuration for dev sessions.
    * Return a DevSessionWatchConfig with paths to watch and optionally paths to ignore,
diff --git a/packages/app/src/cli/models/extensions/specifications/checkout_post_purchase.ts b/packages/app/src/cli/models/extensions/specifications/checkout_post_purchase.ts
@@ -22,10 +22,7 @@ const checkoutPostPurchaseSpec = createExtensionSpecification({
   clientSteps: [
     {
       lifecycle: 'deploy',
-      steps: [
-        {id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}},
-        {id: 'copy-static-assets', name: 'Copy Static Assets', type: 'copy_static_assets', config: {}},
-      ],
+      steps: [{id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}}],
     },
   ],
   deployConfig: async (config, _) => {
diff --git a/packages/app/src/cli/models/extensions/specifications/checkout_ui_extension.ts b/packages/app/src/cli/models/extensions/specifications/checkout_ui_extension.ts
@@ -28,10 +28,7 @@ const checkoutSpec = createExtensionSpecification({
   clientSteps: [
     {
       lifecycle: 'deploy',
-      steps: [
-        {id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}},
-        {id: 'copy-static-assets', name: 'Copy Static Assets', type: 'copy_static_assets', config: {}},
-      ],
+      steps: [{id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}}],
     },
   ],
   deployConfig: async (config, directory) => {
diff --git a/packages/app/src/cli/models/extensions/specifications/pos_ui_extension.ts b/packages/app/src/cli/models/extensions/specifications/pos_ui_extension.ts
@@ -20,10 +20,7 @@ const posUISpec = createExtensionSpecification({
   clientSteps: [
     {
       lifecycle: 'deploy',
-      steps: [
-        {id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}},
-        {id: 'copy-static-assets', name: 'Copy Static Assets', type: 'copy_static_assets', config: {}},
-      ],
+      steps: [{id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}}],
     },
   ],
   deployConfig: async (config, directory) => {
diff --git a/packages/app/src/cli/models/extensions/specifications/product_subscription.ts b/packages/app/src/cli/models/extensions/specifications/product_subscription.ts
@@ -21,10 +21,7 @@ const productSubscriptionSpec = createExtensionSpecification({
   clientSteps: [
     {
       lifecycle: 'deploy',
-      steps: [
-        {id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}},
-        {id: 'copy-static-assets', name: 'Copy Static Assets', type: 'copy_static_assets', config: {}},
-      ],
+      steps: [{id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}}],
     },
   ],
   deployConfig: async (_, directory) => {
diff --git a/packages/app/src/cli/models/extensions/specifications/ui_extension.ts b/packages/app/src/cli/models/extensions/specifications/ui_extension.ts
@@ -13,8 +13,8 @@ import {getExtensionPointTargetSurface} from '../../../services/dev/extension/ut
 import {ExtensionInstance} from '../extension-instance.js'
 import {formatContent} from '../../../utilities/file-formatter.js'
 import {err, ok, Result} from '@shopify/cli-kit/node/result'
-import {copyFile, fileExists, readFile} from '@shopify/cli-kit/node/fs'
-import {joinPath, dirname} from '@shopify/cli-kit/node/path'
+import {fileExists, readFile} from '@shopify/cli-kit/node/fs'
+import {joinPath} from '@shopify/cli-kit/node/path'
 import {outputContent, outputToken, outputWarn} from '@shopify/cli-kit/node/output'
 import {zod} from '@shopify/cli-kit/node/schema'
 
@@ -174,26 +174,6 @@ const uiExtensionSpec = createExtensionSpecification({
       ...(assetsArray.length ? {assets: assetsArray} : {}),
     }
   },
-  copyStaticAssets: async (config, directory, outputPath) => {
-    if (!isRemoteDomExtension(config)) return
-
-    await Promise.all(
-      config.extension_points.flatMap((extensionPoint) => {
-        if (!('build_manifest' in extensionPoint)) return []
-
-        return Object.entries(extensionPoint.build_manifest.assets).map(([_, asset]) => {
-          if (asset.static && asset.module) {
-            const sourceFile = joinPath(directory, asset.module)
-            const outputFilePath = joinPath(dirname(outputPath), asset.filepath)
-            return copyFile(sourceFile, outputFilePath).catch((error) => {
-              throw new Error(`Failed to copy static asset ${asset.module} to ${outputFilePath}: ${error.message}`)
-            })
-          }
-          return Promise.resolve()
-        })
-      }),
-    )
-  },
   hasExtensionPointTarget: (config, requestedTarget) => {
     return (
       config.extension_points?.find((extensionPoint) => {
diff --git a/packages/app/src/cli/models/extensions/specifications/web_pixel_extension.ts b/packages/app/src/cli/models/extensions/specifications/web_pixel_extension.ts
@@ -38,10 +38,7 @@ const webPixelSpec = createExtensionSpecification({
   clientSteps: [
     {
       lifecycle: 'deploy',
-      steps: [
-        {id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}},
-        {id: 'copy-static-assets', name: 'Copy Static Assets', type: 'copy_static_assets', config: {}},
-      ],
+      steps: [{id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}}],
     },
   ],
   deployConfig: async (config, _) => {
diff --git a/packages/app/src/cli/services/build/client-steps.ts b/packages/app/src/cli/services/build/client-steps.ts
@@ -30,7 +30,7 @@ interface BundleUIStep extends BaseStep {
 
 /** Steps that don't require any config yet. */
 interface NoConfigStep extends BaseStep {
-  readonly type: 'build_theme' | 'bundle_theme' | 'copy_static_assets' | 'build_function' | 'create_tax_stub'
+  readonly type: 'build_theme' | 'bundle_theme' | 'build_function' | 'create_tax_stub'
   readonly config?: Record<string, never>
 }
 
diff --git a/packages/app/src/cli/services/build/extension.ts b/packages/app/src/cli/services/build/extension.ts
@@ -58,21 +58,25 @@ export interface ExtensionBuildOptions {
 /**
  * It builds the UI extensions.
  * @param options - Build options.
+ * @returns The local output path.
  */
-export async function buildUIExtension(extension: ExtensionInstance, options: ExtensionBuildOptions): Promise<void> {
+export async function buildUIExtension(extension: ExtensionInstance, options: ExtensionBuildOptions): Promise<string> {
   options.stdout.write(`Bundling UI extension ${extension.localIdentifier}...`)
   const env = options.app.dotenv?.variables ?? {}
   if (options.appURL) {
     env.APP_URL = options.appURL
   }
 
+  // Always build into the extension's local directory (e.g. ext/dist/handle.js)
+  const localOutputPath = joinPath(extension.directory, extension.outputRelativePath)
+
   const {main, assets} = extension.getBundleExtensionStdinContent()
 
   const startTime = performance.now()
   try {
     await bundleExtension({
       minify: true,
-      outputPath: extension.outputPath,
+      outputPath: localOutputPath,
       stdin: {
         contents: main,
         resolveDir: extension.directory,
@@ -122,6 +126,7 @@ export async function buildUIExtension(extension: ExtensionInstance, options: Ex
   const duration = Math.round(performance.now() - startTime)
   const sizeInfo = await formatBundleSize(extension.outputPath)
   options.stdout.write(`${extension.localIdentifier} successfully built in ${duration}ms${sizeInfo}`)
+  return localOutputPath
 }
 
 type BuildFunctionExtensionOptions = ExtensionBuildOptions
diff --git a/packages/app/src/cli/services/build/steps/bundle-ui-step.ts b/packages/app/src/cli/services/build/steps/bundle-ui-step.ts
@@ -1,6 +1,8 @@
 import {mergeManifestEntries} from './include-assets/generate-manifest.js'
 import {buildUIExtension} from '../extension.js'
 import {BuildManifest} from '../../../models/extensions/specifications/ui_extension.js'
+import {copyFile} from '@shopify/cli-kit/node/fs'
+import {dirname} from '@shopify/cli-kit/node/path'
 import type {LifecycleStep, BuildContext} from '../client-steps.js'
 
 interface ExtensionPointWithBuildManifest {
@@ -11,12 +13,15 @@ interface ExtensionPointWithBuildManifest {
 /**
  * Executes a bundle_ui build step.
  *
- * Bundles the UI extension using esbuild, writing output to extension.outputPath.
- * When `generatesAssetsManifest` is true, writes built asset entries (from
- * build_manifest) into manifest.json so downstream steps can merge on top.
+ * Bundles the UI extension using esbuild into the extension's local directory
+ * and copies the output to the bundle. When `generatesAssetsManifest` is true,
+ * writes built asset entries (from build_manifest) into manifest.json so
+ * downstream steps can merge on top.
  */
 export async function executeBundleUIStep(step: LifecycleStep, context: BuildContext): Promise<void> {
-  await buildUIExtension(context.extension, context.options)
+  const localOutputPath = await buildUIExtension(context.extension, context.options)
+  // Copy the locally built files into the bundle
+  await copyFile(dirname(localOutputPath), dirname(context.extension.outputPath))
 
   if (!('generatesAssetsManifest' in step) || !step.generatesAssetsManifest) return
 
diff --git a/packages/app/src/cli/services/build/steps/copy-static-assets-step.ts b/packages/app/src/cli/services/build/steps/copy-static-assets-step.ts
diff --git a/packages/app/src/cli/services/build/steps/index.ts b/packages/app/src/cli/services/build/steps/index.ts
@@ -2,7 +2,6 @@ import {executeIncludeAssetsStep} from './include-assets-step.js'
 import {executeBuildThemeStep} from './build-theme-step.js'
 import {executeBundleThemeStep} from './bundle-theme-step.js'
 import {executeBundleUIStep} from './bundle-ui-step.js'
-import {executeCopyStaticAssetsStep} from './copy-static-assets-step.js'
 import {executeBuildFunctionStep} from './build-function-step.js'
 import {executeCreateTaxStubStep} from './create-tax-stub-step.js'
 import type {LifecycleStep, BuildContext} from '../client-steps.js'
@@ -30,9 +29,6 @@ export async function executeStepByType(step: LifecycleStep, context: BuildConte
     case 'bundle_ui':
       return executeBundleUIStep(step, context)
 
-    case 'copy_static_assets':
-      return executeCopyStaticAssetsStep(step, context)
-
     case 'build_function':
       return executeBuildFunctionStep(step, context)
 
