|
| 1 | +# create-cloudinary-react-vite |
| 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 | +## Usage |
| 10 | + |
| 11 | +```bash |
| 12 | +npx create-cloudinary-react-vite |
| 13 | +``` |
| 14 | + |
| 15 | +The CLI will prompt you for: |
| 16 | +- Project name |
| 17 | +- Cloudinary cloud name |
| 18 | +- Upload preset (optional) |
| 19 | +- AI coding assistant(s) you're using (Cursor, GitHub Copilot, Claude, etc.) |
| 20 | +- Whether to install dependencies |
| 21 | +- Whether to start dev server |
| 22 | + |
| 23 | +## Features |
| 24 | + |
| 25 | +- ✅ Interactive setup with validation |
| 26 | +- ✅ Pre-configured Cloudinary React SDK |
| 27 | +- ✅ TypeScript + Vite + React 19 |
| 28 | +- ✅ Typed Upload Widget component |
| 29 | +- ✅ Environment variables with VITE_ prefix |
| 30 | +- ✅ Multi-tool AI assistant support (Cursor, GitHub Copilot, Claude, and more) |
| 31 | +- ✅ MCP configuration for Cloudinary integration |
| 32 | +- ✅ ESLint + TypeScript configured |
| 33 | + |
| 34 | +## AI Assistant Support |
| 35 | + |
| 36 | +During setup, you'll be asked which AI coding assistant(s) you're using. The CLI will generate the appropriate configuration files: |
| 37 | + |
| 38 | +- ✅ **Cursor** → `.cursorrules` + `.cursor/mcp.json` (if selected) |
| 39 | +- ✅ **GitHub Copilot** → `.github/copilot-instructions.md` |
| 40 | +- ✅ **Claude Code / Claude Desktop** → `.claude`, `claude.md` + `.cursor/mcp.json` (if selected) |
| 41 | +- ✅ **Generic AI tools** → `AI_INSTRUCTIONS.md`, `PROMPT.md` |
| 42 | + |
| 43 | +**MCP Configuration**: The `.cursor/mcp.json` file is automatically generated if you select Cursor or Claude, as it works with both tools. |
| 44 | + |
| 45 | +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. |
| 46 | + |
| 47 | +## Development |
| 48 | + |
| 49 | +This project uses [Conventional Commits](https://www.conventionalcommits.org/) for version management. |
| 50 | + |
| 51 | +### Commit Format |
| 52 | + |
| 53 | +``` |
| 54 | +<type>(<scope>): <subject> |
| 55 | +
|
| 56 | +<body> |
| 57 | +
|
| 58 | +<footer> |
| 59 | +``` |
| 60 | + |
| 61 | +**Types:** |
| 62 | +- `feat`: New feature |
| 63 | +- `fix`: Bug fix |
| 64 | +- `docs`: Documentation changes |
| 65 | +- `refactor`: Code refactoring |
| 66 | +- `perf`: Performance improvements |
| 67 | +- `chore`: Other changes |
| 68 | + |
| 69 | +### Version Management |
| 70 | + |
| 71 | +This project uses [release-please](https://github.com/googleapis/release-please) for automated version management. |
| 72 | + |
| 73 | +```bash |
| 74 | +# Install dependencies (includes husky setup) |
| 75 | +npm install |
| 76 | + |
| 77 | +# Update release-please manifest (analyzes commits and updates manifest) |
| 78 | +npm run release |
| 79 | + |
| 80 | +# Create release PR (creates PR with version bump and changelog) |
| 81 | +npm run release:pr |
| 82 | +``` |
| 83 | + |
| 84 | +**How it works:** |
| 85 | +1. Make commits with conventional format (`feat:`, `fix:`, etc.) |
| 86 | +2. Run `npm run release` to update the manifest based on commits |
| 87 | +3. Run `npm run release:pr` to create a release PR |
| 88 | +4. Merge the PR to create the release tag |
| 89 | + |
| 90 | +**Version bumps are automatic based on commit types:** |
| 91 | +- `feat:` → minor version (1.0.0 → 1.1.0) |
| 92 | +- `fix:` → patch version (1.0.0 → 1.0.1) |
| 93 | +- `BREAKING CHANGE:` or `feat!:` → major version (1.0.0 → 2.0.0) |
| 94 | + |
| 95 | +**Note:** |
| 96 | +- Update the `repo-url` in `package.json` scripts with your actual GitHub repo |
| 97 | +- For beta releases, you can manually edit the version in the manifest or PR |
| 98 | +- Alternatively, use `npm version` commands for manual versioning |
0 commit comments