create-sackapp

CLI publicado en npm que te ahorra 20 minutos de configuración cada vez que arrancas un proyecto React nuevo. Te hace cuatro preguntas y te deja una carpeta lista para npm run dev con:

• ⚡ Vite + React (TypeScript o JavaScript, tú eliges)
• 🎨 TailwindCSS v4 (sin postcss config; plugin oficial de Vite)
• 🧩 shadcn/ui inicializado con el componente Button
• 🎯 Alias @/ funcionando en Vite y tsconfig (sin baseUrl deprecado)
• 🛠 cn() helper preescrito en src/lib/utils
• 📌 .nvmrc con Node 24 (evita el aviso de Vercel de deprecación de Node 18)
• 🎁 Opcionales: axios · zustand · sweetalert2 · toastify-js · useHooks · react-router-dom · @supabase/supabase-js

Uso

npm create sackapp@latest
# o
npx create-sackapp

Te pregunta:

1. Nombre de la app (default mi-app)
2. Lenguaje — TypeScript (recomendado) o JavaScript
3. shadcn/ui — sí / no (por defecto sí; instala componente Button)
4. Dependencias extra (multi-select con <space> para marcar)

Al terminar:

cd mi-app
npm run dev

Y ya tienes un proyecto funcionando con base moderna, sin configuración inicial que hacer.

Qué hace por dentro

1. npm create vite@latest <app> -- --template react[-ts]
2. npm install
3. Instala tailwindcss + @tailwindcss/vite (v4).
4. Reescribe src/index.css a un simple @import "tailwindcss";.
5. Reescribe vite.config.[jt]s con:
   • Plugin @tailwindcss/vite
   • Alias @/ → ./src/ usando fileURLToPath(new URL(...)) (compatible con ESM, sin __dirname roto).
6. Añade paths: { "@/*": ["./src/*"] } en tsconfig.app.json (o jsconfig.json si es JS). Sin baseUrl — no más warnings de deprecación de TS 7.
7. Instala clsx + tailwind-merge + class-variance-authority + lucide-react.
8. Escribe src/lib/utils.[jt]s con cn(...) listo para pegar a shadcn.
9. (Si eliges shadcn) Escribe components.json con config sensata y corre npx shadcn@latest add button --yes --overwrite.
10. Escribe .nvmrc con 24.
11. Instala los extras que hayas marcado.

Todo no-interactivo: no se cuelga esperando confirmaciones.

Estructura generada

mi-app/
├── src/
│   ├── App.tsx (o .jsx)
│   ├── main.tsx (o .jsx)
│   ├── index.css          # @import "tailwindcss"
│   ├── lib/
│   │   └── utils.ts       # cn(...) helper
│   └── components/
│       └── ui/
│           └── button.tsx # shadcn/ui Button
├── vite.config.ts         # con alias @/ (ESM correcto)
├── tsconfig.app.json      # con paths, sin baseUrl
├── components.json        # config shadcn
├── .nvmrc                 # 24
└── package.json           # ESM

Comparación con la versión anterior

| | v1.x | v2.0 | |---|---|---| | Tailwind | v3 (con postcss config) | v4 (plugin de Vite, sin postcss) | | Alias en ESM | __dirname roto | ✅ fileURLToPath(new URL(...)) | | TS config | con baseUrl deprecado | ✅ solo paths | | Elección de lenguaje | forzaba TS + template JS | ✅ prompt TS / JS | | shadcn init | interactivo (colgaba) | ✅ config manual + add --yes | | Node version | no configurado | ✅ .nvmrc = 24 | | Extras | 5 opciones | ✅ 7 (añade toastify, supabase) |

Desarrollo del CLI

git clone https://github.com/DarkSack/create-sackapp.git
cd create-sackapp
npm install
node index.js        # probar localmente

Publicar una versión nueva en npm:

npm version [patch|minor|major]
npm publish

Hecho con 💻 y ☕ por Sack.