|
| 1 | +# create-cloudinary-react |
| 2 | + |
| 3 | +> **Beta Release** - This is a beta version. We welcome feedback and bug reports! |
| 4 | +
|
| 5 | +Part of the [Cloudinary Developers](https://github.com/cloudinary-devs) organization. |
| 6 | + |
| 7 | +Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup. |
| 8 | + |
| 9 | +## Prerequisites |
| 10 | + |
| 11 | +- Node.js 18+ installed |
| 12 | +- A Cloudinary account (free tier available) |
| 13 | + - [Sign up for free](https://cloudinary.com/users/register/free) |
| 14 | + - Your cloud name is in your [dashboard](https://console.cloudinary.com/app/home/dashboard) |
| 15 | + |
| 16 | +## Usage |
| 17 | + |
| 18 | +```bash |
| 19 | +npx create-cloudinary-react |
| 20 | +``` |
| 21 | + |
| 22 | +The CLI will prompt you for: |
| 23 | +- Project name |
| 24 | +- **Cloudinary cloud name** (found in your [dashboard](https://console.cloudinary.com/app/home/dashboard)) |
| 25 | +- Upload preset (optional - required for uploads, but transformations work without it) |
| 26 | +- AI coding assistant(s) you're using (Cursor, GitHub Copilot, Claude, etc.) |
| 27 | +- Whether to install dependencies |
| 28 | +- Whether to start dev server |
| 29 | + |
| 30 | +## Features |
| 31 | + |
| 32 | +- ✅ Interactive setup with validation |
| 33 | +- ✅ Pre-configured Cloudinary React SDK |
| 34 | +- ✅ TypeScript + Vite + React 19 |
| 35 | +- ✅ Typed Upload Widget component |
| 36 | +- ✅ Environment variables with VITE_ prefix |
| 37 | +- ✅ Multi-tool AI assistant support (Cursor, GitHub Copilot, Claude, and more) |
| 38 | +- ✅ MCP configuration for Cloudinary integration |
| 39 | +- ✅ ESLint + TypeScript configured |
| 40 | + |
| 41 | +## AI Assistant Support |
| 42 | + |
| 43 | +During setup, you'll be asked which AI coding assistant(s) you're using. The CLI will generate the appropriate configuration files: |
| 44 | + |
| 45 | +- ✅ **Cursor** → `.cursorrules` + `.cursor/mcp.json` (if selected) |
| 46 | +- ✅ **GitHub Copilot** → `.github/copilot-instructions.md` |
| 47 | +- ✅ **Claude Code / Claude Desktop** → `.claude`, `claude.md` + `.cursor/mcp.json` (if selected) |
| 48 | +- ✅ **Generic AI tools** → `AI_INSTRUCTIONS.md`, `PROMPT.md` |
| 49 | + |
| 50 | +**MCP Configuration**: The `.cursor/mcp.json` file is automatically generated if you select Cursor or Claude, as it works with both tools. |
| 51 | + |
| 52 | +These rules help AI assistants understand Cloudinary React SDK patterns, common errors, and best practices. The generated app also includes an "AI Prompts" section with ready-to-use suggestions for your AI assistant. |
| 53 | + |
| 54 | +## Development |
| 55 | + |
| 56 | +This project uses [Conventional Commits](https://www.conventionalcommits.org/) for version management and [semantic-release](https://github.com/semantic-release/semantic-release) for automated releases. |
| 57 | + |
| 58 | +### Release Process |
| 59 | + |
| 60 | +Releases are triggered manually via GitHub Actions workflow. The workflow uses npm trusted publishing (OIDC) for secure package publishing. New versions are published to npm when the workflow runs without dry run. |
| 61 | + |
| 62 | +**Dry run (default):** When you run the workflow, "Dry run only" is checked by default. This runs semantic-release in dry-run mode—**no git push, no tags, no npm publish**. Use this to verify the next version and release notes before doing a real release. To publish for real, run the workflow again and **uncheck** "Dry run only". Each real release creates a GitHub release, updates CHANGELOG, and publishes the new version to npm (when the version changes). |
| 63 | + |
| 64 | +### Commit Format |
| 65 | + |
| 66 | +``` |
| 67 | +<type>(<scope>): <subject> |
| 68 | +
|
| 69 | +<body> |
| 70 | +
|
| 71 | +<footer> |
| 72 | +``` |
| 73 | + |
| 74 | +**Types:** |
| 75 | +- `feat`: New feature |
| 76 | +- `fix`: Bug fix |
| 77 | +- `docs`: Documentation changes |
| 78 | +- `refactor`: Code refactoring |
| 79 | +- `perf`: Performance improvements |
| 80 | +- `chore`: Other changes |
| 81 | + |
0 commit comments