fix: detect invoking package manager

Author: strausr

README.md

@@ -8,7 +8,7 @@
 
 Scaffold a modern, production-ready Cloudinary application with React 19, Vite 6, and TypeScript 5. Features interactive setup, automatic environment configuration, and built-in AI coding assistance.
 
-- Node.js 18+ installed
+- **Node.js 20.19+** or **22.12+** (required by `@vitejs/plugin-react` 5.x with Vite 6)
 - A Cloudinary account (free tier available)
   - [Sign up for free](https://cld.media/reactregister)
   - Your cloud name is in your [dashboard](https://console.cloudinary.com/app/home/dashboard)
@@ -36,7 +36,7 @@ Part of the [Cloudinary Developers](https://github.com/cloudinary-devs) organiza
 
 ## 🚀 Quick Start
 
-Ensure you have Node.js 18+ installed.
+Ensure you have **Node.js 20.19+** or **22.12+** installed (see prerequisites above).
 
 ```bash
 npx create-cloudinary-react

cli.js

@@ -14,6 +14,52 @@ const __dirname = dirname(__filename);
 
 const TEMPLATES_DIR = join(__dirname, 'templates');
 
+/** Package managers we know how to drive for install / dev scripts */
+const SUPPORTED_PACKAGE_MANAGERS = new Set(['npm', 'pnpm', 'yarn', 'bun']);
+
+/**
+ * Parse npm_config_user_agent (set by npm, pnpm, yarn, bun when they run a package).
+ * Same approach as create-vite: first space-separated segment is "name/version".
+ */
+function pkgFromUserAgent(userAgent) {
+  if (!userAgent) return undefined;
+  const pkgSpec = userAgent.split(' ')[0];
+  const [name, version = ''] = pkgSpec.split('/');
+  if (!name) return undefined;
+  return { name, version };
+}
+
+function detectPackageManager() {
+  const pkg = pkgFromUserAgent(process.env.npm_config_user_agent);
+  if (pkg && SUPPORTED_PACKAGE_MANAGERS.has(pkg.name)) {
+    return pkg.name;
+  }
+  return 'npm';
+}
+
+function getInstallCommand(packageManager) {
+  if (packageManager === 'yarn') {
+    return ['yarn'];
+  }
+  return [packageManager, 'install'];
+}
+
+function getRunDevCommand(packageManager) {
+  switch (packageManager) {
+    case 'yarn':
+    case 'pnpm':
+    case 'bun':
+      return [packageManager, 'dev'];
+    default:
+      return ['npm', 'run', 'dev'];
+  }
+}
+
+function runPackageManagerCommand(args, cwd) {
+  const quoted = args.map((arg) => (/[\s"'\\]/.test(arg) ? JSON.stringify(arg) : arg));
+  execSync(quoted.join(' '), { stdio: 'inherit', cwd, shell: true });
+}
+
 // Validate cloud name format
 function isValidCloudName(name) {
   return /^[a-z0-9_-]+$/.test(name) && name.length > 0;
@@ -61,8 +107,12 @@ async function main() {
         startDev: {
           type: 'boolean',
           default: false
-        }
-      }
+        },
+        packageManager: {
+          type: 'string',
+        },
+      },
+      allowPositionals: true,
     });
 
     Object.assign(answers, values);
@@ -166,6 +216,17 @@ async function main() {
 
   const { projectName, cloudName, uploadPreset, aiTools, installDeps, startDev } = answers;
 
+  let packageManager = answers.packageManager;
+  if (packageManager && !SUPPORTED_PACKAGE_MANAGERS.has(packageManager)) {
+    console.warn(
+      chalk.yellow(
+        `Unknown package manager "${packageManager}". Use npm, pnpm, yarn, or bun. Falling back to auto-detect.`
+      )
+    );
+    packageManager = undefined;
+  }
+  packageManager = packageManager || detectPackageManager();
+
   console.log(chalk.blue('\n📦 Creating project...\n'));
 
   // Create project directory
@@ -311,34 +372,38 @@ async function main() {
     console.log(chalk.cyan('   5. Save the file and restart the dev server so it loads correctly\n'));
   }
 
+  const installCmd = getInstallCommand(packageManager);
+  const devCmd = getRunDevCommand(packageManager);
+  const installCmdStr = installCmd.join(' ');
+  const devCmdStr = devCmd.join(' ');
+
   if (installDeps) {
-    console.log(chalk.blue('📦 Installing dependencies...\n'));
+    console.log(chalk.blue(`📦 Installing dependencies with ${packageManager}...\n`));
     try {
-      process.chdir(projectPath);
-      execSync('npm install', { stdio: 'inherit' });
+      runPackageManagerCommand(installCmd, projectPath);
       console.log(chalk.green('\n✅ Dependencies installed!\n'));
 
       if (startDev) {
         console.log(chalk.blue('🚀 Starting development server...\n'));
-        execSync('npm run dev', { stdio: 'inherit' });
+        runPackageManagerCommand(devCmd, projectPath);
       } else {
         console.log(chalk.cyan(`\n📁 Project created at: ${projectPath}`));
         console.log(chalk.cyan(`\nNext steps:`));
         console.log(chalk.cyan(`  cd ${projectName}`));
-        console.log(chalk.cyan(`  npm run dev\n`));
+        console.log(chalk.cyan(`  ${devCmdStr}\n`));
       }
     } catch (error) {
       console.error(chalk.red('\n❌ Error installing dependencies:'), error.message);
       console.log(chalk.cyan(`\nYou can install manually:`));
       console.log(chalk.cyan(`  cd ${projectName}`));
-      console.log(chalk.cyan(`  npm install\n`));
+      console.log(chalk.cyan(`  ${installCmdStr}\n`));
     }
   } else {
     console.log(chalk.cyan(`\n📁 Project created at: ${projectPath}`));
     console.log(chalk.cyan(`\nNext steps:`));
     console.log(chalk.cyan(`  cd ${projectName}`));
-    console.log(chalk.cyan(`  npm install`));
-    console.log(chalk.cyan(`  npm run dev\n`));
+    console.log(chalk.cyan(`  ${installCmdStr}`));
+    console.log(chalk.cyan(`  ${devCmdStr}\n`));
   }
 }
 

package-lock.json

@@ -2,6 +2,10 @@
 
 A Cloudinary React + Vite + TypeScript project scaffolded with [create-cloudinary-react](https://github.com/cloudinary-devs/create-cloudinary-react).
 
+## Prerequisites
+
+- **Node.js** `^20.19.0` or `>=22.12.0` (matches `@vitejs/plugin-react` 5.x)
+
 ## Quick Start
 
 ```bash

templates/README.md.template

@@ -3,6 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",