Código base repetitivo que suele venir al iniciar un proyecto. Sirve para no empezar de cero.
Boilerplate es código base repetitivo y estandarizado que sirve como punto de partida para nuevos proyectos. Incluye: - Estructura de carpetas - Configuración de herramientas (ESLint, Prettier, TypeScript) - Scripts de desarrollo y build - Patrones arquitectónicos predefinidos - Dependencias comunes preconfiguradas Usar boilerplates ahorra tiempo de setup, pero es importante entender qué incluyen para no arrastrar código innecesario.
# Crear proyecto desde boilerplate/template npx create-next-app@latest my-app npx create-vite@latest my-app --template react-ts npx create-t3-app@latest my-app # Estructura típica de boilerplate my-project/ ├── src/ │ ├── components/ │ ├── hooks/ │ ├── lib/ │ ├── pages/ │ ├── services/ │ ├── styles/ │ └── utils/ ├── public/ ├── tests/ ├── .eslintrc.js ├── .prettierrc ├── tsconfig.json ├── package.json └── README.md // package.json típico de boilerplate { "name": "my-boilerplate", "scripts": { "dev": "vite", "build": "tsc && vite build", "lint": "eslint src --ext .ts,.tsx", "format": "prettier --write src", "test": "vitest", "prepare": "husky install" }, "dependencies": { "react": "^18.2.0", "react-router-dom": "^6.0.0", "@tanstack/react-query": "^5.0.0" }, "devDependencies": { "typescript": "^5.0.0", "vite": "^5.0.0", "eslint": "^8.0.0", "prettier": "^3.0.0" } }
