create-zs3-app

Generador interactiu de projectes amb configuració estandarditzada. Crea projectes backend i frontend amb TypeScript o JavaScript, linting, formatació i VS Code configurats automàticament.

Ús ràpid

npx @el-teu-username/create-zs3-app

O amb instal·lació global:

npm install -g @el-teu-username/create-zs3-app
create-zs3-app

Arguments CLI

Es pot saltar total o parcialment el wizard passant arguments per línia de comandes. Si en falten alguns, el wizard només pregunta els que falten.

| Argument | Valors | Descripció | |---|---|---| | --type | backend, frontend, fullstack | Tipus de projecte | | --name | text (a-z0-9-_) | Nom del projecte | | --variant | ts, vanilla | TypeScript o JavaScript | | --framework | express, zs3, express-zs3, none | Framework addicional | | --description | text | Descripció del projecte | | --author | text | Autor del projecte | | --git / --no-git | — | Inicialitzar repositori Git | | --dry-run | — | Mostra els fitxers sense crear res | | -h, --help | — | Mostra l'ajuda i surt |

Exemple sense cap pregunta interactiva:

npx @el-teu-username/create-zs3-app --type backend --name my-api --variant ts --framework express --author "Joan" --git

Exemple parcial (el wizard pregunta el que falta):

npx @el-teu-username/create-zs3-app --type frontend --name my-app

Exemple fullstack (Express + zs3-ui-components):

npx @el-teu-username/create-zs3-app --type fullstack --name my-app --variant ts --framework express-zs3 --git

Es pot combinar amb --dry-run:

npx @el-teu-username/create-zs3-app --type backend --variant ts --name test --dry-run

Tipus de projectes disponibles

| Template | Stack | |---|---| | Backend (TypeScript) | Node.js + TypeScript + dotenv | | Backend (TypeScript + Express) | Node.js + TypeScript + Express + dotenv | | Backend (JavaScript) | Node.js + JavaScript + dotenv | | Backend (JavaScript + Express) | Node.js + JavaScript + Express + dotenv | | Frontend (TypeScript) | Vite + TypeScript | | Frontend (TypeScript + zs3-ui-components) | Vite + TypeScript + zs3-ui-components | | Frontend (JavaScript) | Vite + JavaScript | | Frontend (JavaScript + zs3-ui-components) | Vite + JavaScript + zs3-ui-components | | Fullstack | Monorepo (npm workspaces) amb backend + frontend combinats dinàmicament |

Fullstack: No hi ha templates estàtics fullstack. El generador composa dinàmicament un monorepo combinant un template backend i un frontend dels 8 existents, suportant les 8 combinacions possibles. Utilitza concurrently per executar backend i frontend simultàniament.

Wizard interactiu

El generador fa les preguntes següents:

1. Tipus de projecte: Backend, Frontend o Fullstack
2. Nom del projecte: Nom del directori (lletres minúscules, números, guions)
3. Descripció: Descripció del projecte (opcional)
4. Autor: Nom de l'autor (opcional)
5. Git: Si vols inicialitzar un repositori Git
6. Variant: TypeScript o Vanilla (JavaScript)
7. Framework: Express (backend), zs3-ui-components (frontend), o ambdós per separat (fullstack)

Abans de crear res, mostra un resum per confirmar.

Exemple

$ npx @el-teu-username/create-zs3-app

🚀 Generador de projectes

? Quin tipus de projecte vols crear? Backend
? Nom del projecte: my-api
? Descripció del projecte: API REST
? Autor: El meu nom
? Inicialitzar repositori Git? Sí
? Quina variant vols utilitzar? TypeScript
? Vols utilitzar Express? Sí

📋 Resum del projecte:

  Tipus:             Backend (TypeScript + Express)
  Nom:               my-api
  Descripció:        API REST
  Autor:             El meu nom
  Git:               Sí
  Express:           Sí

? Vols crear el projecte amb aquesta configuració? Sí

📦 Creant projecte...

✓ Repositori Git inicialitzat

✨ Projecte creat amb èxit!

Passos següents:

  cd my-api
  npm install
  npm run dev

Què inclou cada projecte generat

Tots els projectes inclouen:

• ESLint 9 amb flat config i regles de qualitat de codi
• Prettier per formatació automàtica
• EditorConfig per consistència entre editors
• Configuració de VS Code (settings + extensions recomanades)
• Scripts npm predefinits (dev, lint, lint:fix, format, format:check)
• .gitignore configurat

Els projectes TypeScript afegeixen a més:

• tsconfig.json amb configuració estricta
• Scripts addicionals (build, type-check)
• Regles ESLint per TypeScript (no-explicit-any, no-floating-promises, etc.)

Scripts disponibles als projectes generats

Fullstack (monorepo)

npm run dev            # Inicia backend i frontend simultàniament
npm run dev:backend    # Només backend
npm run dev:frontend   # Només frontend
npm run build          # Build de producció
npm run lint           # Lint de tot el projecte
npm run format         # Formatar tot el projecte

Backend

npm run dev        # Desenvolupament amb hot reload
npm start          # Producció
npm run lint       # Analitzar codi
npm run format     # Formatar codi

Frontend

npm run dev        # Servidor de desenvolupament Vite
npm run build      # Build de producció
npm run preview    # Previsualitzar build
npm run lint       # Analitzar codi
npm run format     # Formatar codi

Requisits

• Node.js >= 18

Llicència

MIT