Merge pull request #12 from cloudinary-devs/detect-invoking-package-manager

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** — use a [current LTS](https://nodejs.org/) release. The generated app lists supported versions under `engines` in its `package.json`.
 - 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.
+Use a current **Node.js LTS** release. If installs fail, match the `engines` range in the generated project’s `package.json`.
 
 ```bash
 npx create-cloudinary-react
@@ -80,7 +80,7 @@ During setup, select your AI tool to generate **Context Rules**. These rules tea
 
 ## 📋 Prerequisites
 
-- **Node.js 18+**
+- **Node.js** — LTS recommended; exact ranges for the scaffolded app are in `package.json` → `engines`.
 - **Cloudinary Account**: [Sign up for free](https://cloudinary.com/users/register/free) if you haven't already.
 
 ## 🤝 Contributing

cli.js

@@ -3,7 +3,7 @@
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import { existsSync, mkdirSync, writeFileSync, readFileSync } from 'fs';
-import { execSync } from 'child_process';
+import { spawnSync } from 'child_process';
 import inquirer from 'inquirer';
 import chalk from 'chalk';
 import fs from 'fs-extra';
@@ -14,6 +14,64 @@ 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 };
+}
+
+/**
+ * Resolve which client to run for install / dev.
+ * Only npm, pnpm, yarn, and bun have explicit command mappings below; anything else
+ * (missing env, exotic clients, parse quirks) falls back to npm as the safe default that
+ * ships with Node and matches the install instructions most users expect.
+ */
+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 [command, ...cmdArgs] = args;
+  const result = spawnSync(command, cmdArgs, { stdio: 'inherit', cwd, shell: false });
+  if (result.error) {
+    throw result.error;
+  }
+  if (result.status !== 0) {
+    throw new Error(`Command failed: ${args.join(' ')}`);
+  }
+}
+
 // Validate cloud name format
 function isValidCloudName(name) {
   return /^[a-z0-9_-]+$/.test(name) && name.length > 0;
@@ -61,8 +119,12 @@ async function main() {
         startDev: {
           type: 'boolean',
           default: false
-        }
-      }
+        },
+        packageManager: {
+          type: 'string',
+        },
+      },
+      allowPositionals: true,
     });
 
     Object.assign(answers, values);
@@ -166,6 +228,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. Ignoring --packageManager; using npm_config_user_agent when it names a supported client, otherwise npm.`
+      )
+    );
+    packageManager = undefined;
+  }
+  packageManager = packageManager || detectPackageManager();
+
   console.log(chalk.blue('\n📦 Creating project...\n'));
 
   // Create project directory
@@ -311,34 +384,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** — use a current LTS release. Supported ranges are listed under `engines` in this `package.json`.
+
 ## 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",