English | Español
Este es un proyecto que se enfoca en las últimas características y mejores prácticas de Angular. Ofrece características esenciales para flexibilidad y escalabilidad, minimizando la sobrecarga innecesaria. El código es liviano pero robusto, permitiendo a los desarrolladores elegir sus tecnologías preferidas, como bibliotecas de componentes de interfaz de usuario, gestión del estado, renderización en el servidor, etc. Su esquema flexible permite una personalización y adaptación sencilla a los requisitos únicos del proyecto.
- Angular 16
- PNPM, esbuild
- Components independientes
- Señales
- Carga diferida
- PWA
- I18n
- TailwindCSS
- Temas OS/Light/Dark
- Liviano, rápido y construído con tecnología de última generación.
- Iconify - usar íconos de cualquier conjunto de íconos 🔍Icônes.
- @iconify/tailwind - Íconos en CSS puro.
- https://github.com/ngneat/transloco
- https://github.com/tailwindlabs/tailwindcss
- https://github.com/iconify/iconify
- Node.js (^16.14.0 || ^18.10.0): https://nodejs.org/en/
- PNPM: https://pnpm.io/es/
- Docker (opcional): https://www.docker.com/
Nota: Tiene tres opciones para comenzar un nuevo proyecto basado en esta plantilla:
- Crear un nuevo repositorio de GitHub a partir de esta plantilla.
- Clonar este repositorio para comenzar con un historial de git limpio.
- Crear un fork del proyecto en StackBlitz.
npx degit juanmesa2097/angular-boilerplate my-app && cd my-app && ./scripts/rename_project.sh my-apppnpm install # run `pnpm install -g pnpm` if you don't have pnpm installedpnpm devPor favor revise esta lista de verificación y modifíquela según sea necesario para cumplir con los requisitos de su proyecto.
- Ejecute el script
./scripts/rename_project.shpara renombrar el proyecto. - Cambie el título en
src/index.htmly el favicon ensrc/favicon.icopara que coincidan con su proyecto. - Decida si desea continuar utilizando simple-git-hooks y lint-staged para su proyecto.
- Limpie el archivo README para proporcionar instrucciones claras sobre su proyecto.
- Modifique las páginas del proyecto para cumplir con sus requisitos específicos.
Crear una imagen del proyecto.
docker buildx build -t angular-boilerplate:latest .Ejecutar la imagen del proyecto.
docker run --rm -p 8080:80 -d angular-boilerplate:latest| Comando | Descripción | npm | yarn | pnpm |
|---|---|---|---|---|
dev |
Inicia el servidor de desarrollo | npm start |
yarn start |
pnpm start |
dev:host |
Inicia el servidor de desarrollo con un host personalizado | npm start |
yarn start |
pnpm start |
build |
Compila el código de producción | npm run build |
yarn build |
pnpm build |
watch |
Compila el código de producción y lo vigila para detectar cambios | npm run watch |
yarn watch |
pnpm watch |
test |
Ejecuta las pruebas unitarias | npm run test |
yarn test |
pnpm test |
test:headless |
Ejecuta las pruebas unitarias en modo sin cabeza | npm run test:headless |
yarn test:headless |
pnpm test:headless |
lint |
Ejecuta el linter | npm run lint |
yarn lint |
pnpm lint |
lint:fix |
Ejecuta el linter y corrige cualquier error de lint | npm run lint:fix |
yarn lint:fix |
pnpm lint:fix |
lint:staged |
Ejecuta el linter en los archivos en cola | npm run lint:staged |
yarn lint:staged |
pnpm lint:staged |
stylelint |
Ejecuta el linter de estilos | npm run stylelint |
yarn stylelint |
pnpm stylelint |
stylelint:fix |
Ejecuta el linter de estilos y corrige cualquier error de lint de estilos | npm run stylelint:fix |
yarn stylelint:fix |
pnpm stylelint:fix |
format |
Formatea el código con Prettier | npm run format |
yarn format |
pnpm format |