WIP: asset pipeline for hosted static app

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

@@ -366,7 +366,13 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
           this.specification.buildConfig.filePatterns,
           this.specification.buildConfig.ignoredFilePatterns,
         )
+      case 'static_app':
+        console.log('mode: static_app', this.specification.identifier)
+        await this.copyStaticAssets()
+        break
       case 'none':
+        console.log('mode: none', this.specification.identifier)
+        await this.copyStaticAssets()
         break
     }
   }

packages/app/src/cli/models/extensions/specification.ts

@@ -49,7 +49,7 @@ export interface Asset {
 }
 
 type BuildConfig =
-  | {mode: 'ui' | 'theme' | 'function' | 'tax_calculation' | 'none'}
+  | {mode: 'ui' | 'theme' | 'function' | 'tax_calculation' | 'none' | 'static_app'}
   | {mode: 'copy_files'; filePatterns: string[]; ignoredFilePatterns?: string[]}
 /**
  * Extension specification with all the needed properties and methods to load an extension.
@@ -239,11 +239,13 @@ export function createExtensionSpecification<TConfiguration extends BaseConfigTy
 export function createConfigExtensionSpecification<TConfiguration extends BaseConfigType = BaseConfigType>(spec: {
   identifier: string
   schema: ZodSchemaType<TConfiguration>
+  buildConfig?: BuildConfig
   appModuleFeatures?: (config?: TConfiguration) => ExtensionFeature[]
   transformConfig: TransformationConfig | CustomTransformationConfig
   uidStrategy?: UidStrategy
   getDevSessionUpdateMessages?: (config: TConfiguration) => Promise<string[]>
   patchWithAppDevURLs?: (config: TConfiguration, urls: ApplicationURLs) => void
+  copyStaticAssets?: (config: TConfiguration, directory: string, outputPath: string) => Promise<void>
 }): ExtensionSpecification<TConfiguration> {
   const appModuleFeatures = spec.appModuleFeatures ?? (() => [])
   return createExtensionSpecification({
@@ -258,6 +260,7 @@ export function createConfigExtensionSpecification<TConfiguration extends BaseCo
     uidStrategy: spec.uidStrategy ?? 'single',
     getDevSessionUpdateMessages: spec.getDevSessionUpdateMessages,
     patchWithAppDevURLs: spec.patchWithAppDevURLs,
+    copyStaticAssets: spec.copyStaticAssets,
   })
 }
 

packages/app/src/cli/models/extensions/specifications/app_config_app_home.ts

@@ -1,6 +1,8 @@
 import {validateUrl} from '../../app/validation/common.js'
 import {BaseSchemaWithoutHandle} from '../schemas.js'
 import {TransformationConfig, createConfigExtensionSpecification} from '../specification.js'
+import {copyDirectoryContents} from '@shopify/cli-kit/node/fs'
+import {dirname, joinPath} from '@shopify/cli-kit/node/path'
 import {zod} from '@shopify/cli-kit/node/schema'
 
 const AppHomeSchema = BaseSchemaWithoutHandle.extend({
@@ -11,18 +13,21 @@ const AppHomeSchema = BaseSchemaWithoutHandle.extend({
       url: validateUrl(zod.string().max(255, {message: 'String must be less than 255 characters'})),
     })
     .optional(),
+  static_root: zod.string().optional(),
 })
 
 const AppHomeTransformConfig: TransformationConfig = {
   app_url: 'application_url',
   embedded: 'embedded',
   preferences_url: 'app_preferences.url',
+  static_root: 'static_root',
 }
 
 export const AppHomeSpecIdentifier = 'app_home'
 
 const appHomeSpec = createConfigExtensionSpecification({
   identifier: AppHomeSpecIdentifier,
+  buildConfig: {mode: 'static_app'} as const,
   schema: AppHomeSchema,
   transformConfig: AppHomeTransformConfig,
   patchWithAppDevURLs: (config, urls) => {
@@ -31,6 +36,17 @@ const appHomeSpec = createConfigExtensionSpecification({
   getDevSessionUpdateMessages: async (config) => {
     return [`Using URL: ${config.application_url}`]
   },
+  copyStaticAssets: async (config, directory, outputPath) => {
+    console.log({config})
+    config.static_root = 'hosted-app/dist'
+    if (!config.static_root) return
+    const sourceDir = joinPath(directory, config.static_root)
+    const outputDir = dirname(outputPath)
+
+    return copyDirectoryContents(sourceDir, outputDir).catch((error) => {
+      throw new Error(`Failed to copy static assets from ${sourceDir} to ${outputDir}: ${error.message}`)
+    })
+  },
 })
 
 export default appHomeSpec

packages/app/src/cli/services/dev/app-events/app-event-watcher.ts

@@ -148,6 +148,7 @@ export class AppEventWatcher extends EventEmitter {
     this.fileWatcher.onChange((events) => {
       handleWatcherEvents(events, this.app, this.options)
         .then(async (appEvent) => {
+          console.log({appEvent})
           if (appEvent?.extensionEvents.length === 0) outputDebug('Change detected, but no extensions were affected')
           if (!appEvent) return
 
@@ -169,6 +170,13 @@ export class AppEventWatcher extends EventEmitter {
             await this.app.generateExtensionTypes()
           }
 
+          if (appEvent.appWasReloaded) {
+            const appHomeExtension = this.app.realExtensions.find((ext) => ext.specification.identifier === 'app_home')
+            if (appHomeExtension) {
+              await appHomeExtension.copyStaticAssets(this.buildOutputPath)
+            }
+          }
+
           // Find deleted extensions and delete their previous build output
           await this.deleteExtensionsBuildOutput(appEvent)
           this.emit('all', appEvent)