https://github.com/wlucha/angular-starter
:rocket: Angular 19 Starter with Storybook, Transloco, Jest, Tailwind, Cypress, Docker, ESLint, Material & Prettier :rocket:
https://github.com/wlucha/angular-starter
angular angular-cli angular-docker angular-material angular19 auditjs boilerplate commit-lint compodoc cypress docker eslint jest material prettier tailwind tailwindcss transloco typescript webpack-bundle-analyzer
Last synced: 14 days ago
JSON representation
:rocket: Angular 19 Starter with Storybook, Transloco, Jest, Tailwind, Cypress, Docker, ESLint, Material & Prettier :rocket:
- Host: GitHub
- URL: https://github.com/wlucha/angular-starter
- Owner: wlucha
- License: mit
- Created: 2020-05-14T19:09:19.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-02T08:34:22.000Z (about 1 year ago)
- Last Synced: 2025-04-08T15:08:17.875Z (11 months ago)
- Topics: angular, angular-cli, angular-docker, angular-material, angular19, auditjs, boilerplate, commit-lint, compodoc, cypress, docker, eslint, jest, material, prettier, tailwind, tailwindcss, transloco, typescript, webpack-bundle-analyzer
- Language: HTML
- Homepage:
- Size: 5.18 MB
- Stars: 340
- Watchers: 8
- Forks: 67
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE-OF-CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-angular - @wlucha/angular-starter - Angular 19 Starter with Storybook, Transloco, Jest, Cypress, Docker, ESLint, Material, & Prettier. (Site Templates / Free Templates)
- awesome-angular - @wlucha/angular-starter - Angular 19 Starter with Storybook, Transloco, Jest, Cypress, Docker, ESLint, Material, & Prettier. (Site Templates / Free Templates)
README
A production-ready Angular 21 starter template with modern tooling, testing, and best practices baked in.
---
## Features
| Category | Tool | Description |
|----------|------|-------------|
| **Framework** | Angular 21 | Latest Angular with signals, standalone components & new control flow |
| **UI** | Angular Material | Material Design component library |
| **Styling** | Tailwind CSS 4 | Utility-first CSS framework |
| **Unit Testing** | Jest 30 | Fast, reliable unit tests with `jest-preset-angular` |
| **E2E Testing** | Playwright | Cross-browser E2E tests (Chromium, Firefox, WebKit) |
| **Linting** | ESLint 10 | Static analysis with Angular & TypeScript rules |
| **Formatting** | Prettier | Consistent code formatting |
| **i18n** | Transloco | Runtime internationalization |
| **Documentation** | Compodoc | Auto-generated project documentation |
| **Component Dev** | Storybook 10 | Isolated component development & showcase |
| **Bundle Analysis** | Source Map Explorer | Visualize bundle size & composition |
| **Containerization** | Docker | Production-ready Dockerfile |
| **Commit Quality** | Commitlint + Husky | Enforce conventional commits via Git hooks |
| **Security** | AuditJS | Dependency vulnerability scanning |
| **Changelog** | auto-changelog | Automatically generated CHANGELOG |
---
## Quick Start
```bash
# Clone the repository
git clone https://github.com/wlucha/angular-starter
cd angular-starter
# Install dependencies
npm install
# Start the development server
npm run start
```
Open [http://localhost:4200](http://localhost:4200) in your browser.
### Docker
```bash
docker build . -t angular-starter
docker run -p 3000:80 angular-starter
```
---
## Available Scripts
| Command | Description |
|---------|-------------|
| `npm run start` | Start the dev server on `localhost:4200` |
| `npm run build:prod` | Production build with optimizations |
| `npm run test` | Run unit tests with Jest |
| `npm run test:ci` | Run unit tests in CI mode (sequential) |
| `npm run test:coverage` | Run tests with coverage report |
| `npm run e2e` | Run E2E tests with Playwright |
| `npm run lint` | Lint the project with ESLint |
| `npm run prettier` | Format all files with Prettier |
| `npm run storybook` | Launch Storybook on `localhost:6006` |
| `npm run compodoc` | Generate documentation with Compodoc |
| `npm run analyze` | Analyze bundle size with Source Map Explorer |
| `npm run audit` | Audit dependencies for vulnerabilities |
---
## Project Structure
```
angular-starter/
├── src/
│ ├── app/ # Application source code
│ ├── assets/ # Static assets
│ ├── environments/ # Environment configs
│ └── stories/ # Storybook stories
├── tests/ # Playwright E2E tests
├── angular.json # Angular CLI configuration
├── jest.config.ts # Jest configuration
├── playwright.config.ts # Playwright configuration
├── eslint.config.mjs # ESLint flat config
└── tsconfig.json # TypeScript configuration
```
---
## Demo & Deployment
- **Live Demo**: [Open in StackBlitz](https://stackblitz.com/github/wlucha/angular-starter)
- **Deploy to Heroku**: [](https://heroku.com/deploy)
---
## Contributing
Contributions are welcome! Please read the [Contribution Guidelines](CONTRIBUTING.md) before submitting a PR.
Have a feature request or found a bug? [Open an issue](https://github.com/wlucha/angular-starter/issues).
---
## License
This project is licensed under the [MIT License](LICENSE).
---
If this project helps you, please give it a ⭐ on GitHub!