create-cfw-app

CLI para crear aplicaciones SPA (Single Page Application) para CloudFramework.

🚀 Uso rápido

npx create-cfw-app mi-app

📦 Frameworks disponibles

| Framework | Comando | UI Library | |-----------|---------|------------| | React | --framework react | Tailwind CSS | | React + shadcn/ui | --framework react-shadcn | shadcn/ui + Tailwind | | Vue 3 | --framework vue3 | Tailwind CSS | | Vue 3 + Vuetify | --framework vue3-vuetify | Vuetify 3 + Material Design |

Todos los frameworks soportan JavaScript y TypeScript.

# Ver frameworks disponibles
npx create-cfw-app --list

⚡ Crear proyecto

Modo interactivo

npx create-cfw-app

Modo rápido (JavaScript)

# React básico
npx create-cfw-app mi-app --framework react -y

# React + shadcn/ui
npx create-cfw-app mi-app --framework react-shadcn -y

# Vue 3 básico
npx create-cfw-app mi-app --framework vue3 -y

# Vue 3 + Vuetify
npx create-cfw-app mi-app --framework vue3-vuetify -y

Con TypeScript

# React + TypeScript
npx create-cfw-app mi-app --framework react --typescript -y

# React + shadcn/ui + TypeScript
npx create-cfw-app mi-app --framework react-shadcn -t -y

# Vue 3 + TypeScript
npx create-cfw-app mi-app --framework vue3 --typescript -y

# Vue 3 + Vuetify + TypeScript
npx create-cfw-app mi-app --framework vue3-vuetify -t -y

Con Firebase

npx create-cfw-app mi-app \
  --framework react-shadcn \
  --typescript \
  --firebase-project "mi-proyecto" \
  --firebase-hosting-prod "mi-app"

🔧 Comandos del CLI

Crear proyecto

npx create-cfw-app [nombre] [opciones]

| Opción | Descripción | |--------|-------------| | -f, --framework <fw> | Framework (react, react-shadcn, vue3, vue3-vuetify) | | -t, --typescript | Usar TypeScript | | --css-prefix <prefix> | Prefijo CSS para aislamiento | | --port <number> | Puerto de desarrollo (default: 4000) | | --firebase-project <id> | ID del proyecto Firebase | | --firebase-hosting-prod <n> | Hosting Firebase producción | | -y, --yes | Usar valores por defecto | | -l, --list | Listar frameworks |

Añadir página

npx create-cfw-app add <ruta>

# Ejemplos
npx create-cfw-app add about
npx create-cfw-app add contact
npx create-cfw-app add users/:id
npx create-cfw-app add products/:category/:id

El comando detecta automáticamente si el proyecto usa TypeScript y genera archivos .tsx/.ts o .jsx/.js según corresponda.

Añadir store

npx create-cfw-app add-store

• React: Crea store con Zustand (index.js o index.ts)
• Vue 3: Crea store con Pinia (index.js o index.ts)

Listar rutas

npx create-cfw-app routes

📁 Estructura del proyecto

JavaScript

mi-app/
├── src/
│   ├── pages/              # Páginas de la aplicación
│   │   ├── Home.jsx
│   │   └── NotFound.jsx
│   ├── shared/
│   │   ├── components/     # Layout y componentes compartidos
│   │   └── utils/
│   │       └── router.jsx  # Router para CloudFramework
│   ├── App.jsx             # Definición de rutas
│   ├── main.jsx            # Punto de entrada
│   └── index.css
├── cfw.config.js           # Configuración del proyecto
├── vite.config.js
└── package.json

TypeScript

mi-app/
├── src/
│   ├── pages/
│   │   ├── Home.tsx
│   │   └── NotFound.tsx
│   ├── shared/
│   │   ├── components/
│   │   │   └── Layout.tsx
│   │   └── utils/
│   │       └── router.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── tsconfig.json
├── cfw.config.js
├── vite.config.js
└── package.json

🔧 Scripts npm

| Comando | Descripción | |---------|-------------| | npm run dev | Servidor de desarrollo | | npm run build | Build de producción (incluye tsc para TypeScript) | | npm run preview | Preview del build | | npm run deploy | Deploy a Firebase (si configurado) |

🌐 URLs

| Entorno | URL | |---------|-----| | Desarrollo standalone | http://localhost:4000/cfwapp/ | | En CloudFramework | #http://localhost:4000/cfwapp/about | | Producción | https://tu-app.web.app/cfwapp/ |

📚 Documentación

• Tutorial completo: Ver TUTORIAL.md
• Desarrollo del CLI: Ver DEVELOPMENT.md

UI Libraries

• Tailwind CSS
• shadcn/ui
• Vuetify
• Material Design Icons

📝 Licencia

MIT © CloudFramework