@swell/cli 2.0.1-alpha.17 → 2.0.1-alpha.18

package/dist/push-app-command.js

@@ -1,64 +1,23 @@
-import * as path from 'node:path';
-import * as fs from 'node:fs';
-import { confirm, select, input } from '@inquirer/prompts';
-import Stream from 'stream';
+import { confirm, input, select } from '@inquirer/prompts';
 import { $ } from 'execa';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import Stream from 'node:stream';
 import ora from 'ora';
-import { ConfigType, FrontendProjectTypes, findAppConfig, globAllFilesByPath, allConfigFilesInDir, appConfigFromFile, getConfigTypeFromPath, getConfigTypeKeyFromValue, getFrontendProjectType, getAppSlugId, hashString, filePathExists, isPathDirectory, } from './lib/apps/index.js';
-import { default as localConfig } from './lib/config.js';
 import { default as swellConfig } from './lib/app-config.js';
-import style from './lib/style.js';
+import { ConfigType, FrontendProjectTypes, allConfigFilesInDir, appConfigFromFile, filePathExists, findAppConfig, getAppSlugId, getConfigTypeFromPath, getConfigTypeKeyFromValue, getFrontendProjectType, globAllFilesByPath, hashString, isPathDirectory, } from './lib/apps/index.js';
+import { default as localConfig } from './lib/config.js';
 import { toAppId } from './lib/create/index.js';
+import style from './lib/style.js';
 import { RemoteAppCommand } from './remote-app-command.js';
 const PUSH_CONCURRENCY = 3;
 export class PushAppCommand extends RemoteAppCommand {
     frontendPath = '';
-    watchingFiles = [];
-    watchingChangeQueue = [];
-    watchingChangeQueueRunning = false;
     logWatchChanges = true;
     onWatchChange;
-    async exec(command, onOutput) {
-        const $$ = $({
-            cwd: this.frontendPath,
-            shell: true,
-            stdin: 'inherit',
-            stderr: onOutput ? 'pipe' : 'inherit',
-            stdout: onOutput ? 'pipe' : 'inherit',
-        });
-        if (onOutput) {
-            const outStream = new Stream.Writable();
-            outStream._write = (chunk, _encoding, next) => {
-                const string = chunk.toString();
-                const out = onOutput(string);
-                if (out !== false) {
-                    console.log(string);
-                }
-                next();
-            };
-            await $$ `${command}`.pipeStdout?.(outStream).pipeStderr?.(outStream);
-        }
-        else {
-            await $$ `${command}`;
-        }
-    }
-    setWatchingFiles() {
-        this.watchingFiles = globAllFilesByPath(this.appPath);
-    }
-    async watchForChanges({ logChanges, syncAll, onChange, } = {}) {
-        this.logWatchChanges = logChanges ?? true;
-        this.onWatchChange = onChange;
-        this.setWatchingFiles();
-        if (syncAll) {
-            await this.pushAppConfigs();
-            fs.watch(this.appPath, { recursive: true }, async (_eventType, _filename) => {
-                await this.pushAppConfigs();
-                this.setWatchingFiles();
-            });
-            return;
-        }
-        fs.watch(this.appPath, { recursive: true }, this.watchListener);
-    }
+    watchingChangeQueue = [];
+    watchingChangeQueueRunning = false;
+    watchingFiles = [];
     watchListener = async (eventType, filename) => {
         const configFile = filename;
         const pathParsed = path.parse(configFile);
@@ -117,51 +76,112 @@ export class PushAppCommand extends RemoteAppCommand {
             }
         }
     };
