create-cloudinary-react 1.0.0-beta.21 → 1.0.0-beta.22

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [1.0.0-beta.22](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.21...v1.0.0-beta.22) (2026-04-08)
+
+
+### Bug Fixes
+
+* add comments ([5dd6f00](https://github.com/cloudinary-devs/create-cloudinary-react/commit/5dd6f002d514d5e488eb1fcf8e9f003fa09fc22c))
+* comment and render secure url after upload ([4061546](https://github.com/cloudinary-devs/create-cloudinary-react/commit/40615464f260693a1f9a5f6b7ceca3c10456bbe6))
+* detect invoking package manager ([8e3547c](https://github.com/cloudinary-devs/create-cloudinary-react/commit/8e3547c9b97b1c806dacf853a0764d5fe9e36b9e))
+* version in readme ([0325e1b](https://github.com/cloudinary-devs/create-cloudinary-react/commit/0325e1be42db7e042710a6249f72ca4a6738bd4d))
+
 # [1.0.0-beta.21](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.20...v1.0.0-beta.21) (2026-02-25)
 
 

package/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

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudinary-react",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.22",
   "description": "Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup",
   "type": "module",
   "bin": {

package/templates/README.md.template

@@ -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

package/templates/package.json.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",

package/templates/src/App.tsx.template

@@ -25,11 +25,21 @@ const PROMPTS_WITHOUT_UPLOAD = [
 
 function App() {
   const [uploadedImageId, setUploadedImageId] = useState<string | null>(null);
+  const [uploadedUrl, setUploadedUrl] = useState<string | null>(null);
   const [clickedIds, setClickedIds] = useState(new Set<number>());
 
   const handleUploadSuccess = (result: CloudinaryUploadResult) => {
     console.log('Upload successful:', result);
+    // result contains everything you need to work with the uploaded asset:
+    //   result.public_id   — Cloudinary asset ID (use with cld.image() for transformations)
+    //   result.secure_url  — direct HTTPS URL to the original file
+    //   result.url         — HTTP URL (prefer secure_url)
+    //   result.width / result.height — image dimensions
+    //   result.format      — file format (e.g. 'jpg', 'png', 'webp')
+    //   result.bytes       — file size in bytes
+    //   result.resource_type — 'image', 'video', or 'raw'
     setUploadedImageId(result.public_id);
+    setUploadedUrl(result.secure_url); // store the URL to use anywhere in your app
   };
 
   const handleUploadError = (error: Error) => {
@@ -85,6 +95,14 @@ function App() {
           {uploadedImageId && (
             <p className="image-info">Public ID: {uploadedImageId}</p>
           )}
+          {uploadedUrl && (
+            <p className="image-info">
+              URL:{' '}
+              <a href={uploadedUrl} target="_blank" rel="noopener noreferrer">
+                {uploadedUrl}
+              </a>
+            </p>
+          )}
         </div>
 
         <div className="ai-prompts-section">