build-app-with 2.0.11 → 2.0.12

package/README.md

@@ -1,109 +1,222 @@
-# 🚀 Build App With
+# Build App With
 
-**The fastest way to create modern web applications**
+**Interactive CLI for scaffolding production-ready web applications**
 
-An interactive CLI tool that helps you quickly set up production-ready web applications with popular frameworks and features - no complex configuration needed.
+[![npm version](https://img.shields.io/npm/v/build-app-with.svg)](https://www.npmjs.com/package/build-app-with)
+[![license](https://img.shields.io/npm/l/build-app-with.svg)](LICENSE)
+[![node](https://img.shields.io/node/v/build-app-with.svg)](package.json)
 
-## 🎯 What can you build?
+Choose a framework, pick your features, and get a fully configured project in seconds — no manual setup required.
 
-### Frontend Applications
-- **⚛️ React with Next.js** - Full-stack React framework with server-side rendering
-- **⚡ React with Vite** - Lightning-fast React development with modern tooling
+## Quick Start
 
-### Backend APIs
-- **🚀 Express.js** - Traditional Node.js web server with extensive ecosystem
-- **⚡ Fastify** - High-performance Node.js framework for APIs
+```bash
+# Run directly (no install needed)
+npx build-app-with
+
+# Or provide a project name upfront
+npx build-app-with my-app
+```
 
-## 🚀 Quick Start
+**Prerequisites:** Node.js 18+ and npm 8+
 
-### ✨ Recommended: Use directly (no installation needed)
 ```bash
-npx build-app-with my-awesome-app
+npx build-app-with --help       # Show usage info
+npx build-app-with --version    # Show version
 ```
 
-## 💡 How it works
+## Supported Frameworks
 
-1. **Choose your framework** - React (Next.js/Vite) or Node.js (Express/Fastify)
-2. **Pick your features** - TypeScript, CSS frameworks, authentication, databases, etc.
-3. **Get your app** - Complete project setup with all files configured and ready to run
+| Framework | Type | Description |
+|-----------|------|-------------|
+| **Next.js** | Full-stack | SSR, API routes, App Router. TypeScript enforced. |
+| **Vite + React** | Frontend | Lightning-fast HMR with optional TypeScript. |
+| **Rsbuild + React** | Frontend | Rust-powered bundler (Rspack). TypeScript enforced. |
+| **Express.js** | Backend | Traditional Node.js web server with extensive middleware ecosystem. |
+| **Fastify** | Backend | High-performance Node.js API framework with plugin architecture. |
 
-## ✨ Available Features
+## Preset System
 
-### 🎨 Styling & UI
-- **CSS Frameworks**: Tailwind CSS, Bootstrap, Material-UI, Chakra UI, shadcn/ui
-- **Components**: Pre-built component libraries and design systems
+When you choose **Vite + React** or **Rsbuild + React**, you pick a preset that determines default features:
 
-### 🔐 Authentication
-- **Options**: JWT tokens, NextAuth.js, Clerk, Auth0
-- **Ready-to-use**: Login/signup pages and user management
+| Preset | What's Included |
+|--------|----------------|
+| **Starter** | React + CSS only. Minimal starting point. |
+| **Standard** (default) | React Router DOM, Zustand, React Hook Form, React Icons, React Toastify |
+| **Full** | Everything in Standard + Framer Motion, React Table, React Helmet, react-i18next |
+| **Custom** | Choose every feature manually |
 
-### 💾 Databases
-- **SQL**: PostgreSQL, MySQL, SQLite
-- **NoSQL**: MongoDB
-- **ORMs**: Prisma, Mongoose, Sequelize
+Standard and Full presets let you add more features on top of the defaults. Next.js and backend frameworks use a Default / Customize toggle instead.
 
-### 🛠️ Development Tools
-- **TypeScript**: Full type safety and IntelliSense
-- **Testing**: Jest test framework with example tests
-- **Code Quality**: ESLint, Prettier, pre-commit hooks
-- **Docker**: Production-ready containerization
+## Features Reference
 
-### 🚀 Production Features
-- **Security**: CORS, Helmet, rate limiting, input validation
-- **Logging**: Structured logging with Winston
-- **API Docs**: Automatic Swagger/OpenAPI documentation
-- **Performance**: Optimized builds and caching
+### CSS Frameworks (Frontend)
 
-## 📖 Example Usage
+Tailwind CSS, Bootstrap, Material-UI (MUI), Chakra UI, shadcn/ui, Mantine, Styled Components, or Vanilla CSS.
 
-```bash
-# Create a Next.js app with TypeScript and Tailwind
-npx build-app-with my-next-app
+Available for Vite, Rsbuild (all non-Starter presets), and Next.js (Customize mode).
+
+### Authentication
+
+**Frontend (Next.js, Vite, Rsbuild):**
+Clerk, NextAuth.js (Next.js only), Auth0, Firebase Auth
+
+**Backend (Express, Fastify):**
+JWT, Session-based, OAuth (Passport.js)
+
+### Project Structure
+
+**React frontends (Vite, Rsbuild):**
+
+| Structure | Description |
+|-----------|-------------|
+| Simple | Flat `src/` with basic components — good for prototypes |
+| Feature-based | Organized by feature (`features/auth/`, `features/dashboard/`) with shared hooks, services, and utils |
+| Domain-driven | Enterprise pattern with `domains/`, `shared/`, `app/`, and `infrastructure/` layers |
+
+**Express:**
+Simple, Modular (by feature), or Layered (Controller-Service-Repository)
+
+**Fastify:**
+Simple, Modular (by feature), or Plugin-based (Fastify plugins)
+
+### React Feature Categories
+
+These 7 categories are available for Vite + React and Rsbuild + React projects (Custom preset, or as additions to Standard/Full):
 
-# Create an Express API with MongoDB and JWT auth
-npx build-app-with my-api
+| Category | Options |
+|----------|---------|
+| **Routing** | React Router DOM |
+| **State Management** | Redux Toolkit, Zustand, MobX, Recoil |
+| **Forms** | React Hook Form, Formik |
+| **Animations** | Framer Motion, React Spring, React Transition Group |
+| **Drag & Drop** | React DnD, React Beautiful DnD |
+| **UI Libraries** | Ant Design, Bootstrap, MUI, Chakra UI, shadcn/ui, Mantine |
+| **Utilities** | React Icons, React Toastify, React Table, React Select, React Helmet, react-i18next, Storybook |
+
+### Backend Features (Express / Fastify)
+
+| Category | Options |
+|----------|---------|
+| **Databases** | MongoDB, PostgreSQL, MySQL, SQLite |
+| **ORMs** | Mongoose (MongoDB), Prisma (PostgreSQL/SQLite), Sequelize (MySQL) |
+| **Security** | CORS, Helmet (Express), Rate limiting (Fastify) |
+| **Logging** | Morgan (request logging), Winston (structured logging) |
+| **Validation** | Express Validator / Fastify validation |
+| **API Docs** | Swagger / OpenAPI |
+| **Environment** | dotenv (.env support) |
+| **Testing** | Jest test setup with example tests |
+| **Docker** | Dockerfile and docker-compose configuration |
+
+Fastify also supports **WebSocket** and **GraphQL** as additional feature choices.
+
+## Interactive Flow
+
+Running `npx build-app-with` walks you through these steps:
 
-# Create a Vite React app with all the bells and whistles
-npx build-app-with my-react-app
 ```
+? Choose your app framework:
+  > Next.js (React Full-stack)
+    Vite + React (Frontend)
+    Rsbuild + React (Frontend)
+    Express.js (Node.js Backend)
+    Fastify (Node.js Backend)
+
+? Choose your project setup:          # React frontends only
+  > Starter / Standard / Full / Custom
+
+? What is your project name?          # Skipped if provided via CLI
+  > my-app
 
-## 🏃‍♂️ Getting Started After Creation
+? Use TypeScript?                     # Vite Custom preset only
+  > Yes / No
 
-Once your project is created:
+? Choose a CSS framework:             # Frontend frameworks
+  > Tailwind CSS / Bootstrap / MUI / ...
+
+? Choose authentication strategy:     # Customize mode
+  > Clerk / NextAuth.js / Auth0 / ...
+
+? Select Routing features:            # React feature categories
+? Select State Management features:
+? Select Forms features:
+  ...
+
+? After setup, do you want to:
+  [ ] Initialize a Git repository
+  [ ] Install dependencies
+  [ ] Run the development server
+```
+
+## After Project Creation
 
 ```bash
-cd your-app-name
-npm install          # Install dependencies
-npm run dev          # Start development server
+cd my-app
+npm install       # If not done during setup
+npm run dev       # Start development server
 ```
 
-**For Next.js/Vite**: Open http://localhost:3000
-**For Express/Fastify**: API runs on http://localhost:3000
+**Default ports:**
 
-## 🤝 Contributing
+| Framework | Port | URL |
+|-----------|------|-----|
+| Next.js | 3000 | http://localhost:3000 |
+| Vite + React | 5173 | http://localhost:5173 |
+| Rsbuild + React | 3000 | http://localhost:3000 |
+| Express.js | 3000 | http://localhost:3000 |
+| Fastify | 3000 | http://localhost:3000 |
 
-We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+## Project Structure Example
 
-## 📄 License
+A typical **Vite + React** project with the **feature-based** structure:
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+```
+my-app/
+├── public/
+├── src/
+│   ├── main.tsx
+│   ├── App.tsx
+│   ├── index.css
+│   ├── components/
+│   │   └── common/
+│   │       └── Header.tsx
+│   ├── features/
+│   │   ├── auth/
+│   │   │   └── Login.tsx
+│   │   └── dashboard/
+│   │       └── Dashboard.tsx
+│   ├── hooks/
+│   │   └── useLocalStorage.ts
+│   ├── services/
+│   │   └── api.ts
+│   ├── utils/
+│   │   └── helpers.ts
+│   └── types/
+│       └── index.ts
+├── .env
+├── .gitignore
+├── package.json
+├── vite.config.ts
+└── tsconfig.json
+```
 
----
+## Why Build App With?
 
-**Why Build App With?**
-- ⚡ **Fast setup** - Get a complete project in under 2 minutes
-- 🏗️ **Production-ready** - Best practices and security built-in
-- 🎛️ **Flexible** - Choose exactly what you need, nothing you don't
-- 📚 **Well-documented** - Clear examples and helpful error messages
-- 🔄 **Up-to-date** - Always uses the latest stable versions
+- **Fast** — Go from zero to a running project in seconds
+- **Production-ready** — Security best practices, proper project structure, and sensible defaults built in
+- **Flexible** — 5 frameworks, 4 presets, 30+ configurable features — pick exactly what you need
+- **Secure** — Path traversal prevention, command injection guards, and secret generation for backend projects
+- **Current** — Uses latest stable versions of all dependencies
 
+## Contributing
 
-## 📞 Support
+Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
 
-- 🐛 Issues: [GitHub Issues](https://github.com/imnayakshubham/build-app-with/issues)
-- 💬 Discussions: [GitHub Discussions](https://github.com/imnayakshubham/build-app-with/discussions)
+## License
 
-**Made with ❤️ by the [Build App With](https://github.com/imnayakshubham/build-app-with)**
+MIT — see [LICENSE](LICENSE) for details.
 
+## Support
 
-**Start building your next great idea today!** 🚀
+- Issues: [GitHub Issues](https://github.com/imnayakshubham/build-app-with/issues)
+- Discussions: [GitHub Discussions](https://github.com/imnayakshubham/build-app-with/discussions)

package/dist/build-app-with.mjs

@@ -205,7 +205,8 @@ const vite_features_DEPENDENCY_VERSIONS = {
     'react-i18next': '^14.0.0',
     'i18next': '^23.7.11',
     '@storybook/react': '^7.6.3',
-    '@storybook/react-vite': '^7.6.3'
+    '@storybook/react-vite': '^7.6.3',
+    'storybook-builder-rsbuild': '^0.1.1'
 };
 
 // Feature to Package Mapping
@@ -330,7 +331,7 @@ function applyPresetFeatures(answers, preset) {
  * @returns {boolean} True if feature prompts should be shown
  */
 function shouldShowFeaturePrompts(answers) {
-  return answers.framework === 'vite-react' &&
+  return (answers.framework === 'vite-react' || answers.framework === 'rsbuild-react') &&
     answers.vitePreset &&
     answers.vitePreset !== VITE_PRESETS.STARTER;
 }
@@ -369,6 +370,8 @@ function getProperty(answers, property, defaultValue = '') {
 
 
 
+const isReactFrontend = (fw) => fw === 'vite-react' || fw === 'rsbuild-react';
+
 function getFeaturePrompts(currentAnswers) {
     return [
         {
@@ -381,7 +384,7 @@ function getFeaturePrompts(currentAnswers) {
             when: (default_answers) => {
                 const answers = default_answers ?? currentAnswers
                 return (answers.setupType === 'customize' || answers.allowCustomFeatures) &&
-                    answers.framework === 'vite-react'
+                    isReactFrontend(answers.framework)
             }
         },
         {
@@ -497,6 +500,7 @@ function getInitialPrompts(cliProjectName = null) {
             choices: [
                 { name: 'Next.js (React Full-stack)', value: 'nextjs' },
                 { name: 'Vite + React (Frontend)', value: 'vite-react' },
+                { name: 'Rsbuild + React (Frontend)', value: 'rsbuild-react' },
                 { name: 'Express.js (Node.js Backend)', value: 'express' },
                 { name: 'Fastify (Node.js Backend)', value: 'fastify' }
             ]
@@ -513,7 +517,7 @@ function getInitialPrompts(cliProjectName = null) {
                 { name: '⚙️  Custom - Advanced (choose features manually)', value: 'custom' }
             ],
             default: 1, // Standard is default
-            when: (answers) => answers.framework === 'vite-react'
+            when: (answers) => isReactFrontend(answers.framework)
         },
         // 2b. Setup type for other frameworks
         {
@@ -524,7 +528,7 @@ function getInitialPrompts(cliProjectName = null) {
                 { name: 'Default (Quick start with recommended settings)', value: 'default' },
                 { name: 'Customize (Advanced: choose your own settings)', value: 'customize' }
             ],
-            when: (answers) => answers.framework !== 'vite-react'
+            when: (answers) => !isReactFrontend(answers.framework)
         }
     ];
 
@@ -584,8 +588,8 @@ function getCustomizationPrompts(initialAnswers) {
             ],
             when: (answers) => {
                 const merged = { ...initialAnswers, ...answers };
-                // For Vite: show for non-Starter presets
-                if (merged.framework === 'vite-react') {
+                // For React frontends (Vite/Rsbuild): show for non-Starter presets
+                if (isReactFrontend(merged.framework)) {
                     return merged.vitePreset !== 'starter';
                 }
                 // Only show CSS framework for frontend frameworks
@@ -610,7 +614,7 @@ function getCustomizationPrompts(initialAnswers) {
             default: 'clerk',
             when: (answers) => {
                 const merged = { ...initialAnswers, ...answers };
-                return merged.setupType === 'customize' && ['nextjs', 'vite-react'].includes(merged.framework);
+                return merged.setupType === 'customize' && ['nextjs', 'vite-react', 'rsbuild-react'].includes(merged.framework);
             }
         },
         {
@@ -624,7 +628,7 @@ function getCustomizationPrompts(initialAnswers) {
             ],
             when: (answers) => {
                 const merged = { ...initialAnswers, ...answers };
-                return merged.setupType === 'customize' && merged.framework === 'vite-react';
+                return merged.setupType === 'customize' && isReactFrontend(merged.framework);
             }
         },
         // ESLint and Prettier prompts hidden per user request
@@ -652,14 +656,14 @@ function getCustomizationPrompts(initialAnswers) {
         }
     ];
 
-    // Add feature prompts for Vite + React users
+    // Add feature prompts for React frontend users (Vite + Rsbuild)
     const featurePrompts = getFeaturePrompts();
     featurePrompts.forEach(prompt => {
         const originalWhen = prompt.when;
         prompt.when = (answers) => {
             const merged = { ...initialAnswers, ...answers };
-            // Show for Vite + React framework
-            if (merged.framework === 'vite-react') {
+            // Show for React frontend frameworks (Vite / Rsbuild)
+            if (isReactFrontend(merged.framework)) {
                 // For Custom preset: show all feature prompts
                 if (merged.vitePreset === 'custom') {
                     return originalWhen ? originalWhen(merged) : true;
@@ -701,8 +705,8 @@ function getPrompts(cliProjectName = null) {
                 { name: 'Vanilla CSS', value: 'vanilla' }
             ],
             when: (answers) => {
-                // For Vite: show for non-Starter presets
-                if (answers.framework === 'vite-react') {
+                // For React frontends (Vite/Rsbuild): show for non-Starter presets
+                if (isReactFrontend(answers.framework)) {
                     return answers.vitePreset !== 'starter';
                 }
                 // Only show CSS framework for frontend frameworks
@@ -725,7 +729,7 @@ function getPrompts(cliProjectName = null) {
                 { name: 'None', value: 'none' }
             ],
             default: 'clerk',
-            when: (answers) => answers.setupType === 'customize' && ['nextjs', 'vite-react'].includes(answers.framework)
+            when: (answers) => answers.setupType === 'customize' && ['nextjs', 'vite-react', 'rsbuild-react'].includes(answers.framework)
         },
         {
             type: 'list',
@@ -736,7 +740,7 @@ function getPrompts(cliProjectName = null) {
                 { name: 'Simple (Basic structure)', value: 'simple' },
                 { name: 'Domain-driven (Advanced architecture)', value: 'domain-driven' }
             ],
-            when: (answers) => answers.setupType === 'customize' && answers.framework === 'vite-react'
+            when: (answers) => answers.setupType === 'customize' && isReactFrontend(answers.framework)
         },
         // ESLint and Prettier prompts hidden per user request
         {
@@ -768,7 +772,7 @@ function getPrompts(cliProjectName = null) {
     featurePrompts.forEach(prompt => {
         const originalWhen = prompt.when;
         prompt.when = (answers) => {
-            if (answers.framework === 'vite-react') {
+            if (isReactFrontend(answers.framework)) {
                 if (answers.vitePreset === 'custom') {
                     return originalWhen ? originalWhen(answers) : true;
                 }
@@ -793,9 +797,13 @@ function finalizeAnswers(answers) {
     if (answers.framework === 'vite-react' && answers.typescript === undefined) {
         answers.typescript = true;
     }
+    // Rsbuild always uses TypeScript
+    if (answers.framework === 'rsbuild-react') {
+        answers.typescript = true;
+    }
 
-    // Apply Vite preset features
-    if (answers.framework === 'vite-react' && answers.vitePreset) {
+    // Apply preset features for React frontends (Vite / Rsbuild)
+    if (isReactFrontend(answers.framework) && answers.vitePreset) {
         // Set setupType for compatibility with existing code
         answers.setupType = presetToSetupType(answers.vitePreset);
 
@@ -975,7 +983,7 @@ function generatePackageJson(answers) {
   }
 
   // Automatically add TanStack Query and Axios for React-based apps
-  if (answers.framework === 'vite-react' || answers.framework === 'nextjs') {
+  if (answers.framework === 'vite-react' || answers.framework === 'rsbuild-react' || answers.framework === 'nextjs') {
     packageJson.dependencies['@tanstack/react-query'] = '^5.14.2';
     packageJson.dependencies['axios'] = '^1.6.2';
     packageJson.devDependencies['@tanstack/react-query-devtools'] = '^5.14.2';
@@ -1170,14 +1178,14 @@ function getOverlayDependencies(answers) {
       'react-select': ['react-select'],
       'react-helmet': ['react-helmet-async'],
       'react-i18next': ['react-i18next', 'i18next'],
-      'storybook': ['@storybook/react', '@storybook/react-vite']
+      'storybook': ['@storybook/react', answers.framework === 'rsbuild-react' ? 'storybook-builder-rsbuild' : '@storybook/react-vite']
     };
     answers.utilities.forEach(util => {
       const pkgs = utilPkgMap[util] || [];
       pkgs.forEach(pkg => {
         const version = vite_features_DEPENDENCY_VERSIONS[pkg] || 'latest';
         // Storybook packages are dev dependencies
-        if (pkg.startsWith('@storybook/')) {
+        if (pkg.startsWith('@storybook/') || pkg === 'storybook-builder-rsbuild') {
           devDependencies[pkg] = version;
         } else {
           dependencies[pkg] = version;
@@ -4057,7 +4065,9 @@ const ALLOWED_COMMANDS = {
             'create-next-app@latest',
             'create-next-app',
             'create-vite@latest',
-            'create-vite'
+            'create-vite',
+            'create-rsbuild@latest',
+            'create-rsbuild'
         ],
         allowedFlags: [
             '--version', '--help',
@@ -4151,6 +4161,11 @@ function validateCommandArgs(command, args) {
         if (npxCommand.startsWith('create-vite')) {
             return validateCreateViteArgs(args.slice(1), config);
         }
+
+        // For create-rsbuild, validate remaining arguments
+        if (npxCommand.startsWith('create-rsbuild')) {
+            return validateCreateRsbuildArgs(args.slice(1), config);
+        }
     }
 
     for (const arg of args) {
@@ -4272,6 +4287,66 @@ function validateCreateViteArgs(args, config) {
     return true;
 }
 
+/**
+ * Validate create-rsbuild specific arguments
+ * @param {string[]} args - Arguments after create-rsbuild command
+ * @param {Object} config - NPX command configuration
+ * @returns {boolean} True if arguments are valid
+ */
+function validateCreateRsbuildArgs(args, config) {
+    const VALID_TEMPLATES = ['react', 'react-ts'];
+
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+
+        // Check for shell metacharacters
+        if (/[;&|`$(){}[\]<>\\]/.test(arg)) {
+            logger.error(`Argument contains shell metacharacters: ${arg}`);
+            return false;
+        }
+
+        if (arg.startsWith('-')) {
+            // It's a flag
+            if (!config.allowedFlags.includes(arg)) {
+                logger.error(`Flag not in allowlist: ${arg}`);
+                return false;
+            }
+
+            // Handle --template flag with value
+            if (arg === '--template' && i + 1 < args.length) {
+                const template = args[i + 1];
+                if (!VALID_TEMPLATES.includes(template)) {
+                    logger.error(`Invalid Rsbuild template: ${template}`);
+                    return false;
+                }
+                i++; // Skip the next argument as it's the value for this flag
+            }
+        } else {
+            // It's likely a project name - validate it
+            if (!validatePackageName(arg) && !/^[a-zA-Z0-9-_]+$/.test(arg)) {
+                logger.error(`Invalid project name: ${arg}`);
+                return false;
+            }
+        }
+    }
+
+    return true;
+}
+
+/**
+ * Validate and sanitize Rsbuild project creation arguments
+ * @param {string} projectName - Project name
+ * @param {Object} options - Rsbuild options
+ * @returns {string[]} Sanitized arguments array
+ */
+function sanitizeRsbuildArgs(projectName, options = {}) {
+    const sanitizedName = sanitizeProjectName(projectName);
+    const args = ['create-rsbuild@latest', sanitizedName];
+    const template = options.typescript ? 'react-ts' : 'react';
+    args.push('--template', template);
+    return args;
+}
+
 /**
  * Validate and sanitize Vite project creation arguments
  * @param {string} projectName - Project name
@@ -4734,6 +4809,347 @@ async function generateCreditsComponent(projectPath, answers) {
   await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(srcDir, 'components', 'Credits.jsx'), creditsComponent);
 }
 
+;// ./src/generators/rsbuild/rsbuild-project-generator.js
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Create the base Rsbuild project using create-rsbuild CLI
+ */
+async function createRsbuildBase(projectPath, answers) {
+  logger.debug('Creating base Rsbuild project...');
+
+  try {
+    const sanitizedArgs = sanitizeRsbuildArgs(answers.projectName, {
+      typescript: true // Rsbuild always uses TypeScript
+    });
+
+    await secureExec('npx', sanitizedArgs, {
+      stdio: 'pipe',
+      cwd: process.cwd(),
+      timeout: 300000 // 5 minutes
+    });
+
+    logger.debug('Base Rsbuild project created');
+  } catch (error) {
+    throw new Error(`Failed to create Rsbuild project: ${error.message}`);
+  }
+}
+
+/**
+ * Overlay customizations onto a scaffolded Rsbuild project.
+ * Assumes create-rsbuild has already run and created the base project.
+ * Reuses Vite file generators since the React code is build-tool agnostic.
+ */
+async function generateRsbuildProject(projectPath, answers) {
+  // Merge overlay dependencies into the scaffold's package.json
+  await rsbuild_project_generator_mergeOverlayDependencies(projectPath, answers);
+
+  // Generate rsbuild.config.ts (always TypeScript)
+  await generateRsbuildConfig(projectPath, answers);
+
+  // Generate Tailwind config if needed
+  if (answers.cssFramework === 'tailwind') {
+    const tailwindConfig = generateTailwindConfig(answers);
+    await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(projectPath, 'tailwind.config.js'), tailwindConfig);
+  }
+
+  // Generate ESLint config if requested
+  if (answers.eslint) {
+    const eslintConfig = generateESLintConfig(answers);
+    await external_fs_extra_["default"].writeJSON(external_path_namespaceObject.join(projectPath, '.eslintrc.json'), eslintConfig, { spaces: 2 });
+  }
+
+  // Generate Prettier config if requested
+  if (answers.prettier) {
+    const prettierConfig = generatePrettierConfig();
+    await external_fs_extra_["default"].writeJSON(external_path_namespaceObject.join(projectPath, '.prettierrc'), prettierConfig, { spaces: 2 });
+  }
+
+  // Remove default create-rsbuild assets we'll replace
+  await rsbuild_project_generator_removeDefaultAssets(projectPath);
+
+  // Generate project files (overlay mode - reuses Vite file generators)
+  await generateProjectFiles(projectPath, answers, { overlay: true });
+
+  // Generate Clerk authentication if selected
+  if (answers.authStrategy === 'clerk') {
+    await rsbuild_project_generator_generateClerkAuth(projectPath, answers);
+  }
+
+  // Generate .env.example (Rsbuild uses PUBLIC_ prefix)
+  await rsbuild_project_generator_generateEnvExample(projectPath, answers);
+
+  // Generate README (Rsbuild-specific)
+  await rsbuild_project_generator_generateReadme(projectPath, answers);
+
+  // Generate credits component
+  await rsbuild_project_generator_generateCreditsComponent(projectPath, answers);
+}
+
+/**
+ * Read the scaffold's package.json and merge in overlay dependencies
+ */
+async function rsbuild_project_generator_mergeOverlayDependencies(projectPath, answers) {
+  const pkgPath = external_path_namespaceObject.join(projectPath, 'package.json');
+  const existingPkg = await external_fs_extra_["default"].readJSON(pkgPath);
+  const overlay = getOverlayDependencies(answers);
+
+  existingPkg.dependencies = {
+    ...(existingPkg.dependencies || {}),
+    ...overlay.dependencies
+  };
+
+  existingPkg.devDependencies = {
+    ...(existingPkg.devDependencies || {}),
+    ...overlay.devDependencies
+  };
+
+  await external_fs_extra_["default"].writeJSON(pkgPath, existingPkg, { spaces: 2 });
+}
+
+/**
+ * Generate rsbuild.config.ts with project settings
+ */
+async function generateRsbuildConfig(projectPath, answers) {
+  const config = `import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/main.tsx'
+    }
+  },
+  server: {
+    port: 3000,
+    open: true
+  },
+  output: {
+    sourceMap: true
+  }
+});
+`;
+
+  await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(projectPath, 'rsbuild.config.ts'), config);
+}
+
+/**
+ * Remove default create-rsbuild assets that we'll replace with our own
+ */
+async function rsbuild_project_generator_removeDefaultAssets(projectPath) {
+  const filesToRemove = [
+    external_path_namespaceObject.join(projectPath, 'src', 'index.tsx'),
+    external_path_namespaceObject.join(projectPath, 'src', 'App.css'),
+    external_path_namespaceObject.join(projectPath, 'src', 'App.tsx')
+  ];
+
+  for (const filePath of filesToRemove) {
+    if (await external_fs_extra_["default"].pathExists(filePath)) {
+      await external_fs_extra_["default"].remove(filePath);
+    }
+  }
+}
+
+async function rsbuild_project_generator_generateReadme(projectPath, answers) {
+  const selectedFeatures = Array.isArray(answers.features) ? answers.features : [];
+  const allFeatures = [...selectedFeatures];
+  if (answers.authStrategy && answers.authStrategy !== 'none') {
+    allFeatures.push(answers.authStrategy);
+  }
+  if (answers.typescript) {
+    allFeatures.push('typescript');
+  }
+
+  const credits = generateCreditsSection('rsbuild-react', allFeatures);
+
+  const readme = `# ${answers.projectName}
+
+A React application built with Rsbuild and ${answers.cssFramework === 'vanilla' ? 'vanilla CSS' : answers.cssFramework}.
+
+## Features
+
+- \u26A1\uFE0F Rsbuild (Rspack) for fast development and building
+- \u269B\uFE0F React + TypeScript
+- \uD83C\uDFA8 ${answers.cssFramework === 'vanilla' ? 'Vanilla CSS' : answers.cssFramework}
+${answers.authStrategy && answers.authStrategy !== 'none' ? `- \uD83D\uDD10 ${answers.authStrategy === 'clerk' ? 'Clerk Authentication' : answers.authStrategy}` : ''}
+${selectedFeatures.length > 0 ? `- \uD83D\uDCE6 Additional packages: ${selectedFeatures.join(', ')}` : ''}
+
+## Getting Started
+
+1. Install dependencies:
+   \`\`\`bash
+   npm install
+   \`\`\`
+
+2. Start the development server:
+   \`\`\`bash
+   npm run dev
+   \`\`\`
+
+3. Build for production:
+   \`\`\`bash
+   npm run build
+   \`\`\`
+
+## Project Structure
+
+This project uses a ${answers.projectStructure || 'simple'} structure for better organization and maintainability.
+
+## Available Scripts
+
+- \`npm run dev\` - Start development server
+- \`npm run build\` - Build for production
+- \`npm run preview\` - Preview production build
+
+${answers.authStrategy === 'clerk' ? `
+## \uD83D\uDD10 Clerk Authentication Setup
+
+1. Sign up at [clerk.com](https://clerk.com)
+2. Create a new application
+3. Copy your API keys to \`.env.local\`:
+   \`\`\`bash
+   PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXX
+   \`\`\`
+
+   \u26A0\uFE0F  **Security Warning**: Never commit real API keys to version control!
+4. Configure your authentication settings in the Clerk dashboard
+` : ''}
+
+## License
+
+MIT
+
+${credits}
+`;
+
+  await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(projectPath, 'README.md'), readme);
+}
+
+async function rsbuild_project_generator_generateClerkAuth(projectPath, answers) {
+  const srcDir = external_path_namespaceObject.join(projectPath, 'src');
+  await external_fs_extra_["default"].ensureDir(srcDir);
+
+  // Generate Clerk provider (uses PUBLIC_ prefix for Rsbuild)
+  const clerkProvider = `import React from 'react';
+import { ClerkProvider } from '@clerk/clerk-react';
+
+const CLERK_PUBLISHABLE_KEY = import.meta.env.PUBLIC_CLERK_PUBLISHABLE_KEY;
+
+if (!CLERK_PUBLISHABLE_KEY) {
+  throw new Error('Missing Publishable Key');
+}
+
+export function ClerkProviderWrapper({ children }) {
+  return (
+    <ClerkProvider publishableKey={CLERK_PUBLISHABLE_KEY}>
+      {children}
+    </ClerkProvider>
+  );
+}
+`;
+
+  await external_fs_extra_["default"].ensureDir(external_path_namespaceObject.join(srcDir, 'components'));
+  await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(srcDir, 'components', 'ClerkProvider.jsx'), clerkProvider);
+
+  // Generate auth components
+  const signInComponent = `import React from 'react';
+import { SignIn } from '@clerk/clerk-react';
+
+export function SignInForm() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <SignIn />
+    </div>
+  );
+}
+`;
+
+  const signUpComponent = `import React from 'react';
+import { SignUp } from '@clerk/clerk-react';
+
+export function SignUpForm() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <SignUp />
+    </div>
+  );
+}
+`;
+
+  const userButtonComponent = `import React from 'react';
+import { UserButton } from '@clerk/clerk-react';
+
+export function UserProfile() {
+  return (
+    <div className="flex items-center gap-4">
+      <UserButton afterSignOutUrl="/" />
+    </div>
+  );
+}
+`;
+
+  await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(srcDir, 'components', 'SignInForm.jsx'), signInComponent);
+  await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(srcDir, 'components', 'SignUpForm.jsx'), signUpComponent);
+  await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(srcDir, 'components', 'UserProfile.jsx'), userButtonComponent);
+}
+
+async function rsbuild_project_generator_generateEnvExample(projectPath, answers) {
+  let envContent = `# API Configuration
+PUBLIC_API_URL=http://localhost:3000/api
+`;
+
+  if (answers.authStrategy === 'clerk') {
+    envContent += `
+# Clerk Authentication
+# WARNING: Replace with your actual Clerk API keys from https://clerk.com
+# Never commit real API keys to version control!
+PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXX
+`;
+  } else if (answers.authStrategy === 'auth0') {
+    envContent += `
+# Auth0 Configuration
+PUBLIC_AUTH0_DOMAIN=your-tenant.auth0.com
+PUBLIC_AUTH0_CLIENT_ID=your-client-id
+`;
+  } else if (answers.authStrategy === 'firebase-auth') {
+    envContent += `
+# Firebase Configuration
+PUBLIC_FIREBASE_API_KEY=your-api-key
+PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
+PUBLIC_FIREBASE_PROJECT_ID=your-project-id
+`;
+  }
+
+  await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(projectPath, '.env.example'), envContent);
+}
+
+async function rsbuild_project_generator_generateCreditsComponent(projectPath, answers) {
+  const srcDir = external_path_namespaceObject.join(projectPath, 'src');
+  await external_fs_extra_["default"].ensureDir(external_path_namespaceObject.join(srcDir, 'components'));
+
+  const selectedFeatures = Array.isArray(answers.features) ? answers.features : [];
+  const allFeatures = [...selectedFeatures];
+  if (answers.authStrategy && answers.authStrategy !== 'none') {
+    allFeatures.push(answers.authStrategy);
+  }
+  if (answers.typescript) {
+    allFeatures.push('typescript');
+  }
+
+  const creditsComponent = generateReactCreditsComponent('rsbuild-react', allFeatures);
+  await external_fs_extra_["default"].writeFile(external_path_namespaceObject.join(srcDir, 'components', 'Credits.jsx'), creditsComponent);
+}
+
 ;// ./src/utils/path-security.js
 /**
  * Path security utilities to prevent directory traversal and path injection attacks
@@ -9470,6 +9886,7 @@ function successMessage(projectName) {
 
 
 
+
 async function createApp(cliProjectName = null) {
   try {
     // === Stage 1: Initial prompts (framework, preset, project name, TypeScript) ===
@@ -9487,6 +9904,7 @@ async function createApp(cliProjectName = null) {
 
     const isNext = initialAnswers.framework === 'nextjs';
     const isVite = initialAnswers.framework === 'vite-react';
+    const isRsbuild = initialAnswers.framework === 'rsbuild-react';
 
     // === Stage 2: Run official scaffold for frameworks that use CLI tools ===
     if (isVite) {
@@ -9503,6 +9921,19 @@ async function createApp(cliProjectName = null) {
         logger.stopSpinner(false, 'Failed to create Vite project');
         throw error;
       }
+    } else if (isRsbuild) {
+      if (initialAnswers.typescript === undefined) {
+        initialAnswers.typescript = true;
+      }
+
+      const spinner = logger.startSpinner('Creating Rsbuild project...');
+      try {
+        await createRsbuildBase(projectPath, initialAnswers);
+        logger.stopSpinner(true, 'Rsbuild project scaffold created!');
+      } catch (error) {
+        logger.stopSpinner(false, 'Failed to create Rsbuild project');
+        throw error;
+      }
     } else if (!isNext) {
       // For Express/Fastify, create directory ourselves
       logger.debug(`Creating project directory: ${projectPath}`);
@@ -9512,7 +9943,7 @@ async function createApp(cliProjectName = null) {
     // Next.js: directory creation is handled by create-next-app inside generateNextJSProject
 
     // Derive setupType from vitePreset so customization prompts can gate on it
-    if (isVite && initialAnswers.vitePreset) {
+    if ((isVite || isRsbuild) && initialAnswers.vitePreset) {
       initialAnswers.setupType = presetToSetupType(initialAnswers.vitePreset);
     }
 
@@ -9534,6 +9965,15 @@ async function createApp(cliProjectName = null) {
         logger.stopSpinner(false, 'Failed to customize project');
         throw error;
       }
+    } else if (isRsbuild) {
+      const spinner = logger.startSpinner('Customizing project...');
+      try {
+        await generateRsbuildProject(projectPath, answers);
+        logger.stopSpinner(true, 'Project customized successfully!');
+      } catch (error) {
+        logger.stopSpinner(false, 'Failed to customize project');
+        throw error;
+      }
     } else if (isNext) {
       await generateNextJSProject(projectPath, answers);
     } else if (answers.framework === 'express') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "build-app-with",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "🚀 Interactive CLI tool to quickly create modern web applications. Use with 'npx build-app-with my-app' or install globally. Choose from React (Next.js/Vite), Node.js backends (Express/Fastify), with built-in TypeScript, authentication, databases, and more.",
   "main": "index.js",
   "type": "module",