---
name: init_web_app
kind: pipeline
lang: bash
domain: pipelines
version: "1.0.0"
purity: impure
signature: "init_web_app(nombre: string, [--port N], [--with-auth], [--with-db]) -> void"
description: "Scaffold de full-stack app: Go HTTP API backend + React frontend con Mantine y @fn_library. Extiende init_api_app anadiendo frontend/ con pnpm + vite + react + mantine. Genera vite.config.ts con proxy al backend y alias @fn_library, src/main.tsx con MantineProvider, src/App.tsx con AppShell, src/pages/Home.tsx con ejemplo consumiendo /api/v1/status."
tags: [init, scaffold, web, fullstack, frontend, pipeline, bash, launcher]
uses_functions:
  - assert_command_exists_bash_shell
  - http_serve_go_infra
  - http_router_go_infra
  - http_middleware_chain_go_infra
  - http_logger_middleware_go_infra
  - http_cors_middleware_go_infra
  - http_json_response_go_infra
  - http_error_response_go_infra
  - migration_up_go_infra
  - mantine_provider_ts_ui
  - app_shell_ts_ui
uses_types: []
returns: []
returns_optional: false
error_type: "error_go_core"
imports: []
params:
  - name: nombre
    desc: "nombre de la app a crear (apps/{nombre}/)"
  - name: "--port"
    desc: "puerto del backend HTTP (default 8080); el frontend usa 5173 con proxy"
  - name: "--with-auth"
    desc: "anade jwt_middleware + handlers login/register + tabla users al backend"
  - name: "--with-db"
    desc: "anade store.go con helpers CRUD y setup SQLite al backend"
output: "app full-stack en apps/{nombre}/ con backend Go (main.go) y frontend/ (vite + react + mantine). Dev: terminal 1 go run .; terminal 2 cd frontend && pnpm dev."
tested: false
tests: []
test_file_path: ""
example: "fn run init_web_app my_dashboard --with-auth"
file_path: "bash/functions/pipelines/init_web_app.sh"
---

## Sinopsis

```bash
fn run init_web_app <nombre> [--port N] [--with-auth] [--with-db]
```

## Ejemplo rapido

```bash
fn run init_web_app inventory_dashboard --with-auth
cd apps/inventory_dashboard
make install         # pnpm install del frontend
# Terminal 1:
CGO_ENABLED=1 go run .
# Terminal 2:
cd frontend && pnpm dev
# → http://localhost:5173 (frontend) proxea a :8080 (backend)
```

## Archivos generados

Todos los de `init_api_app`, mas:

| Archivo | Descripcion |
|---------|-------------|
| `frontend/package.json` | pnpm, vite, react, @mantine/core, @tabler/icons-react |
| `frontend/vite.config.ts` | Proxy `/api` y `/health` al backend + alias `@fn_library` |
| `frontend/tsconfig.json` | TS strict con paths `@fn_library/*` |
| `frontend/index.html` | Entry HTML minimo |
| `frontend/postcss.config.cjs` | postcss-preset-mantine + breakpoints |
| `frontend/src/main.tsx` | Root con `MantineProvider` + theme |
| `frontend/src/theme.ts` | `createTheme()` con primaryColor |
| `frontend/src/App.tsx` | `AppShell` con Burger + Navbar + Header |
| `frontend/src/pages/Home.tsx` | Pagina ejemplo que consume `/api/v1/status` |
| `docker-compose.yml` | Services: api + frontend (node alpine) |
| `Makefile` | Targets `install`, `build-frontend`, `build`, `dev` |
| `app.md` | Framework: `net/http + vite + react + mantine` |

## Flags

| Flag | Efecto |
|------|--------|
| `--port N` | Puerto del backend Go (default: 8080) — frontend Vite siempre en 5173 |
| `--with-auth` | JWT + tabla users al backend |
| `--with-db` | Store + SQLite setup al backend |

## Post-setup

```bash
cd apps/{nombre}
cp .env.example .env
make install                          # pnpm install del frontend

# Desarrollo (2 terminales):
CGO_ENABLED=1 go run .                # Terminal 1: backend :PORT
cd frontend && pnpm dev               # Terminal 2: frontend :5173

# Produccion:
make build                            # build frontend + binario Go
./<nombre>                            # sirve todo en :PORT
```

## Notas

Pipeline impuro: invoca primero `init_api_app` para el backend y luego
escribe el frontend. Si pnpm esta disponible y `SKIP_PNPM_BUILD` no es
`true`, ejecuta `pnpm install && pnpm build` como verificacion final.

El alias `@fn_library` en `vite.config.ts` apunta a
`../../../frontend/functions/ui` (relativo desde `apps/{nombre}/frontend/`).
Los componentes del registry se consumen sin duplicarlos.

Si `apps/{nombre}/` ya existe, aborta sin sobrescribir.

El tag `launcher` permite que aparezca en el Pipeline Launcher TUI.