@swell/cli 2.3.4 → 2.4.0

package/dist/commands/app/dev.js

@@ -8,6 +8,7 @@ import * as path from 'node:path';
 import ora from 'ora';
 import { ConfigType, allConfigFilesInDir, appConfigFromFile, } from '../../lib/apps/index.js';
 import { bundleFunction } from '../../lib/bundle.js';
+import { detectPackageManager, getExecSpawnArgs, } from '../../lib/package-manager.js';
 import style from '../../lib/style.js';
 import { PushAppCommand } from '../../push-app-command.js';
 export default class AppDev extends PushAppCommand {
@@ -345,8 +346,11 @@ ENVIRONMENT = "development"
                 const configPath = path.join(this.tmpDir, `${functionName}.toml`);
                 await fs.promises.writeFile(configPath, wranglerConfig);
                 functionStatus.set(functionName, 'starting');
-                // Start wrangler process in background
-                const wranglerProcess = spawn('npx', [
+                // Start wrangler process in background using detected package manager
+                const pm = detectPackageManager(this.appPath);
+                const { program, prefixArgs } = getExecSpawnArgs(pm);
+                const wranglerProcess = spawn(program, [
+                    ...prefixArgs,
                     'wrangler',
                     'dev',
                     `--config=${configPath}`,

package/dist/commands/app/frontend/dev.js

@@ -1,4 +1,5 @@
 import { Flags } from '@oclif/core';
+import { getProjectCommands, } from '../../../lib/apps/index.js';
 import { default as localConfig } from '../../../lib/config.js';
 import style from '../../../lib/style.js';
 import { PushAppCommand } from '../../../push-app-command.js';
@@ -69,9 +70,11 @@ export default class AppFrontendDev extends PushAppCommand {
         if (!projectType) {
             return;
         }
+        // Get commands transformed for the detected package manager
+        const { devCommand } = getProjectCommands(this.appPath, projectType);
         const currentStore = localConfig.getDefaultStore();
         let serverReadyDetected = false;
-        await this.execFrontend(projectType.devCommand.replace('${PORT}', String(serverPort)), (string) => {
+        await this.execFrontend(devCommand.replace('${PORT}', String(serverPort)), (string) => {
             // Framework-specific output handling and ready detection
             switch (projectType.slug) {
                 case 'nextjs': {
@@ -127,8 +130,8 @@ export default class AppFrontendDev extends PushAppCommand {
                     }
                     // 3. READY DETECTION: Detect server ready, show our message
                     if (!serverReadyDetected &&
-                        (/application bundle generation complete/.test(string) ||
-                            /watch mode enabled/.test(string))) {
+                        (/application bundle generation complete/i.test(string) ||
+                            /watch mode enabled/i.test(string))) {
                         serverReadyDetected = true;
                         this.log(`Started ${projectType.name} dev server on port ${serverPort}.\n`);
                         const sessionId = localConfig.getSessionId(currentStore);

package/dist/commands/create/app.js

@@ -70,8 +70,8 @@ export default class CreateApp extends CreateAppCommand {
         pkg: Flags.string({
             char: 'p',
             default: 'npm',
-            description: 'Package manager: npm | yarn | none',
-            options: ['npm', 'yarn', 'none'],
+            description: 'Package manager: npm | yarn | pnpm | bun | none',
+            options: ['npm', 'yarn', 'pnpm', 'bun', 'none'],
         }),
         type: Flags.string({
             char: 't',

package/dist/commands/create/frontend.js

@@ -18,8 +18,8 @@ export default class CreateFrontend extends CreateAppCommand {
         pkg: Flags.string({
             char: 'p',
             default: 'npm',
-            description: `use npm or yarn to install default dependencies, or none to disable`,
-            options: ['npm', 'yarn', 'none'],
+            description: `Package manager: npm | yarn | pnpm | bun | none`,
+            options: ['npm', 'yarn', 'pnpm', 'bun', 'none'],
         }),
     };
     async run() {

package/dist/commands/create/tests.js

@@ -2,6 +2,7 @@ import { Flags } from '@oclif/core';
 import { AppCommand } from '../../app-command.js';
 import { toAppId } from '../../lib/create/index.js';
 import { createTestsScaffold, } from '../../lib/create/tests.js';
+import { detectPackageManager, getPackageManagerCommands, } from '../../lib/package-manager.js';
 export default class CreateTests extends AppCommand {
     static description = 'Initialize a vitest + Cloudflare Workers test setup that reuses swell-cli authentication.';
     static examples = [
@@ -66,10 +67,12 @@ export default class CreateTests extends AppCommand {
             this.warn(warning);
         }
         if (hasChanges) {
+            const pm = detectPackageManager(this.appPath);
+            const commands = getPackageManagerCommands(pm);
             this.log('');
             this.log('Next steps:');
-            this.log('  1. npm install');
-            this.log('  2. npm test');
+            this.log(`  1. ${commands.install}`);
+            this.log(`  2. ${commands.run('test')}`);
         }
         this.log('');
     }

package/dist/commands/theme/dev.js

@@ -4,6 +4,7 @@ import { execSync, spawn } from 'node:child_process';
 import fs from 'node:fs';
 import ora from 'ora';
 import { default as localConfig } from '../../lib/config.js';
+import { findLockFile, getPackageManager } from '../../lib/package-manager.js';
 import style from '../../lib/style.js';
 import { ThemeSync } from '../../lib/theme-sync.js';
 import { PushAppCommand } from '../../push-app-command.js';
@@ -74,11 +75,10 @@ export default class AppThemeDev extends PushAppCommand {
     async findAndInstallDependencies() {
         const spinner = ora('Locating package.json...').start();
         try {
-            const packageJsonLockPath = await findUp('package-lock.json', {
-                type: 'file',
-            });
-            if (packageJsonLockPath) {
-                spinner.succeed('package-lock.json found. Skipping npm install.');
+            // Check for any package manager lock file
+            const lockFile = findLockFile(process.cwd());
+            if (lockFile) {
+                spinner.succeed(`${lockFile.name} found. Skipping dependency install.`);
                 return null;
             }
             const packageJsonPath = await findUp('package.json', { type: 'file' });
@@ -88,7 +88,8 @@ export default class AppThemeDev extends PushAppCommand {
             }
             spinner.succeed(`Found package.json at ${packageJsonPath}`);
             spinner.start('Installing dependencies...');
-            execSync('npm install', { stdio: 'inherit' });
+            const { commands } = getPackageManager(process.cwd());
+            execSync(commands.install, { stdio: 'inherit' });
             spinner.succeed('Dependencies installed');
             return packageJsonPath;
         }
@@ -109,7 +110,9 @@ export default class AppThemeDev extends PushAppCommand {
                 console.warn('"bundle" script not found in package.json');
                 return;
             }
-            const childProcess = spawn('npm', ['run', 'bundle'], {
+            const { commands } = getPackageManager(process.cwd());
+            const runCommand = commands.run('bundle').split(' ');
+            const childProcess = spawn(runCommand[0], runCommand.slice(1), {
                 env: { ...process.env, BROWSERSLIST_IGNORE_OLD_DATA: 'true' },
                 shell: true,
                 stdio: 'pipe',

package/dist/create-app-command.d.ts

@@ -1,3 +1,4 @@
+import { PackageManager } from './lib/package-manager.js';
 import { SwellCommand } from './swell-command.js';
 export declare abstract class CreateAppCommand extends SwellCommand {
     protected commandExample: string;
@@ -13,6 +14,11 @@ export declare abstract class CreateAppCommand extends SwellCommand {
     addAllowedHostsToAngular(configPath: string): Promise<void>;
     addAllowedHostsToAstro(configPath: string): Promise<void>;
     addAllowedHostsToNuxt(configPath: string): Promise<void>;
+    /**
+     * Add vite allowedHosts configuration to a framework config file.
+     * Supports config files that use a defineX({}) pattern (Astro, Nuxt, etc.)
+     */
+    private addViteAllowedHosts;
     createAppConfigFolders(swellConfig: any): Promise<void>;
     createFrontendApp(swellConfig: any, flags: any, directCreate?: boolean, kind?: string): Promise<boolean>;
     createStorefrontApp(swellConfig: any, flags: any, directCreate?: boolean): Promise<boolean>;
@@ -29,7 +35,7 @@ export declare abstract class CreateAppCommand extends SwellCommand {
         name: string;
         slug: string;
     };
-    setupPackage(name: string, config: any, pkg: string): Promise<void>;
-    tryPackageSetup(name: string, config: any, pkg: string): Promise<void>;
+    setupPackage(name: string, config: any, pkg: PackageManager): Promise<void>;
+    tryPackageSetup(name: string, config: any, pkg: PackageManager): Promise<void>;
     private addFrontendAllowedHosts;
 }

package/dist/create-app-command.js

@@ -9,9 +9,39 @@ import { promisify } from 'node:util';
 import ora from 'ora';
 import Api from './lib/api.js';
 import { FrontendProjectTypes, getFrontendProjectValidValues, getAllConfigPaths, getFrontendProjectSlugs, writeFile, writeJsonFile, } from './lib/apps/index.js';
+import { getPackageManagerCommands, transformCreateCommand, } from './lib/package-manager.js';
 import style from './lib/style.js';
 import { SwellCommand } from './swell-command.js';
 const execAsync = promisify(exec);
+/** Allowed hosts for tunnel providers used in local development */
+const TUNNEL_ALLOWED_HOSTS = ['.ngrok.app', '.loca.lt', '.trycloudflare.com'];
+/**
+ * Find the closing brace position for a config function call (e.g., defineConfig, defineNuxtConfig).
+ * Uses brace counting to find the matching `}` for the opening `{`.
+ * @returns Position of the closing `}`, or -1 if not found
+ */
+function findConfigClosingBrace(content, functionName) {
+    const pattern = new RegExp(`${functionName}\\s*\\(\\s*\\{`);
+    const match = content.match(pattern);
+    if (!match || match.index === undefined) {
+        return -1;
+    }
+    const startPos = match.index + match[0].length;
+    let depth = 1;
+    for (let i = startPos; i < content.length && depth > 0; i++) {
+        const char = content[i];
+        if (char === '{') {
+            depth++;
+        }
+        else if (char === '}') {
+            depth--;
+            if (depth === 0) {
+                return i;
+            }
+        }
+    }
+    return -1;
+}
 export class CreateAppCommand extends SwellCommand {
     // Command name used in error message examples; override in subclasses
     commandExample = 'swell create app';
@@ -76,51 +106,24 @@ export class CreateAppCommand extends SwellCommand {
         if (project.architect.serve.options.allowedHosts) {
             return;
         }
-        project.architect.serve.options.allowedHosts = ['.ngrok.app', '.loca.lt'];
+        project.architect.serve.options.allowedHosts = TUNNEL_ALLOWED_HOSTS;
         await fs.writeFile(angularJsonPath, JSON.stringify(config, null, 2), 'utf8');
     }
     async addAllowedHostsToAstro(configPath) {
-        const astroConfigPath = path.join(configPath, 'frontend', 'astro.config.mjs');
-        let content;
-        try {
-            content = await fs.readFile(astroConfigPath, 'utf8');
-        }
-        catch {
-            return;
-        }
-        if (content.includes('allowedHosts')) {
-            return;
-        }
-        const lines = content.split('\n');
-        let insertIndex = -1;
-        for (const [i, line] of lines.entries()) {
-            if (line.includes('defineConfig({')) {
-                insertIndex = i + 1;
-                break;
-            }
-        }
-        if (insertIndex === -1) {
-            return;
-        }
-        // Detect indentation from next line or use default
-        const nextLine = lines[insertIndex];
-        const indentMatch = nextLine?.match(/^(\s+)/);
-        const baseIndent = indentMatch ? indentMatch[1] : '  ';
-        const viteConfig = [
-            `${baseIndent}vite: {`,
-            `${baseIndent}  server: {`,
-            `${baseIndent}    allowedHosts: ['.ngrok.app', '.loca.lt'],`,
-            `${baseIndent}  },`,
-            `${baseIndent}},`,
-        ];
-        lines.splice(insertIndex, 0, ...viteConfig);
-        await fs.writeFile(astroConfigPath, lines.join('\n'), 'utf8');
+        return this.addViteAllowedHosts(configPath, 'astro.config.mjs', 'defineConfig');
     }
     async addAllowedHostsToNuxt(configPath) {
-        const nuxtConfigPath = path.join(configPath, 'frontend', 'nuxt.config.ts');
+        return this.addViteAllowedHosts(configPath, 'nuxt.config.ts', 'defineNuxtConfig');
+    }
+    /**
+     * Add vite allowedHosts configuration to a framework config file.
+     * Supports config files that use a defineX({}) pattern (Astro, Nuxt, etc.)
+     */
+    async addViteAllowedHosts(configPath, configFile, functionName) {
+        const configFilePath = path.join(configPath, 'frontend', configFile);
         let content;
         try {
-            content = await fs.readFile(nuxtConfigPath, 'utf8');
+            content = await fs.readFile(configFilePath, 'utf8');
         }
         catch {
             return;
@@ -128,29 +131,30 @@ export class CreateAppCommand extends SwellCommand {
         if (content.includes('allowedHosts')) {
             return;
         }
-        const lines = content.split('\n');
-        let insertIndex = -1;
-        for (const [i, line] of lines.entries()) {
-            if (line.includes('defineNuxtConfig({')) {
-                insertIndex = i + 1;
-                break;
-            }
+        const viteConfig = `  vite: {
+    server: {
+      allowedHosts: ${JSON.stringify(TUNNEL_ALLOWED_HOSTS)},
+    },
+  },`;
+        // Handle empty config: functionName({})
+        const emptyConfig = `${functionName}({})`;
+        if (content.includes(emptyConfig)) {
+            content = content.replace(emptyConfig, `${functionName}({\n${viteConfig}\n})`);
+            await fs.writeFile(configFilePath, content, 'utf8');
+            return;
         }
-        if (insertIndex === -1) {
+        // Find the closing brace of the config function using brace counting
+        const closingPos = findConfigClosingBrace(content, functionName);
+        if (closingPos === -1) {
             return;
         }
-        const nextLine = lines[insertIndex];
-        const indentMatch = nextLine?.match(/^(\s+)/);
-        const baseIndent = indentMatch ? indentMatch[1] : '  ';
-        const viteConfig = [
-            `${baseIndent}vite: {`,
-            `${baseIndent}  server: {`,
-            `${baseIndent}    allowedHosts: ['.ngrok.app', '.loca.lt'],`,
-            `${baseIndent}  },`,
-            `${baseIndent}},`,
-        ];
-        lines.splice(insertIndex, 0, ...viteConfig);
-        await fs.writeFile(nuxtConfigPath, lines.join('\n'), 'utf8');
+        const before = content.slice(0, closingPos);
+        const after = content.slice(closingPos);
+        // Ensure proper comma before vite config
+        const needsComma = before.trimEnd().slice(-1) !== ',';
+        const separator = needsComma ? ',\n' : '\n';
+        content = before.trimEnd() + separator + viteConfig + '\n' + after;
+        await fs.writeFile(configFilePath, content, 'utf8');
     }
     async createAppConfigFolders(swellConfig) {
         for (const type of getAllConfigPaths(swellConfig.get('type'))) {
@@ -188,19 +192,63 @@ export class CreateAppCommand extends SwellCommand {
             }));
         if (frameworkType && frameworkType !== 'none') {
             const projectType = this.getProjectType(frameworkType);
+            // Determine package manager - 'none' is not valid for frontend scaffolding
+            let pkg = (flags.pkg || 'npm');
+            if (flags.pkg === 'none') {
+                this.log(`\n${style.dim('Note: --pkg none is not available for frontend scaffolding, using npm.')}`);
+                pkg = 'npm';
+                // Ensure root package.json exists (skipped when --pkg none)
+                const rootPkgPath = path.join(configPath, 'package.json');
+                try {
+                    await fs.access(rootPkgPath);
+                }
+                catch {
+                    // Root package.json doesn't exist, create it
+                    await this.setupPackage(swellConfig.get('id'), swellConfig, pkg);
+                }
+            }
             this.log();
+            // Check for placeholder frontend/package.json and remove it before C3 scaffolding
+            const frontendPath = path.join(configPath, 'frontend');
+            const frontendPkgPath = path.join(frontendPath, 'package.json');
+            try {
+                const content = await fs.readFile(frontendPkgPath, 'utf8');
+                const frontendPkg = JSON.parse(content);
+                // Only remove if it matches our placeholder signature
+                if (frontendPkg.version === '0.0.0' &&
+                    frontendPkg.name === 'frontend' &&
+                    frontendPkg.private === true) {
+                    await fs.unlink(frontendPkgPath);
+                }
+            }
+            catch {
+                // No package.json or can't read, that's fine
+            }
+            // Check if frontend folder exists and has files (user-created content)
+            try {
+                const files = await fs.readdir(frontendPath);
+                if (files.length > 0) {
+                    spinner.fail('frontend/ folder is not empty. Please remove existing files before scaffolding.');
+                    return false;
+                }
+            }
+            catch {
+                // Folder doesn't exist, that's fine - C3 will create it
+            }
             spinner.start(`Creating ${projectType?.name} frontend app (this may take a while)...`);
             try {
                 await execAsync(`mkdir -p frontend`, {
                     cwd: configPath,
                 });
-                await execAsync(projectType.installCommand, {
+                // Transform install command for the selected package manager
+                const installCommand = transformCreateCommand(projectType.installCommand, pkg);
+                await execAsync(installCommand, {
                     cwd: configPath,
                 });
                 // Use this command to debug output, i.e.e when command becomes non-responsive
                 /* await this.execWithStdio(
                   configPath,
-                  projectType.installCommand,
+                  installCommand,
                 ); */
             }
             catch (error) {
@@ -210,25 +258,23 @@ export class CreateAppCommand extends SwellCommand {
                 return false;
             }
             // Ensure frontend package.json has correct name for workspace
-            const frontendPkgPath = path.join(configPath, 'frontend', 'package.json');
             try {
                 const pkgContent = await fs.readFile(frontendPkgPath, 'utf8');
-                const pkg = JSON.parse(pkgContent);
-                if (pkg.name !== 'frontend') {
-                    pkg.name = 'frontend';
-                    await fs.writeFile(frontendPkgPath, JSON.stringify(pkg, null, 2), 'utf8');
+                const frontendPkgJson = JSON.parse(pkgContent);
+                if (frontendPkgJson.name !== 'frontend') {
+                    frontendPkgJson.name = 'frontend';
+                    await fs.writeFile(frontendPkgPath, JSON.stringify(frontendPkgJson, null, 2), 'utf8');
                 }
             }
             catch {
                 // Ignore if package.json doesn't exist or can't be read
             }
             await this.addFrontendAllowedHosts(projectType, configPath);
-            // Re-run npm install at root to properly initialize workspace structure
-            // (removes frontend/package-lock.json, hoists dependencies, creates root lock file)
+            // Run install at root to hoist dependencies to workspace
             spinner.start('Initializing workspace...');
             try {
-                const execAsync = promisify(exec);
-                await execAsync('npm install', { cwd: configPath });
+                const { install } = getPackageManagerCommands(pkg);
+                await execAsync(install, { cwd: configPath });
                 spinner.succeed('Workspace initialized');
             }
             catch {
@@ -375,19 +421,22 @@ export class CreateAppCommand extends SwellCommand {
         const configPath = path.dirname(config.path);
         const packageJson = {
             description: config.get('description'),
-            // Include workspace even if frontend doesn't exist yet
-            // npm tolerates missing workspace directories without errors
-            workspaces: ['frontend'],
             devDependencies: {
                 '@swell/app-types': '^1.0.5',
                 typescript: '^5.9.3',
             },
             name,
+            // Required for yarn workspaces, good practice for all package managers
+            private: true,
             scripts: {
                 typecheck: '([ -z "$(find functions -name \'*.ts\' 2>/dev/null | head -1)" ] || tsc --noEmit) && ([ ! -f test/tsconfig.json ] || tsc --noEmit -p test) && ([ ! -f frontend/tsconfig.json ] || tsc --noEmit -p frontend)',
             },
             version: config.get('version'),
         };
+        // pnpm uses pnpm-workspace.yaml instead of workspaces field in package.json
+        if (pkg !== 'pnpm') {
+            packageJson.workspaces = ['frontend'];
+        }
         const tsConfig = {
             compilerOptions: {
                 lib: ['esnext', 'webworker'],
@@ -401,15 +450,24 @@ export class CreateAppCommand extends SwellCommand {
         await writeJsonFile(path.join(configPath, 'package.json'), packageJson);
         await writeJsonFile(path.join(configPath, 'tsconfig.json'), tsConfig);
         await writeFile(path.join(configPath, '.gitignore'), `node_modules`);
-        try {
-            const packageManager = await this.findPackageManager(pkg);
-            await execAsync(`${packageManager} install`, {
-                cwd: configPath,
+        // Create pnpm-workspace.yaml for pnpm (required for workspace support)
+        if (pkg === 'pnpm') {
+            await writeFile(path.join(configPath, 'pnpm-workspace.yaml'), 'packages:\n  - frontend\n');
+        }
+        // Create placeholder frontend/package.json for bun and yarn
+        // These package managers require workspace directories to exist with a package.json
+        if (pkg === 'bun' || pkg === 'yarn') {
+            const frontendPath = path.join(configPath, 'frontend');
+            await fs.mkdir(frontendPath, { recursive: true });
+            await writeJsonFile(path.join(frontendPath, 'package.json'), {
+                name: 'frontend',
+                private: true,
+                version: '0.0.0',
             });
         }
-        catch (error) {
-            this.error(error.message);
-        }
+        // Install root dependencies using selected package manager
+        const { install } = getPackageManagerCommands(pkg);
+        await execAsync(install, { cwd: configPath });
     }
     async tryPackageSetup(name, config, pkg) {
         try {

package/dist/lib/apps/index.d.ts

@@ -131,6 +131,15 @@ export declare function getFrontendProjectSlugs(withNone?: boolean, withLegacy?:
 export declare function getFrontendProjectValidValues(withNone?: boolean, withLegacy?: boolean): string;
 export declare function getAppSlugId(app: App): string | undefined;
 export declare function getFrontendProjectType(appPath: string): FrontendProjectType | undefined;
+/**
+ * Get project commands transformed for the detected package manager.
+ * Detects the package manager from lock files in appPath and transforms
+ * npm-style commands to the equivalent for that package manager.
+ */
+export declare function getProjectCommands(appPath: string, projectType: FrontendProjectType): {
+    buildCommand?: string;
+    devCommand: string;
+};
 export declare function getConfigTypeFromPath(path: string): ConfigType | undefined;
 export declare function getConfigTypeKeyFromValue(value: string): string | undefined;
 export declare function filePathExists(filePath: string): boolean;

package/dist/lib/apps/index.js

@@ -3,6 +3,7 @@ import { pluralize, titleize } from 'inflection';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { toAppId } from '../create/index.js';
+import { detectPackageManager, transformCommand } from '../package-manager.js';
 import { AppConfig } from './app-config.js';
 export { AppConfig, FunctionProcessingError, IgnoringFileError, } from './app-config.js';
 export { allBaseFilesInDir, allConfigDirsPaths, allConfigFilesInDir, allConfigFilesPaths, allConfigFilesPathsByType, getAllConfigPaths, globAllFilesByPath, isPathDirectory, } from './paths.js';
@@ -113,54 +114,42 @@ export var ConfigInputFields;
     ConfigInputFields["VALUES"] = "values";
     ConfigInputFields["VERSION"] = "version";
 })(ConfigInputFields || (ConfigInputFields = {}));
-// Legacy apps (pre-workspace) - Astro only (Proxima, Sunrise)
-// Uses direct commands without workspace prefix
-const LegacyFrontendProjectTypes = [
+// Frontend project types - all use direct commands run from frontend/ directory
+export const FrontendProjectTypes = [
     {
         buildCommand: 'npx astro build',
         devCommand: 'npx astro dev --port ${PORT}',
-        mainPackage: 'astro',
-        name: 'Astro',
-        slug: 'astro',
-    },
-];
-// Modern apps (workspace-based) - All frameworks
-export const FrontendProjectTypes = [
-    {
-        buildCommand: 'npm exec --workspace=frontend -- astro build',
-        devCommand: 'npm exec --workspace=frontend -- astro dev --port ${PORT}',
         installCommand: 'npm create cloudflare@latest -- frontend --framework=astro --deploy=false --git=false -- --no-git --yes --skip-houston --typescript strict',
         mainPackage: 'astro',
         name: 'Astro',
         slug: 'astro',
     },
     {
-        buildCommand: 'npm exec --workspace=frontend -- ng build',
-        devCommand: 'npm exec --workspace=frontend -- ng serve --port ${PORT}',
+        buildCommand: 'npx ng build',
+        devCommand: 'npx ng serve --port ${PORT}',
         installCommand: 'npm create cloudflare@latest -- frontend --framework=angular --deploy=false --git=false -- --style=sass --zoneless --ai-config=none',
         mainPackage: '@angular/core',
         name: 'Angular',
         slug: 'angular',
     },
     {
-        devCommand: 'npm exec --workspace=frontend -- wrangler dev --port ${PORT}',
+        devCommand: 'npx wrangler dev --port ${PORT}',
         installCommand: 'npm create cloudflare@latest -- frontend --framework=hono  --deploy=false --git=false',
         mainPackage: 'hono',
         name: 'Hono',
         slug: 'hono',
     },
     {
-        buildCommand: 'npm exec --workspace=frontend -- nuxt build',
-        devCommand: 'npm exec --workspace=frontend -- nuxt dev --port ${PORT}',
+        buildCommand: 'npx nuxt build',
+        devCommand: 'npx nuxt dev --port ${PORT}',
         installCommand: 'npm create cloudflare@latest -- frontend --framework=nuxt --deploy=false --git=false -- --no-modules -f',
         mainPackage: 'nuxt',
         name: 'Nuxt',
         slug: 'nuxt',
     },
     {
-        buildCommand: 'npm exec --workspace=frontend -- opennextjs-cloudflare build',
-        // devCommand: 'npm exec --workspace=frontend -- opennextjs-cloudflare build && npm exec --workspace=frontend -- opennextjs-cloudflare preview --port=${PORT}',
-        devCommand: 'npm exec --workspace=frontend -- next dev --turbopack --port ${PORT}',
+        buildCommand: 'npx opennextjs-cloudflare build',
+        devCommand: 'npx next dev --turbopack --port ${PORT}',
         installCommand: 'npm create cloudflare@latest -- frontend --framework=next --deploy=false --git=false -- --typescript --use-npm --src-dir --app --eslint --import-alias "@/*" --tailwind --turbopack',
         mainPackage: 'next',
         name: 'Next.js',
@@ -183,28 +172,8 @@ export function getFrontendProjectValidValues(withNone = true, withLegacy = true
 export function getAppSlugId(app) {
     return toAppId(app.private_id) || app.public_id || app.id;
 }
-function hasWorkspaceStructure(appPath) {
-    // Check if root package.json has workspaces field including 'frontend'
-    const rootPkgPath = path.join(appPath, 'package.json');
-    if (!filePathExists(rootPkgPath)) {
-        return false;
-    }
-    try {
-        const content = fs.readFileSync(rootPkgPath, 'utf8');
-        const pkg = JSON.parse(content);
-        return Array.isArray(pkg.workspaces) && pkg.workspaces.includes('frontend');
-    }
-    catch {
-        return false;
-    }
-}
 export function getFrontendProjectType(appPath) {
-    // Detect workspace structure and select appropriate config
-    const hasWorkspace = hasWorkspaceStructure(appPath);
-    const projectTypes = hasWorkspace
-        ? FrontendProjectTypes
-        : LegacyFrontendProjectTypes;
-    // Try frontend/package.json first (new workspace structure), then root package.json (old structure)
+    // Try frontend/package.json first (workspace structure), then root package.json (legacy)
     const pkgPaths = [
         path.join(appPath, 'frontend', 'package.json'),
         path.join(appPath, 'package.json'),
@@ -216,15 +185,16 @@ export function getFrontendProjectType(appPath) {
         try {
             const content = fs.readFileSync(pkgPath, 'utf8');
             const pkg = JSON.parse(content);
-            for (const projectType of projectTypes) {
+            for (const projectType of FrontendProjectTypes) {
                 if (pkg.dependencies?.[projectType.mainPackage] ||
                     pkg.devDependencies?.[projectType.mainPackage]) {
                     // Create a copy to avoid mutating the original
                     const detectedType = { ...projectType };
                     // If buildCommand not explicitly set in framework definition, detect it
-                    detectedType.buildCommand ||=
-                        // Check if package.json has a "build" script, if not set to empty string (no build needed)
-                        pkg.scripts?.build ? 'npm run build' : '';
+                    // Check if package.json has a "build" script, if not set to empty string (no build needed)
+                    detectedType.buildCommand ||= pkg.scripts?.build
+                        ? 'npm run build'
+                        : '';
                     return detectedType;
                 }
             }
@@ -236,6 +206,20 @@ export function getFrontendProjectType(appPath) {
     }
     return undefined;
 }
+/**
+ * Get project commands transformed for the detected package manager.
+ * Detects the package manager from lock files in appPath and transforms
+ * npm-style commands to the equivalent for that package manager.
+ */
+export function getProjectCommands(appPath, projectType) {
+    const pm = detectPackageManager(appPath);
+    return {
+        buildCommand: projectType.buildCommand
+            ? transformCommand(projectType.buildCommand, pm)
+            : undefined,
+        devCommand: transformCommand(projectType.devCommand, pm),
+    };
+}
 export function getConfigTypeFromPath(path) {
     for (const type in AllConfigPaths) {
         if (AllConfigPaths[type] === path) {

package/dist/lib/create/tests.js

@@ -4,7 +4,7 @@ import { filePathExists, writeFile } from '../apps/index.js';
 import { envDtsTemplate, integrationTestTemplate, mockRequestTemplate, setupGlobalsTemplate, swellClientTemplate, tsconfigTemplate, unitTestTemplate, vitestConfigTemplate, } from './tests/templates/index.js';
 const TEST_DEV_DEPENDENCIES = {
     '@cloudflare/vitest-pool-workers': 'latest',
-    vitest: 'latest',
+    vitest: '3.2.x',
     '@swell/app-types': 'latest',
 };
 async function writeTextFile(filePath, contents, overwrite) {

package/dist/lib/package-manager.d.ts

@@ -0,0 +1,86 @@
+export type PackageManager = 'npm' | 'yarn' | 'pnpm' | 'bun';
+export interface PackageManagerCommands {
+    /** Install command (e.g., 'npm install') */
+    install: string;
+    /** Run a script (e.g., 'npm run build' for script 'build') */
+    run: (script: string) => string;
+    /** Execute command in workspace (e.g., 'npm exec --workspace=frontend -- astro build') */
+    workspaceExec: (workspace: string, command: string) => string;
+    /** Run a script in a workspace (e.g., 'npm run build --workspace=frontend') */
+    workspaceRun: (workspace: string, script: string) => string;
+    /** Execute a binary (e.g., 'npx wrangler') */
+    exec: (command: string) => string;
+}
+/**
+ * Find lock file in directory or parent directories
+ * @returns Lock file name and path, or null if not found
+ */
+export declare function findLockFile(directory: string): {
+    name: string;
+    packageManager: PackageManager;
+    path: string;
+} | null;
+/**
+ * Detect package manager from lock file in directory tree
+ * @returns Detected package manager, defaults to 'npm' if no lock file found
+ */
+export declare function detectPackageManager(directory: string): PackageManager;
+/**
+ * Get command templates for a package manager
+ */
+export declare function getPackageManagerCommands(pm: PackageManager): PackageManagerCommands;
+/**
+ * Detect package manager and get its commands
+ */
+export declare function getPackageManager(directory: string): {
+    commands: PackageManagerCommands;
+    lockFile: {
+        name: string;
+        path: string;
+    } | null;
+    name: PackageManager;
+};
+/**
+ * Transform an npm command to the equivalent for the detected package manager
+ * Handles common patterns:
+ * - 'npm run X' -> 'yarn run X' / 'pnpm run X' / 'bun run X'
+ * - 'npm run X --workspace=Y' -> 'yarn workspace Y run X' / 'pnpm --filter Y run X' / 'bun run --filter Y X'
+ * - 'npm exec --workspace=X -- Y' -> equivalent workspace command
+ * - 'npx X' -> 'yarn dlx X' / 'pnpm dlx X' / 'bunx X'
+ */
+export declare function transformCommand(command: string, pm: PackageManager): string;
+/**
+ * Transform npm create commands to the equivalent for another package manager.
+ * Handles 'npm create X@version -- args' -> 'pm create X@version args'
+ * Also transforms --use-npm to --use-{pm} for CLIs that support it (e.g., Next.js)
+ * For yarn, removes @latest suffix since yarn classic (v1) may not handle it properly.
+ *
+ * @example
+ * transformCreateCommand('npm create cloudflare@latest -- frontend --framework=hono', 'bun')
+ * // Returns: 'bun create cloudflare@latest frontend --framework=hono'
+ *
+ * @example
+ * transformCreateCommand('npm create cloudflare@latest -- frontend --framework=next --use-npm', 'pnpm')
+ * // Returns: 'pnpm create cloudflare@latest frontend --framework=next --use-pnpm'
+ *
+ * @example
+ * transformCreateCommand('npm create cloudflare@latest -- frontend --framework=astro', 'yarn')
+ * // Returns: 'yarn create cloudflare -- frontend --framework=astro'
+ */
+export declare function transformCreateCommand(command: string, pm: PackageManager): string;
+/**
+ * Get spawn arguments for executing a package binary.
+ * Returns the program and any prefix args needed before the command args.
+ * Useful for node's spawn() which needs program and args separately.
+ *
+ * Uses npx for most package managers (universally available via Node.js).
+ * Uses bunx for bun projects (performance benefit from Bun runtime).
+ *
+ * @example
+ * const { program, prefixArgs } = getExecSpawnArgs('npm');
+ * spawn(program, [...prefixArgs, 'wrangler', 'dev', '--port=3000']);
+ */
+export declare function getExecSpawnArgs(pm: PackageManager): {
+    prefixArgs: string[];
+    program: string;
+};

package/dist/lib/package-manager.js

@@ -0,0 +1,186 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+/** Lock file to package manager mapping (priority order: bun > pnpm > yarn > npm) */
+const LOCK_FILES = [
+    ['bun.lockb', 'bun'],
+    ['bun.lock', 'bun'],
+    ['pnpm-lock.yaml', 'pnpm'],
+    ['yarn.lock', 'yarn'],
+    ['package-lock.json', 'npm'],
+];
+/** Command templates for each package manager */
+const COMMANDS = {
+    npm: {
+        install: 'npm install',
+        run: (script) => `npm run ${script}`,
+        workspaceExec: (workspace, command) => `npm exec --workspace=${workspace} -- ${command}`,
+        workspaceRun: (workspace, script) => `npm run ${script} --workspace=${workspace}`,
+        exec: (command) => `npx ${command}`,
+    },
+    yarn: {
+        install: 'yarn install',
+        run: (script) => `yarn run ${script}`,
+        workspaceExec: (workspace, command) => `yarn workspace ${workspace} ${command}`,
+        workspaceRun: (workspace, script) => `yarn workspace ${workspace} run ${script}`,
+        exec: (command) => `yarn dlx ${command}`,
+    },
+    pnpm: {
+        install: 'pnpm install',
+        run: (script) => `pnpm run ${script}`,
+        workspaceExec: (workspace, command) => `pnpm --filter ${workspace} exec ${command}`,
+        workspaceRun: (workspace, script) => `pnpm --filter ${workspace} run ${script}`,
+        exec: (command) => `pnpm dlx ${command}`,
+    },
+    bun: {
+        install: 'bun install',
+        run: (script) => `bun run ${script}`,
+        // Use --cwd for executing binaries in a workspace (--filter is for scripts only)
+        workspaceExec: (workspace, command) => `bun --cwd ${workspace} x ${command}`,
+        workspaceRun: (workspace, script) => `bun run --filter ${workspace} ${script}`,
+        exec: (command) => `bunx ${command}`,
+    },
+};
+/**
+ * Find lock file in directory or parent directories
+ * @returns Lock file name and path, or null if not found
+ */
+export function findLockFile(directory) {
+    let currentDir = path.resolve(directory);
+    const { root } = path.parse(currentDir);
+    while (currentDir !== root) {
+        for (const [lockFile, pm] of LOCK_FILES) {
+            const lockPath = path.join(currentDir, lockFile);
+            if (fs.existsSync(lockPath)) {
+                return { name: lockFile, packageManager: pm, path: lockPath };
+            }
+        }
+        currentDir = path.dirname(currentDir);
+    }
+    return null;
+}
+/**
+ * Detect package manager from lock file in directory tree
+ * @returns Detected package manager, defaults to 'npm' if no lock file found
+ */
+export function detectPackageManager(directory) {
+    const lockFile = findLockFile(directory);
+    return lockFile?.packageManager ?? 'npm';
+}
+/**
+ * Get command templates for a package manager
+ */
+export function getPackageManagerCommands(pm) {
+    return COMMANDS[pm];
+}
+/**
+ * Detect package manager and get its commands
+ */
+export function getPackageManager(directory) {
+    const lockFile = findLockFile(directory);
+    const name = lockFile?.packageManager ?? 'npm';
+    return {
+        commands: COMMANDS[name],
+        lockFile: lockFile ? { name: lockFile.name, path: lockFile.path } : null,
+        name,
+    };
+}
+/**
+ * Transform an npm command to the equivalent for the detected package manager
+ * Handles common patterns:
+ * - 'npm run X' -> 'yarn run X' / 'pnpm run X' / 'bun run X'
+ * - 'npm run X --workspace=Y' -> 'yarn workspace Y run X' / 'pnpm --filter Y run X' / 'bun run --filter Y X'
+ * - 'npm exec --workspace=X -- Y' -> equivalent workspace command
+ * - 'npx X' -> 'yarn dlx X' / 'pnpm dlx X' / 'bunx X'
+ */
+export function transformCommand(command, pm) {
+    if (pm === 'npm') {
+        return command;
+    }
+    const commands = COMMANDS[pm];
+    // Transform 'npm exec --workspace=X -- Y'
+    const workspaceMatch = command.match(/^npm exec --workspace=(\S+) -- (.+)$/);
+    if (workspaceMatch) {
+        return commands.workspaceExec(workspaceMatch[1], workspaceMatch[2]);
+    }
+    // Transform 'npm run X --workspace=Y'
+    const workspaceRunMatch = command.match(/^npm run (\S+) --workspace=(\S+)$/);
+    if (workspaceRunMatch) {
+        return commands.workspaceRun(workspaceRunMatch[2], workspaceRunMatch[1]);
+    }
+    // Transform 'npm run X' (with optional flags)
+    const runMatch = command.match(/^npm run (\S.*)$/);
+    if (runMatch) {
+        return commands.run(runMatch[1]);
+    }
+    // Transform 'npx X' to 'bunx X' for bun (performance benefit from Bun runtime)
+    // For other package managers, keep npx as-is (universally available via Node.js)
+    if (pm === 'bun') {
+        const npxMatch = command.match(/^npx (.+)$/);
+        if (npxMatch) {
+            return `bunx ${npxMatch[1]}`;
+        }
+    }
+    // Warn if command looks like npm but wasn't transformed
+    if (command.startsWith('npm ')) {
+        console.warn(`Warning: Command "${command}" was not transformed for ${pm}.`);
+    }
+    return command;
+}
+/**
+ * Transform npm create commands to the equivalent for another package manager.
+ * Handles 'npm create X@version -- args' -> 'pm create X@version args'
+ * Also transforms --use-npm to --use-{pm} for CLIs that support it (e.g., Next.js)
+ * For yarn, removes @latest suffix since yarn classic (v1) may not handle it properly.
+ *
+ * @example
+ * transformCreateCommand('npm create cloudflare@latest -- frontend --framework=hono', 'bun')
+ * // Returns: 'bun create cloudflare@latest frontend --framework=hono'
+ *
+ * @example
+ * transformCreateCommand('npm create cloudflare@latest -- frontend --framework=next --use-npm', 'pnpm')
+ * // Returns: 'pnpm create cloudflare@latest frontend --framework=next --use-pnpm'
+ *
+ * @example
+ * transformCreateCommand('npm create cloudflare@latest -- frontend --framework=astro', 'yarn')
+ * // Returns: 'yarn create cloudflare -- frontend --framework=astro'
+ */
+export function transformCreateCommand(command, pm) {
+    if (pm === 'npm') {
+        return command;
+    }
+    // Match 'npm create X@version -- args' or 'npm create X -- args'
+    const createMatch = command.match(/^npm create (\S+) -- (.+)$/);
+    if (createMatch) {
+        let [, packageWithVersion, args] = createMatch;
+        // Replace --use-npm with --use-{pm} for Next.js and similar CLIs
+        const transformedArgs = args.replace(/--use-npm\b/, `--use-${pm}`);
+        // For yarn classic (v1), remove @latest since yarn create fetches latest by default
+        // and may not properly handle version specifiers. Also add -- separator for args.
+        if (pm === 'yarn') {
+            packageWithVersion = packageWithVersion.replace(/@latest$/, '');
+            return `yarn create ${packageWithVersion} -- ${transformedArgs}`;
+        }
+        return `${pm} create ${packageWithVersion} ${transformedArgs}`;
+    }
+    return command;
+}
+/**
+ * Get spawn arguments for executing a package binary.
+ * Returns the program and any prefix args needed before the command args.
+ * Useful for node's spawn() which needs program and args separately.
+ *
+ * Uses npx for most package managers (universally available via Node.js).
+ * Uses bunx for bun projects (performance benefit from Bun runtime).
+ *
+ * @example
+ * const { program, prefixArgs } = getExecSpawnArgs('npm');
+ * spawn(program, [...prefixArgs, 'wrangler', 'dev', '--port=3000']);
+ */
+export function getExecSpawnArgs(pm) {
+    // Use bunx for bun (performance benefit), npx for everything else
+    // npx is universally available via Node.js and avoids yarn dlx v1/v2 issues
+    if (pm === 'bun') {
+        return { prefixArgs: [], program: 'bunx' };
+    }
+    return { prefixArgs: [], program: 'npx' };
+}

package/dist/push-app-command.js

@@ -6,10 +6,11 @@ import * as path from 'node:path';
 import Stream from 'node:stream';
 import ora from 'ora';
 import { default as swellConfig } from './lib/app-config.js';
-import { ConfigType, getFrontendProjectValidValues, allConfigFilesInDir, appConfigFromFile, filePathExists, filePathExistsAsync, findAppConfig, getAppSlugId, getConfigTypeFromPath, getConfigTypeKeyFromValue, getFrontendProjectType, globAllFilesByPath, hashString, isPathDirectory, } from './lib/apps/index.js';
+import { ConfigType, getFrontendProjectValidValues, allConfigFilesInDir, appConfigFromFile, filePathExists, filePathExistsAsync, findAppConfig, getAppSlugId, getConfigTypeFromPath, getConfigTypeKeyFromValue, getFrontendProjectType, getProjectCommands, globAllFilesByPath, hashString, isPathDirectory, } from './lib/apps/index.js';
 import { getGlobIgnorePathsChecker } from './lib/apps/paths.js';
 import { default as localConfig } from './lib/config.js';
 import { toAppId } from './lib/create/index.js';
+import { detectPackageManager, transformCommand, } from './lib/package-manager.js';
 import { getProxyUrl } from './lib/proxy.js';
 import { selectEnvironmentId } from './lib/stores.js';
 import style from './lib/style.js';
@@ -109,12 +110,14 @@ export class PushAppCommand extends RemoteAppCommand {
             this.showFrontendMigrationError();
             return; // unreachable but helps TypeScript narrow the type
         }
-        if (!projectType.buildCommand) {
+        // Get commands transformed for the detected package manager
+        const { buildCommand } = getProjectCommands(this.appPath, projectType);
+        if (!buildCommand) {
             // No build command needed for this framework
             return;
         }
         this.log(`Building ${projectType.name} frontend...\n`);
-        await this.execFrontend(projectType.buildCommand);
+        await this.execFrontend(buildCommand);
     }
     async chooseAppToPull(query) {
         const typeLabelPlural = this.appType === 'theme' ? 'themes' : 'apps';
@@ -332,7 +335,8 @@ export class PushAppCommand extends RemoteAppCommand {
         }
     }
     async execFrontend(command, onOutput) {
-        return this.exec(command, this.frontendPath, onOutput);
+        // Run from frontend directory where wrangler.toml and framework configs live
+        return this.exec(command, this.frontendPath || path.join(this.appPath, 'frontend'), onOutput);
     }
     async getAllAppStorefronts(params) {
         const query = Object.entries(params || {})
@@ -794,12 +798,15 @@ export class PushAppCommand extends RemoteAppCommand {
         let pagesProjectError = false;
         let outputBuffer = '';
         this.log(`\nDeploying to Cloudflare...\n`);
+        // Get the wrangler deploy command for the detected package manager
+        const pm = detectPackageManager(this.appPath);
+        const deployCommand = transformCommand('npx wrangler deploy', pm);
         try {
-            await this.execFrontend(`npx wrangler deploy`, (string) => {
+            await this.execFrontend(deployCommand, (string) => {
                 // Accumulate output for URL parsing after command completes
                 outputBuffer += string;
                 // Suppress workers.dev URL from output (users should use swell domain)
-                if (string.match(/^\s*https:\/\/\S+\.workers\.dev\s*$/m)) {
+                if (/^\s*https:\/\/\S+\.workers\.dev\s*$/m.test(string)) {
                     return false;
                 }
                 // Check for Pages project error

package/oclif.manifest.json

@@ -812,7 +812,7 @@
         },
         "pkg": {
           "char": "p",
-          "description": "Package manager: npm | yarn | none",
+          "description": "Package manager: npm | yarn | pnpm | bun | none",
           "name": "pkg",
           "default": "npm",
           "hasDynamicHelp": false,
@@ -820,6 +820,8 @@
           "options": [
             "npm",
             "yarn",
+            "pnpm",
+            "bun",
             "none"
           ],
           "type": "option"
@@ -1368,7 +1370,7 @@
         },
         "pkg": {
           "char": "p",
-          "description": "Package manager: npm | yarn | none",
+          "description": "Package manager: npm | yarn | pnpm | bun | none",
           "name": "pkg",
           "default": "npm",
           "hasDynamicHelp": false,
@@ -1376,6 +1378,8 @@
           "options": [
             "npm",
             "yarn",
+            "pnpm",
+            "bun",
             "none"
           ],
           "type": "option"
@@ -1635,7 +1639,7 @@
         },
         "pkg": {
           "char": "p",
-          "description": "use npm or yarn to install default dependencies, or none to disable",
+          "description": "Package manager: npm | yarn | pnpm | bun | none",
           "name": "pkg",
           "default": "npm",
           "hasDynamicHelp": false,
@@ -1643,6 +1647,8 @@
           "options": [
             "npm",
             "yarn",
+            "pnpm",
+            "bun",
             "none"
           ],
           "type": "option"
@@ -2511,7 +2517,7 @@
         },
         "pkg": {
           "char": "p",
-          "description": "Package manager: npm | yarn | none",
+          "description": "Package manager: npm | yarn | pnpm | bun | none",
           "name": "pkg",
           "default": "npm",
           "hasDynamicHelp": false,
@@ -2519,6 +2525,8 @@
           "options": [
             "npm",
             "yarn",
+            "pnpm",
+            "bun",
             "none"
           ],
           "type": "option"
@@ -2876,5 +2884,5 @@
       ]
     }
   },
-  "version": "2.3.4"
+  "version": "2.4.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swell/cli",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "type": "module",
   "description": "Swell's command line interface/utility",
   "keywords": [