@swell/cli 2.0.19 → 2.1.0

package/dist/push-app-command.js

@@ -3,6 +3,7 @@ import { $ } from 'execa';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import Stream from 'node:stream';
+import getPort, { portNumbers } from 'get-port';
 import ora from 'ora';
 import { default as swellConfig } from './lib/app-config.js';
 import { ConfigType, FrontendProjectTypes, allConfigFilesInDir, appConfigFromFile, filePathExists, filePathExistsAsync, findAppConfig, getAppSlugId, getConfigTypeFromPath, getConfigTypeKeyFromValue, getFrontendProjectType, globAllFilesByPath, hashString, isPathDirectory, } from './lib/apps/index.js';
@@ -12,8 +13,10 @@ 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';
+import { getProxyUrl } from './lib/proxy.js';
 const PUSH_CONCURRENCY = 3;
 const WATCH_WINDOW_MS = 100;
+const DEV_SERVER_FALLBACK_PORT = 3000;
 export class PushAppCommand extends RemoteAppCommand {
     frontendPath = '';
     logWatchChanges = true;
@@ -45,6 +48,7 @@ export class PushAppCommand extends RemoteAppCommand {
         if (!configType) {
             return;
         }
+        await this.setWatchingFiles();
         const isWatching = this.watchingFiles.has(configFile);
         let watchFileEvent;
         // per node docs:
@@ -75,6 +79,7 @@ export class PushAppCommand extends RemoteAppCommand {
             await this.handleWatchFileChange(configFile, configType, watchFileEvent);
         }
         catch (error) {
+            console.error(error);
             // we don't want to break the watcher if an error is thrown while
             // handling a file change
             // for tests though, we want to break the watcher
@@ -87,10 +92,29 @@ export class PushAppCommand extends RemoteAppCommand {
             }
         }
     };
+    showFrontendMigrationError() {
+        return this.error(style.funcWarn(`⚠️  Your frontend directory exists but appears to use an older structure.\n` +
+            `Swell CLI v2.1.0+ requires a Workers-based frontend with package.json.\n\n` +
+            `${style.basicHighlight('Migration options:')}\n\n` +
+            `1. ${style.basicHighlight('Migrate to Workers')} (recommended)\n` +
+            `   If you are using a Swell official application (e.g. Proxima), update to the latest version.\n` +
+            `   Otherwise, initialize your frontend as a Workers project.\n` +
+            `   Follow Cloudflare's official guide: ${style.link('https://developers.cloudflare.com/workers/static-assets/migration-guides/migrate-from-pages/')}\n\n` +
+            `2. ${style.basicHighlight('Use older CLI version')}\n` +
+            `   Continue with Pages deployment:\n` +
+            `   ${style.dim('$ npm install -g @swell/cli@2.0.20')}\n`));
+    }
     async buildFrontend(projectType) {
+        if (!projectType) {
+            this.showFrontendMigrationError();
+            return; // unreachable but helps TypeScript narrow the type
+        }
+        if (!projectType.buildCommand) {
+            // No build command needed for this framework
+            return;
+        }
         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);
+        await this.execFrontend(projectType.buildCommand);
     }
     async chooseAppToPull(query) {
         const typeLabelPlural = this.appType === 'theme' ? 'themes' : 'apps';
@@ -241,7 +265,7 @@ export class PushAppCommand extends RemoteAppCommand {
         null);
         const isTheme = app?.type === 'theme';
         if (app && !isTheme && this.appType === 'theme') {
-            this.error(`App ${style.appConfigValue(app?.name)} is not a theme.`);
+            this.error(`App ${style.appConfigValue(app?.name)} is not a theme. Use 'swell app' commands instead.`);
         }
         // Confirm development app unless theme without app syncing
         if (!isTheme || this.themeSyncApp) {
@@ -283,9 +307,12 @@ export class PushAppCommand extends RemoteAppCommand {
             return true;
         }
     }
-    async exec(command, onOutput) {
+    async execFrontend(command, onOutput) {
+        return this.exec(command, this.frontendPath, onOutput);
+    }
+    async exec(command, cwd, onOutput) {
         const $$ = $({
-            cwd: this.frontendPath,
+            cwd: cwd || this.appPath,
             shell: true,
             stderr: onOutput ? 'pipe' : 'inherit',
             stdin: 'inherit',
@@ -392,15 +419,23 @@ export class PushAppCommand extends RemoteAppCommand {
     }
     getFrontendProjectType(required = true) {
         this.frontendPath = path.join(this.appPath, 'frontend');
-        if (!required) {
-            const frontendExists = filePathExists(this.frontendPath);
-            if (!frontendExists) {
-                return null;
-            }
+        const frontendExists = filePathExists(this.frontendPath);
+        if (!required && !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(', ')}.`);
+            // If frontend not required, just return null (don't error)
+            if (!required) {
+                return null;
+            }
+            // Frontend IS required but not found
+            // Check if frontend directory exists but lacks package.json (old structure)
+            if (frontendExists) {
+                this.showFrontendMigrationError();
+            }
+            // Frontend directory doesn't exist at all
+            this.error(`No valid frontend app found in ${this.frontendPath}. Supported frameworks include: ${FrontendProjectTypes.map((type) => type.slug).join(', ')}.`);
         }
         return projectType;
     }
@@ -670,12 +705,19 @@ export class PushAppCommand extends RemoteAppCommand {
         this.watchingChangeQueue.clear();
         while (queue.length > 0) {
             // eslint-disable-next-line no-await-in-loop
-            await Promise.all(queue.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);
-            }));
+            try {
+                await Promise.all(queue
+                    .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, action, result);
+                }));
+            }
+            catch (_err) {
+                //noop
+            }
         }
         // refetch app to get updated configs
         this.app = await this.getAppWithConfig(this.app.id);
@@ -723,19 +765,48 @@ export class PushAppCommand extends RemoteAppCommand {
         }
         fs.watch(this.appPath, { recursive: true }, this.watchListener);
     }
+    async startProxyServer(port) {
+        // Find an open port starting at 3000
+        const freePort = port ||
+            (await getPort({ port: portNumbers(3000, 3100) })) ||
+            DEV_SERVER_FALLBACK_PORT;
+        // Start proxy
+        const proxyUrl = await getProxyUrl(freePort);
+        await this.updateLocalProxy(proxyUrl, this.storefront?.id);
+        return freePort;
+    }
+    async updateLocalProxy(proxyUrl, storefrontId) {
+        const storefront = this.app.type === 'storefront' &&
+            (await this.getAppStorefront({ storefront_id: storefrontId }));
+        await this.handleRequestErrors(async () => this.api.put({ adminPath: `/client/apps/${this.app.id}/local-proxy` }, {
+            body: {
+                proxy_url: proxyUrl,
+                storefront_id: storefront?.id || null,
+                storefront_slug: storefront?.slug || null,
+            },
+        }));
+    }
     async wranglerDeployFrontend(projectType) {
         let deploymentUrl;
         let interactiveError = false;
+        let pagesProjectError = false;
         this.log(`\nDeploying to Cloudflare...\n`);
         try {
-            await this.exec(`npx wrangler pages deploy ${this.appPath}/frontend/${projectType.deployPath}`, (string) => {
+            await this.execFrontend(`npx wrangler deploy`, (string) => {
                 // Dependent on wrangler output
                 // Parse the deployment URL from the wrangler output.
-                const match = string.match(/Take a peek over at (http\S+)/);
+                const match = string.match(/^\s*(https:\/\/\S+\.workers\.dev)\s*[\s\S]*?Current Version ID: [\w-]+/m);
                 if (match && match.length > 0) {
                     deploymentUrl = match[1];
                     return false;
                 }
+                // Check for Pages project error
+                if (string.includes("It looks like you've run a Workers-specific command in a Pages project") ||
+                    string.includes('please run `wrangler pages deploy` instead') ||
+                    string.includes('Missing entry-point')) {
+                    pagesProjectError = true;
+                    return false;
+                }
                 if (interactiveError ||
                     string.includes('non-interactive mode') ||
                     string.includes('non-interactive environment')) {
@@ -746,10 +817,16 @@ export class PushAppCommand extends RemoteAppCommand {
         }
         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);
+            if (pagesProjectError) {
+                this.error(style.funcWarn(`⚠️  Version incompatibility!\n` +
+                    `Your project is configured for Cloudflare Pages, but Swell CLI v2.1.0+ uses Cloudflare Workers.\n\n` +
+                    `To fix this, you can either:\n` +
+                    `1. Update your app project (for Swell official apps) or reconfigure it for workers\n` +
+                    `   (https://developers.cloudflare.com/workers/static-assets/migration-guides/migrate-from-pages/)\n` +
+                    `2. Use an older Swell CLI version: npm install -g @swell/cli@2.0.20\n`));
+            }
+            else if (interactiveError) {
+                this.error(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.`));
             }
             else {
                 throw error;

package/dist/remote-app-command.js

@@ -194,9 +194,29 @@ export class RemoteAppCommand extends AppCommand {
         const appLabel = this.app.type === 'theme' ? 'theme' : 'app';
         let app = updateApp || {};
         if (!app.id) {
+            // May already have a dev instance
+            let existingDevApp;
+            try {
+                existingDevApp = await this.api.get({
+                    adminPath: `/apps/${this.swellConfig.store.id}`,
+                });
+                // Check if existing dev app is owned by the current store
+                const currentStore = localConfig.getDefaultStore();
+                if (existingDevApp?.client_id !== currentStore) {
+                    existingDevApp = null;
+                }
+            }
+            catch {
+                // noop
+            }
             spinner.start(`Creating ${appLabel}...`);
-            app = await this.handleRequestErrors(async () => this.api.post({ adminPath: '/apps' }, { body }), () => spinner.fail('Error creating app.'));
-            this.appCreated = true;
+            if (existingDevApp) {
+                app = await this.handleRequestErrors(async () => this.api.put({ adminPath: `/apps/${existingDevApp.id}` }, { body }), () => spinner.fail('Error updating app.'));
+            }
+            else {
+                app = await this.handleRequestErrors(async () => this.api.post({ adminPath: '/apps' }, { body }), () => spinner.fail('Error creating app.'));
+                this.appCreated = true;
+            }
         }
         else if (app.id) {
             spinner.start(`Updating ${appLabel}...`);
@@ -296,7 +316,7 @@ export class RemoteAppCommand extends AppCommand {
         return this.api.post({ adminPath: `/client/apps` }, {
             body: { app_id: this.app.id, version },
             onAsyncGetPath: (response) => ({
-                adminPath: `/client/app-async-status/${response.id}`,
+                adminPath: `/client/app-async-status/${response.app_id}`,
             }),
             spinner,
         });
@@ -584,7 +604,7 @@ export class RemoteAppCommand extends AppCommand {
         await this.api.put({ adminPath: `/client/apps/${this.app.id}` }, {
             body: { version },
             onAsyncGetPath: (response) => ({
-                adminPath: `/client/app-async-status/${response.id}`,
+                adminPath: `/client/app-async-status/${response.app_id}`,
             }),
             spinner,
         });

package/oclif.manifest.json

@@ -349,7 +349,8 @@
       "examples": [
         "swell app dev",
         "swell app dev --storefront-id <id>",
-        "swell app dev --port 3000"
+        "swell app dev --port 3000",
+        "swell app dev --port 3000 --frontend-port 4000"
       ],
       "flags": {
         "app-path": {
@@ -373,6 +374,13 @@
           "multiple": false,
           "type": "option"
         },
+        "frontend-port": {
+          "description": "specify the port for the frontend dev server when running with frontend",
+          "name": "frontend-port",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
         "storefront-id": {
           "description": "for storefront apps, identify a storefront to preview and push theme files to",
           "name": "storefront-id",
@@ -480,8 +488,11 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "options": [
-            "nextjs",
-            "astro"
+            "astro",
+            "angular",
+            "hono",
+            "nuxt",
+            "nextjs"
           ],
           "type": "option"
         },
@@ -921,8 +932,11 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "options": [
-            "nextjs",
-            "astro"
+            "astro",
+            "angular",
+            "hono",
+            "nuxt",
+            "nextjs"
           ],
           "type": "option"
         },
@@ -1100,8 +1114,11 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "options": [
-            "nextjs",
-            "astro"
+            "astro",
+            "angular",
+            "hono",
+            "nuxt",
+            "nextjs"
           ],
           "type": "option"
         },
@@ -1581,8 +1598,11 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "options": [
-            "nextjs",
-            "astro"
+            "astro",
+            "angular",
+            "hono",
+            "nuxt",
+            "nextjs"
           ],
           "type": "option"
         },
@@ -1830,7 +1850,7 @@
       "examples": [
         "swell app frontend dev",
         "swell app frontend dev --no-push",
-        "swell app frontend dev --port 3000",
+        "swell app frontend dev --proxy-port 3000",
         "swell app frontend dev --storefront-select",
         "swell app frontend dev --storefront-id <id>"
       ],
@@ -1856,6 +1876,13 @@
           "multiple": false,
           "type": "option"
         },
+        "frontend-port": {
+          "description": "specify the port for the frontend dev server when running with frontend",
+          "name": "frontend-port",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
         "storefront-id": {
           "description": "identify a storefront to preview with and push theme files to",
           "name": "storefront-id",
@@ -1868,6 +1895,20 @@
           "name": "storefront-select",
           "allowNo": false,
           "type": "boolean"
+        },
+        "proxy-port": {
+          "description": "specify the port for an existing frontend proxy",
+          "name": "proxy-port",
+          "default": 3001,
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
+        "app-dev": {
+          "description": "indicates frontend app is running in app dev mode",
+          "name": "app-dev",
+          "allowNo": false,
+          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,
@@ -1891,5 +1932,5 @@
       ]
     }
   },
-  "version": "2.0.19"
+  "version": "2.1.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swell/cli",
-  "version": "2.0.19",
+  "version": "2.1.0",
   "type": "module",
   "description": "Swell's command line interface/utility",
   "keywords": [
@@ -44,6 +44,7 @@
     "http-proxy": "1.18.1",
     "inflection": "3.0.0",
     "istextorbinary": "9.5.0",
+    "localtunnel": "2.0.2",
     "lodash": "4.17.21",
     "mime-detect": "1.2.0",
     "ngrok": "5.0.0-beta.2",
@@ -63,6 +64,7 @@
     "@types/configstore": "6.0.1",
     "@types/http-proxy": "1.17.16",
     "@types/inquirer": "9.0.6",
+    "@types/localtunnel": "2.0.4",
     "@types/mocha": "10.0.3",
     "@types/node": "20.8.8",
     "@types/qs": "6.9.15",