-    async handleWatchFileChange(configFile, configType, event) {
-        let config;
-        if (event === 'deleted') {
-            config = findAppConfig(this.app, configFile, configType);
-            if (!config) {
-                return;
-            }
-            this.watchingChangeQueue.push({
-                action: 'remove',
-                configFile,
-                appConfig: config,
-            });
-        }
-        else {
-            config = appConfigFromFile(configFile, configType, this.appPath);
-            this.watchingChangeQueue.push({
-                action: 'push',
-                configFile,
-                appConfig: config,
-            });
+    async buildFrontend(projectType) {
+        this.log(`Building ${projectType.name} frontend...\n`);
+        // TODO: check package.json for a "build" command and run that if it exists
+        await this.exec(projectType.buildCommand);
+    }
+    async chooseAppToPull(query) {
+        const typeLabelPlural = this.appType === 'theme' ? 'themes' : 'apps';
+        const typeLabelPrefixed = this.appType === 'theme' ? 'a theme' : 'an app';
+        const typeQuery = this.appType === 'theme' ? { type: 'theme' } : { type: 'storefront' };
+        const apps = await this.api.get({
+            adminPath: `/apps`,
+        }, { query: { limit: null, ...typeQuery, ...query } });
+        if (!apps.count) {
+            const currentStore = localConfig.getDefaultStore();
+            this.error(`There are no ${typeLabelPlural} associated with your store ${style.storeId(currentStore)}`);
         }
-        await this.runWatchChangeQueue();
+        const appSlugId = (await select({
+            choices: apps.results.map((app) => ({
+                name: `${style.appConfigValue(app.name)} (${getAppSlugId(app)})`,
+                value: app.private_id,
+            })),
+            message: `Choose ${typeLabelPrefixed} to pull`,
+        }));
+        const appId = apps.results.find((app) => app.private_id === appSlugId).id;
+        const app = await this.getApp(appId);
+        this.log();
+        return app;
     }
-    async runWatchChangeQueue() {
-        if (this.watchingChangeQueueRunning) {
-            return;
+    async createAppStorefront(hasOtherStorefronts = true) {
+        let appId;
+        let themeAppId;
+        if (this.app.type === 'theme') {
+            themeAppId = this.app.id;
+            const storefrontApps = await this.handleRequestErrors(async () => this.api.get({
+                adminPath: `/apps?type=storefront&kind=shop`,
+            }));
+            const compatibleStorefrontApps = storefrontApps.results.filter((app) => app.installed &&
+                app.storefront?.theme?.provider === 'app' &&
+                this.app.theme?.storefront?.app === toAppId(app.private_id));
+            if (compatibleStorefrontApps.length === 0) {
+                this.error('No compatible storefront apps found for this theme. Install a new storefront app first.');
+            }
+            const targetApp = compatibleStorefrontApps.length === 1
+                ? compatibleStorefrontApps[0]
+                : await select({
+                    choices: compatibleStorefrontApps.map((app) => ({
+                        name: `${style.appConfigValue(app.name)} v${app.version}`,
+                        value: app,
+                    })),
+                    message: 'Choose a storefront app',
+                });
+            appId = targetApp.id;
+            this.log(`\n${style.success('✔')} Using ${style.appConfigValue(targetApp.name)} v${targetApp.version}\n`);
         }
-        while (this.watchingChangeQueue.length) {
-            this.watchingChangeQueueRunning = true;
-            await Promise.all(this.watchingChangeQueue
-                .splice(0, PUSH_CONCURRENCY)
-                .map(async ({ action, configFile, appConfig }) => {
-                let result;
-                if (action === 'remove') {
-                    result = await this.removeRemoteFile(appConfig, this.logWatchChanges);
-                }
-                else {
-                    result = await this.pushRemoteFile(appConfig, this.logWatchChanges);
-                }
-                this.onWatchChange?.(appConfig, result);
+        else if (this.app.type === 'storefront') {
+            appId = this.app.id;
+            const themeApps = await this.handleRequestErrors(async () => this.api.get({
+                adminPath: `/apps?type=theme`,
             }));
+            const compatibleThemeApps = themeApps.results.filter((app) => app.installed &&
+                Object.keys(app.compatibilities || {}).includes(this.app.private_id));
+            if (compatibleThemeApps.length === 0) {
+                this.error('No compatible theme apps found for this storefront. Install a new theme app first.');
+            }
+            let targetApp;
+            if (compatibleThemeApps.length === 1) {
+                targetApp = compatibleThemeApps[0];
+            }
+            else {
+                targetApp = await select({
+                    choices: compatibleThemeApps.map((app) => ({
+                        name: `${style.appConfigValue(app.name)} v${app.version}`,
+                        value: app,
+                    })),
+                    message: 'Choose a theme app',
+                });
+                this.log();
+            }
+            themeAppId = targetApp.id;
+            this.log(`${style.success('✔')} Using ${style.appConfigValue(targetApp.name)} v${targetApp.version}\n`);
         }
-        this.watchingChangeQueueRunning = false;
-        // refetch app to get updated configs
-        this.app = await this.getAppWithConfig(this.app.id);
+        else {
+            this.error('App type not supported for storefront creation');
+        }
+        let name;
+        if (hasOtherStorefronts) {
+            name = await input({
+                default: this.app.name,
+                message: 'Name your storefront',
+            });
+            if (name === this.app.name) {
+                name = undefined; // undefined allows the api to auto increment name
+            }
+        }
+        return this.handleRequestErrors(async () => this.api.post({
+            adminPath: `/storefronts`,
+        }, {
+            body: {
+                app_id: appId,
+                name,
+                theme_app_id: themeAppId,
+            },
+            onAsyncGetPath: (response) => ({
+                adminPath: `/storefronts/${response.id}`,
+            }),
+        }));
     }
     async deployAppFrontend(force, log) {
         const currentStore = localConfig.getDefaultStore();
@@ -188,45 +208,14 @@ export class PushAppCommand extends RemoteAppCommand {
             }
         }
     }
-    getFrontendDeploymentHash() {
-        const localConfigs = this.getLocalAppConfigs();
-        let frontendHashes = localConfigs
-            .filter((config) => config.filePath?.startsWith(`frontend${path.sep}`))
-            .map((config) => config.hash)
-            .sort()
-            .join('|');
-        if (frontendHashes.length > 0) {
-            const packageHash = localConfigs.find((config) => config.filePath === 'package.json')?.hash;
-            frontendHashes += `|${packageHash}`;
-        }
-        return frontendHashes?.length > 0 ? hashString(frontendHashes) : undefined;
-    }
-    getFrontendProjectType(required = true) {
-        this.frontendPath = path.join(this.appPath, 'frontend');
-        if (!required) {
-            const frontendExists = filePathExists(this.frontendPath);
-            if (!frontendExists) {
-                return null;
-            }
-        }
-        const projectType = getFrontendProjectType(this.appPath);
-        if (!projectType) {
-            this.error(`No valid frontend app found in ${this.appPath}/${this.frontendPath}. Supported frameworks include: ${FrontendProjectTypes.map((type) => type.slug).join(', ')}.`);
-        }
-        return projectType;
-    }
-    async ensureLoggedIn() {
+    async deployFrontend(projectType) {
+        // TODO: check package.json for a "deploy" command and run that if it exists
+        // Note it must return a URL somehow
         try {
-            const user = await this.api.get({ adminPath: 'user' });
-            if (!user) {
-                throw new Error();
-            }
+            return this.wranglerDeployFrontend(projectType);
         }
-        catch {
-            this.log('Logging in...\n');
-            await this.config.runCommand('login');
-            this.log();
-            return true;
+        catch (error) {
+            this.error(`Error deploying frontend: ${error.message}`);
         }
     }
     async ensureAppExists(file, shouldCreate = true) {
@@ -237,10 +226,9 @@ export class PushAppCommand extends RemoteAppCommand {
             currentStore = localConfig.getDefaultStore();
             this.api.setStoreEnv(currentStore, 'test');
         }
-        const app = await this.getAppWithConfig('').catch((_error) => {
-            // Ignore so we can continue to create it
-            return null;
-        });
+        const app = await this.getAppWithConfig('').catch((_error) => 
+        // Ignore so we can continue to create it
+        null);
         const isTheme = app?.type === 'theme';
         if (app && !isTheme && this.appType === 'theme') {
             this.error(`App ${style.appConfigValue(app?.name)} is not a theme.`);
@@ -279,88 +267,71 @@ export class PushAppCommand extends RemoteAppCommand {
         }
         return true;
     }
-    async confirmRemoveInstalledApp(app, currentStore) {
-        if (!app?.private_id) {
+    async ensureLoggedIn() {
+        try {
+            const user = await this.api.get({ adminPath: 'user' });
+            if (!user) {
+                throw new Error('Failed to log in');
+            }
+        }
+        catch {
+            this.log('Logging in...\n');
+            await this.config.runCommand('login');
+            this.log();
             return true;
         }
-        const existingInstalledApp = await this.api.get({
-            adminPath: `/client/apps/${app.private_id}`,
-        }, { query: { versioned: true } });
-        if (existingInstalledApp) {
-            const continuePush = await confirm({
-                default: false,
-                message: `${style.storeId(currentStore)} has an installed version of ${app.name ? style.appConfigValue(app.name) : 'this app'} v${existingInstalledApp.version}. Do you want to replace it with a development instance?`,
-            });
-            if (!continuePush) {
-                return false;
-            }
-            // uninstall the existing app
-            const spinner = ora();
-            spinner.start('Removing installed app...');
-            try {
-                await this.api.put({
-                    adminPath: `/client/apps/${app.id}`,
-                }, {
-                    body: { uninstalled: true },
-                });
-                spinner.succeed('Installed app removed.');
-                this.log();
-            }
-            catch (error) {
-                spinner.fail(`Error removing installed app from ${style.storeId(currentStore)}.`);
-                this.logError(error.message);
-                return false;
-            }
-        }
-        return existingInstalledApp;
     }
-    resolveAppPath(appId, targetPath) {
-        let resolvedAppId = appId || '';
-        let resolvedPath = targetPath || resolvedAppId;
-        // If app_id matches directory, use it as target path
-        if (!targetPath &&
-            isPathDirectory(path.resolve(process.cwd(), resolvedAppId))) {
-            resolvedPath = resolvedAppId;
+    async exec(command, onOutput) {
+        const $$ = $({
+            cwd: this.frontendPath,
+            shell: true,
+            stderr: onOutput ? 'pipe' : 'inherit',
+            stdin: 'inherit',
+            stdout: onOutput ? 'pipe' : 'inherit',
+        });
+        if (onOutput) {
+            const outStream = new Stream.Writable();
+            outStream._write = (chunk, _encoding, next) => {
+                const string = chunk.toString();
+                const out = onOutput(string);
+                if (out !== false) {
+                    console.log(string);
+                }
+                next();
+            };
+            await $$ `${command}`.pipeStdout?.(outStream).pipeStderr?.(outStream);
         }
-        // Reset app config and path if appId is provided
-        if (resolvedPath && this.appPath === '.') {
-            this.appPath = path.resolve(process.cwd(), resolvedPath);
+        else {
+            await $$ `${command}`;
         }
-        return this.appPath;
     }
-    async getAppStorefront(params) {
+    async getAllAppStorefronts(params) {
         const query = Object.entries(params || {})
             .map(([key, value]) => `${key}=${value}`)
             .join('&');
-        try {
-            return await this.handleRequestErrors(async () => this.api.get({
-                adminPath: `/apps/${this.app.id}/storefront?${query}`,
-            }));
-        }
-        catch {
-            // noop
-        }
+        return this.handleRequestErrors(async () => this.api.get({
+            adminPath: `/apps/${this.app.id}/storefronts?${query}`,
+        }));
     }
     async getAllStorefronts(params) {
         const query = Object.entries(params || {})
             .map(([key, value]) => `${key}=${value}`)
             .join('&');
-        return await this.handleRequestErrors(async () => this.api.get({
+        return this.handleRequestErrors(async () => this.api.get({
             adminPath: `/storefronts?${query}`,
         }));
     }
-    async getAllAppStorefronts(params) {
+    async getAppStorefront(params) {
         const query = Object.entries(params || {})
             .map(([key, value]) => `${key}=${value}`)
             .join('&');
-        return await this.handleRequestErrors(async () => this.api.get({
-            adminPath: `/apps/${this.app.id}/storefronts?${query}`,
-        }));
-    }
-    saveCurrentStorefront() {
-        const currentStorefront = localConfig.getDefaultStorefront(this.appPath);
-        if (this.storefront && this.storefront.id !== currentStorefront) {
-            localConfig.setDefaultStorefront(this.appPath, this.storefront.id);
+        try {
+            return this.handleRequestErrors(async () => this.api.get({
+                adminPath: `/apps/${this.app.id}/storefront?${query}`,
+            }));
+        }
+        catch {
+            // noop
         }
     }
     async getAppToPull(args, shouldChoose = true) {
@@ -391,67 +362,50 @@ export class PushAppCommand extends RemoteAppCommand {
     }
     async getExistingApp(appId) {
         try {
-            return await this.getApp(appId);
+            return this.getApp(appId);
         }
-        catch (err) {
-            if (err.status === 404) {
+        catch (error) {
+            if (error.status === 404) {
                 const labelPrefix = this.appType === 'theme' ? 'Theme' : 'App';
                 this.error(`${labelPrefix} '${appId}' not found.`);
             }
             else {
-                throw err;
+                throw error;
             }
         }
     }
-    async getStorefrontToPush(flags = {}) {
-        const targetStorefront = flags['storefront-id'];
-        const currentStorefront = localConfig.getDefaultStorefront(this.appPath);
-        let storefrontId = targetStorefront || currentStorefront;
-        if (!storefrontId || flags['storefront-select']) {
-            const storefronts = await this.getAllAppStorefronts({
-                type: this.appType,
-            });
-            if (storefronts.count > 0) {
-                storefrontId = await select({
-                    message: 'Choose a storefront',
-                    choices: [
-                        ...storefronts.results.map((storefront) => ({
-                            name: `${style.appConfigValue(storefront.name)} (${storefront.id}) ${storefront.primary ? '[primary]' : ''}`,
-                            value: storefront.id,
-                        })),
-                        {
-                            name: 'Create new storefront',
-                            value: null,
-                        },
-                    ],
-                });
-            }
-            if (!storefrontId) {
-                this.storefront = await this.createAppStorefront(storefronts.count > 0);
-            }
+    getFrontendDeploymentHash() {
+        const localConfigs = this.getLocalAppConfigs();
+        let frontendHashes = localConfigs
+            .filter((config) => config.filePath?.startsWith(`frontend${path.sep}`))
+            .map((config) => config.hash)
+            .sort()
+            .join('|');
+        if (frontendHashes.length > 0) {
+            const packageHash = localConfigs.find((config) => config.filePath === 'package.json')?.hash;
+            frontendHashes += `|${packageHash}`;
         }
-        if (storefrontId) {
-            this.storefront = await this.getAppStorefront({
-                storefront_id: storefrontId,
-                type: this.appType,
-            });
-            if (!this.storefront) {
-                if (targetStorefront) {
-                    this.error(`Storefront ${style.appConfigValue(storefrontId)} not found.`);
-                }
-                this.log(`Storefront ${style.appConfigValue(storefrontId)} not found.\n`);
-                localConfig.setDefaultStorefront(this.appPath, '');
-                return this.getStorefrontToPush();
+        return frontendHashes?.length > 0 ? hashString(frontendHashes) : undefined;
+    }
+    getFrontendProjectType(required = true) {
+        this.frontendPath = path.join(this.appPath, 'frontend');
+        if (!required) {
+            const frontendExists = filePathExists(this.frontendPath);
+            if (!frontendExists) {
+                return null;
             }
         }
-        this.app = await this.getApp(this.app.id);
-        return this.storefront;
+        const projectType = getFrontendProjectType(this.appPath);
+        if (!projectType) {
+            this.error(`No valid frontend app found in ${this.appPath}/${this.frontendPath}. Supported frameworks include: ${FrontendProjectTypes.map((type) => type.slug).join(', ')}.`);
+        }
+        return projectType;
     }
     async getStorefrontToPull(args = {}, flags = {}) {
-        const { targetPath } = args;
+        const { appId, targetPath } = args;
         const targetApp = await this.getAppToPull(args, false);
         const targetStorefront = flags['storefront-id'];
-        this.resolveAppPath(args.appId, targetPath);
+        this.resolveAppPath(appId, targetPath);
         // Only use default if path exists
         let currentStorefront;
         if (isPathDirectory(this.appPath)) {
@@ -466,13 +420,11 @@ export class PushAppCommand extends RemoteAppCommand {
                 : { type: this.appType });
             if (storefronts.count > 0) {
                 storefrontId = await select({
+                    choices: storefronts.results.map((storefront) => ({
+                        name: `${style.appConfigValue(storefront.name)} (${storefront.id}) ${storefront.primary ? '[primary]' : ''}`,
+                        value: storefront.id,
+                    })),
                     message: 'Choose a storefront',
-                    choices: [
-                        ...storefronts.results.map((storefront) => ({
-                            name: `${style.appConfigValue(storefront.name)} (${storefront.id}) ${storefront.primary ? '[primary]' : ''}`,
-                            value: storefront.id,
-                        })),
-                    ],
                 });
                 this.storefront = storefronts.results.find((storefront) => storefront.id === storefrontId);
                 const appId = this.appType === 'theme'
@@ -508,111 +460,84 @@ export class PushAppCommand extends RemoteAppCommand {
         this.swellConfig = swellConfig(this.appPath);
         return this.storefront;
     }
-    async chooseAppToPull(query) {
-        const typeLabelPlural = this.appType === 'theme' ? 'themes' : 'apps';
-        const typeLabelPrefixed = this.appType === 'theme' ? 'a theme' : 'an app';
-        const typeQuery = this.appType === 'theme' ? { type: 'theme' } : { type: 'storefront' };
-        const apps = await this.api.get({
-            adminPath: `/apps`,
-        }, { query: { limit: null, ...typeQuery, ...query } });
-        if (!apps.count) {
-            const currentStore = localConfig.getDefaultStore();
-            this.error(`There are no ${typeLabelPlural} associated with your store ${style.storeId(currentStore)}`);
-        }
-        const appSlugId = (await select({
-            choices: apps.results.map((app) => ({
-                name: `${style.appConfigValue(app.name)} (${getAppSlugId(app)})`,
-                value: app.private_id,
-            })),
-            message: `Choose ${typeLabelPrefixed} to pull`,
-        }));
-        const appId = apps.results.find((app) => app.private_id === appSlugId).id;
-        const app = await this.getApp(appId);
-        this.log();
-        return app;
-    }
-    async createAppStorefront(hasOtherStorefronts = true) {
-        let appId;
-        let themeAppId;
-        if (this.app.type === 'theme') {
-            themeAppId = this.app.id;
-            const storefrontApps = await this.handleRequestErrors(async () => this.api.get({
-                adminPath: `/apps?type=storefront&kind=shop`,
-            }));
-            const compatibleStorefrontApps = storefrontApps.results.filter((app) => app.installed &&
-                app.storefront?.theme?.provider === 'app' &&
-                this.app.theme?.storefront?.app === toAppId(app.private_id));
-            if (!compatibleStorefrontApps.length) {
-                this.error('No compatible storefront apps found for this theme. Install a new storefront app first.');
-            }
-            let targetApp;
-            if (compatibleStorefrontApps.length === 1) {
-                targetApp = compatibleStorefrontApps[0];
-            }
-            else {
-                targetApp = await select({
-                    message: 'Choose a storefront app',
-                    choices: compatibleStorefrontApps.map((app) => ({
-                        name: `${style.appConfigValue(app.name)} v${app.version}`,
-                        value: app,
-                    })),
+    async getStorefrontToPush(flags = {}) {
+        const targetStorefront = flags['storefront-id'];
+        const currentStorefront = localConfig.getDefaultStorefront(this.appPath);
+        let storefrontId = targetStorefront || currentStorefront;
+        if (!storefrontId || flags['storefront-select']) {
+            const storefronts = await this.getAllAppStorefronts({
+                type: this.appType,
+            });
+            if (storefronts.count > 0) {
+                storefrontId = await select({
+                    choices: [
+                        ...storefronts.results.map((storefront) => ({
+                            name: `${style.appConfigValue(storefront.name)} (${storefront.id}) ${storefront.primary ? '[primary]' : ''}`,
+                            value: storefront.id,
+                        })),
+                        {
+                            name: 'Create new storefront',
+                            value: null,
+                        },
+                    ],
+                    message: 'Choose a storefront',
                 });
             }
-            appId = targetApp.id;
-            this.log(`\n${style.success('✔')} Using ${style.appConfigValue(targetApp.name)} v${targetApp.version}\n`);
-        }
-        else if (this.app.type === 'storefront') {
-            appId = this.app.id;
-            const themeApps = await this.handleRequestErrors(async () => this.api.get({
-                adminPath: `/apps?type=theme`,
-            }));
-            const compatibleThemeApps = themeApps.results.filter((app) => app.installed &&
-                Object.keys(app.compatibilities || {}).includes(this.app.private_id));
-            if (!compatibleThemeApps.length) {
-                this.error('No compatible theme apps found for this storefront. Install a new theme app first.');
+            if (!storefrontId) {
+                this.storefront = await this.createAppStorefront(storefronts.count > 0);
             }
-            let targetApp;
-            if (compatibleThemeApps.length === 1) {
-                targetApp = compatibleThemeApps[0];
+        }
+        if (storefrontId) {
+            this.storefront = await this.getAppStorefront({
+                storefront_id: storefrontId,
+                type: this.appType,
+            });
+            if (!this.storefront) {
+                if (targetStorefront) {
+                    this.error(`Storefront ${style.appConfigValue(storefrontId)} not found.`);
+                }
+                this.log(`Storefront ${style.appConfigValue(storefrontId)} not found.\n`);
+                localConfig.setDefaultStorefront(this.appPath, '');
+                return this.getStorefrontToPush();
             }
-            else {
-                targetApp = await select({
-                    message: 'Choose a theme app',
-                    choices: compatibleThemeApps.map((app) => ({
-                        name: `${style.appConfigValue(app.name)} v${app.version}`,
-                        value: app,
-                    })),
-                });
-                this.log();
+        }
+        this.app = await this.getApp(this.app.id);
+        return this.storefront;
+    }
+    async handleWatchFileChange(configFile, configType, event) {
+        let config;
+        if (event === 'deleted') {
+            config = findAppConfig(this.app, configFile, configType);
+            if (!config) {
+                return;
             }
-            themeAppId = targetApp.id;
-            this.log(`${style.success('✔')} Using ${style.appConfigValue(targetApp.name)} v${targetApp.version}\n`);
+            this.watchingChangeQueue.push({
+                action: 'remove',
+                appConfig: config,
+                configFile,
+            });
         }
         else {
-            this.error('App type not supported for storefront creation');
-        }
-        let name;
-        if (hasOtherStorefronts) {
-            name = await input({
-                message: 'Name your storefront',
-                default: this.app.name,
+            config = appConfigFromFile(configFile, configType, this.appPath);
+            this.watchingChangeQueue.push({
+                action: 'push',
+                appConfig: config,
+                configFile,
             });
-            if (name === this.app.name) {
-                name = undefined; // undefined allows the api to auto increment name
-            }
         }
-        return this.handleRequestErrors(async () => this.api.post({
-            adminPath: `/storefronts`,
-        }, {
-            body: {
-                name,
-                app_id: appId,
-                theme_app_id: themeAppId,
-            },
-            onAsyncGetPath: (response) => ({
-                adminPath: `/storefronts/${response.id}`,
-            }),
-        }));
+        await this.runWatchChangeQueue();
+    }
+    logAppFrontendUrl() {
+        const currentStore = localConfig.getDefaultStore();
+        // Shouldn't happen, but just in case
+        if (!this.app.installed?.id) {
+            return;
+        }
+        this.log(`View your app at ${style.link(this.appFrontendUrl(currentStore, this.app.installed.id))}.`);
+    }
+    logDashboardUrl(flags) {
+        const currentStore = localConfig.getDefaultStore();
+        this.log(`View the ${style.appConfigValue(this.app.name)} app in your dashboard at ${style.link(this.dashboardUrl(flags, currentStore))}.`);
     }
     logStorefrontConnected() {
         if (!this.storefront) {
@@ -624,9 +549,15 @@ export class PushAppCommand extends RemoteAppCommand {
             : '';
         this.log(`[storefront] ${style.appName(name)}${themeLog}\n`);
     }
-    logDashboardUrl(flags) {
+    logStorefrontFrontendUrl(storefront, branchId) {
         const currentStore = localConfig.getDefaultStore();
-        this.log(`View the ${style.appConfigValue(this.app.name)} app in your dashboard at ${style.link(this.dashboardUrl(flags, currentStore))}.`);
+        this.log(`View your storefront at ${style.link(this.storefrontFrontendUrl(currentStore, storefront, branchId))}.`);
+    }
+    async pushFile(relativePath) {
+        const basePath = relativePath.split(path.sep)[0];
+        const configType = getConfigTypeFromPath(basePath) || ConfigType.FILE;
+        const config = appConfigFromFile(relativePath, configType, this.appPath);
+        await this.pushRemoteFile(config);
     }
     async pushFilePath(relativePath, force) {
         const topDir = relativePath.split(path.sep)[0];
@@ -638,23 +569,18 @@ export class PushAppCommand extends RemoteAppCommand {
         for (const { configFile } of allConfigFilesInDir(this.appPath, relativePath, configTypeKey)) {
             const config = appConfigFromFile(configFile, configType, this.appPath);
             allFiles.push(config);
-            const exConfig = exAppConfigs.find((exConfig) => {
-                return config.filePath === exConfig.filePath;
-            });
+            const exConfig = exAppConfigs.find((exConfig) => config.filePath === exConfig.filePath);
             if (!force && exConfig && exConfig.hash === config.hash) {
                 continue;
             }
             pushFiles.push(config);
         }
-        const filesToRemove = exAppConfigs.filter((config) => {
-            return !allFiles.find((appConfig) => {
-                return appConfig.filePath === config.filePath;
-            });
-        });
+        const filesToRemove = exAppConfigs.filter((config) => !allFiles.some((appConfig) => appConfig.filePath === config.filePath));
         const hasChanges = pushFiles.length > 0 || filesToRemove.length > 0;
         if (pushFiles.length > 0) {
             const pushConcurrency = configTypeKey === 'ASSET' ? 1 : PUSH_CONCURRENCY;
-            while (pushFiles.length) {
+            while (pushFiles.length > 0) {
+                // eslint-disable-next-line no-await-in-loop
                 await Promise.all(pushFiles
                     .splice(0, pushConcurrency)
                     .map(async (appConfig) => {
@@ -664,7 +590,8 @@ export class PushAppCommand extends RemoteAppCommand {
         }
         // Remove any deleted files
         if (filesToRemove.length > 0) {
-            while (filesToRemove.length) {
+            while (filesToRemove.length > 0) {
+                // eslint-disable-next-line no-await-in-loop
                 await Promise.all(filesToRemove.splice(0, PUSH_CONCURRENCY).map(async (appConfig) => {
                     await this.removeRemoteFile(appConfig);
                 }));
@@ -678,26 +605,79 @@ export class PushAppCommand extends RemoteAppCommand {
             this.log(`${style.success('✔')} Pushed ${style.path(relativePath)} to ${style.appConfigValue(this.app.name)}.`);
         }
     }
-    async pushFile(relativePath) {
-        const basePath = relativePath.split(path.sep)[0];
-        const configType = getConfigTypeFromPath(basePath) || ConfigType.FILE;
-        const config = appConfigFromFile(relativePath, configType, this.appPath);
-        await this.pushRemoteFile(config);
+    resolveAppPath(appId, targetPath) {
+        const resolvedAppId = appId || '';
+        let resolvedPath = targetPath || resolvedAppId;
+        // If app_id matches directory, use it as target path
+        if (!targetPath &&
+            isPathDirectory(path.resolve(process.cwd(), resolvedAppId))) {
+            resolvedPath = resolvedAppId;
+        }
+        // Reset app config and path if appId is provided
+        if (resolvedPath && this.appPath === '.') {
+            this.appPath = path.resolve(process.cwd(), resolvedPath);
+        }
+        return this.appPath;
     }
-    async deployFrontend(projectType) {
-        // TODO: check package.json for a "deploy" command and run that if it exists
-        // Note it must return a URL somehow
-        try {
-            return this.wranglerDeployFrontend(projectType);
+    async runWatchChangeQueue() {
+        if (this.watchingChangeQueueRunning) {
+            return;
         }
-        catch (error) {
-            this.error(`Error deploying frontend: ${error.message}`);
+        while (this.watchingChangeQueue.length > 0) {
+            this.watchingChangeQueueRunning = true;
+            // eslint-disable-next-line no-await-in-loop
+            await Promise.all(this.watchingChangeQueue
+                .splice(0, PUSH_CONCURRENCY)
+                .map(async ({ action, appConfig }) => {
+                const result = await (action === 'remove'
+                    ? this.removeRemoteFile(appConfig, this.logWatchChanges)
+                    : this.pushRemoteFile(appConfig, this.logWatchChanges));
+                this.onWatchChange?.(appConfig, result);
+            }));
         }
+        this.watchingChangeQueueRunning = false;
+        // refetch app to get updated configs
+        this.app = await this.getAppWithConfig(this.app.id);
     }
-    async buildFrontend(projectType) {
-        this.log(`Building ${projectType.name} frontend...\n`);
-        // TODO: check package.json for a "build" command and run that if it exists
-        await this.exec(projectType.buildCommand);
+    saveCurrentStorefront() {
+        const currentStorefront = localConfig.getDefaultStorefront(this.appPath);
+        if (this.storefront && this.storefront.id !== currentStorefront) {
+            localConfig.setDefaultStorefront(this.appPath, this.storefront.id);
+        }
+    }
+    setWatchingFiles() {
+        this.watchingFiles = globAllFilesByPath(this.appPath);
+    }
+    async updateFrontendDeployment(currentStore, projectType, deploymentUrl, deploymentHash) {
+        const spinner = ora();
+        spinner.start(`Updating frontend deployment...`);
+        await this.handleRequestErrors(async () => this.api.put({ adminPath: `/apps/${this.app.id}` }, {
+            body: {
+                $client_id: currentStore,
+                $environment_id: 'test',
+                frontend: {
+                    deployment_hash: deploymentHash,
+                    framework: projectType.slug,
+                    service: 'cloudflare',
+                    url: deploymentUrl,
+                },
+            },
+        }), () => spinner.fail('Error updating app deployment'));
+        spinner.succeed('Updated frontend deployment.\n');
+    }
+    async watchForChanges({ logChanges, onChange, syncAll, } = {}) {
+        this.logWatchChanges = logChanges ?? true;
+        this.onWatchChange = onChange;
+        this.setWatchingFiles();
+        if (syncAll) {
+            await this.pushAppConfigs();
+            fs.watch(this.appPath, { recursive: true }, async (_eventType, _filename) => {
+                await this.pushAppConfigs();
+                this.setWatchingFiles();
+            });
+            return;
+        }
+        fs.watch(this.appPath, { recursive: true }, this.watchListener);
     }
     async wranglerDeployFrontend(projectType) {
         let deploymentUrl;
@@ -706,11 +686,13 @@ export class PushAppCommand extends RemoteAppCommand {
         try {
             await this.exec(`npx wrangler pages deploy ${this.appPath}/frontend/${projectType.deployPath}`, (string) => {
                 // Dependent on wrangler output
-                if (string.includes('Take a peek over at')) {
-                    deploymentUrl = String(string.split('Take a peek over at ')[1]).trim();
+                // Parse the deployment URL from the wrangler output.
+                const match = string.match(/Take a peek over at (http\S+)/);
+                if (match && match.length > 0) {
+                    deploymentUrl = match[1];
                     return false;
                 }
-                else if (interactiveError ||
+                if (interactiveError ||
                     string.includes('non-interactive mode') ||
                     string.includes('non-interactive environment')) {
                     interactiveError = true;
@@ -718,14 +700,15 @@ export class PushAppCommand extends RemoteAppCommand {
                 }
             });
         }
-        catch (err) {
+        catch (error) {
             // noop
             if (interactiveError) {
                 this.log(style.funcWarn(`Your Cloudflare environment must be initialized by logging in with \`wrangler login\`, and exporting the \`CLOUDFLARE_ACCOUNT_ID\` environment variable. Refer to https://developers.cloudflare.com/workers/wrangler/configuration/ for details, and re-run this command to connect the deployment with your app.`));
+                // eslint-disable-next-line no-process-exit, unicorn/no-process-exit
                 process.exit(1);
             }
             else {
-                throw err;
+                throw error;
             }
         }
         if (!deploymentUrl) {
@@ -733,33 +716,39 @@ export class PushAppCommand extends RemoteAppCommand {
         }
         return deploymentUrl;
     }
-    async updateFrontendDeployment(currentStore, projectType, deploymentUrl, deploymentHash) {
-        const spinner = ora();
-        spinner.start(`Updating frontend deployment...`);
-        await this.handleRequestErrors(async () => this.api.put({ adminPath: `/apps/${this.app.id}` }, {
-            body: {
-                $client_id: currentStore,
-                $environment_id: 'test',
-                frontend: {
-                    url: deploymentUrl,
-                    service: 'cloudflare',
-                    framework: projectType.slug,
-                    deployment_hash: deploymentHash,
-                },
-            },
-        }), () => spinner.fail('Error updating app deployment'));
-        spinner.succeed('Updated frontend deployment.\n');
-    }
-    logAppFrontendUrl() {
-        const currentStore = localConfig.getDefaultStore();
-        // Shouldn't happen, but just in case
-        if (!this.app.installed?.id) {
-            return;
+    async confirmRemoveInstalledApp(app, currentStore) {
+        if (!app?.private_id) {
+            return true;
         }
-        this.log(`View your app at ${style.link(this.appFrontendUrl(currentStore, this.app.installed.id))}.`);
-    }
-    logStorefrontFrontendUrl(storefront, branchId) {
-        const currentStore = localConfig.getDefaultStore();
-        this.log(`View your storefront at ${style.link(this.storefrontFrontendUrl(currentStore, storefront, branchId))}.`);
+        const existingInstalledApp = await this.api.get({
+            adminPath: `/client/apps/${app.private_id}`,
+        }, { query: { versioned: true } });
+        if (existingInstalledApp) {
+            const continuePush = await confirm({
+                default: false,
+                message: `${style.storeId(currentStore)} has an installed version of ${app.name ? style.appConfigValue(app.name) : 'this app'} v${existingInstalledApp.version}. Do you want to replace it with a development instance?`,
+            });
+            if (!continuePush) {
+                return false;
+            }
+            // uninstall the existing app
+            const spinner = ora();
+            spinner.start('Removing installed app...');
+            try {
+                await this.api.put({
+                    adminPath: `/client/apps/${app.id}`,
+                }, {
+                    body: { uninstalled: true },
+                });
+                spinner.succeed('Installed app removed.');
+                this.log();
+            }
+            catch (error) {
+                spinner.fail(`Error removing installed app from ${style.storeId(currentStore)}.`);
+                this.logError(error.message);
+                return false;
+            }
+        }
+        return existingInstalledApp;
     }
 }