Craft your Angular projects like a pro! βοΈ
A powerful CLI tool that helps you craft Angular projects with pre-configured folder structures and essential packages. Think of it as your personal crafting table for Angular development! π§°
- ποΈ Smart Project Generation: Creates Angular projects with optimized folder structures
- π¦ Package Management: Automatically installs commonly used packages (Tailwind CSS, Angular Material, NgRx, ESLint)
- π§ Dev Utilities: Git hooks and development tools (Husky)
- π¨ Tailwind CSS Integration: Pre-configured utility-first CSS framework with PostCSS
- π― Custom Structures: Support for custom folder structure configurations
- π Plugin System: Extensible plugin architecture for additional features (auth, i18n, PWA, etc.)
- β‘ Fast Setup: Get your project ready in seconds, not minutes
- π§ Angular 17-20 Support: Compatible with the latest Angular versions
Before you start crafting, make sure you have:
- Node.js (v18 or higher) π¦
- Angular CLI (v17-20) β‘
npm install -g @angular/clinpm install -g ngx-crafter# Basic usage with interactive prompts
ngx-crafter
# Use plugins for additional features (coming soon)
ngx-crafter -- --with auth
ngx-crafter -- --with auth,i18n,pwa
# Plugin-specific options (coming soon)
ngx-crafter -- --with auth --auth-provider firebase
ngx-crafter -- --with pwa --pwa-name "My Awesome App"That's it! The tool will guide you through the setup process with interactive prompts.
When you run ngx-crafter, you'll get a fully configured Angular project with:
- Tailwind CSS: Automatically configured with PostCSS and ready to use
- Angular Material: UI components and theming setup
- NgRx: State management with store, effects, and devtools
- Husky: Git hooks configured with lint-staged for pre-commit code quality checks
- ESLint: Code linting and formatting rules
- Prettier: Code formatting and style consistency
src/
βββ app/
β βββ core/ # Core application logic
β β βββ services/ # Application services
β β βββ guards/ # Route guards
β β βββ interceptors/ # HTTP interceptors
β β βββ models/ # Data models
β β βββ utils/ # Utility functions
β βββ shared/ # Shared components & services
β β βββ components/ # Reusable components
β β βββ directives/ # Custom directives
β β βββ pipes/ # Custom pipes
β β βββ models/ # Shared models
β β βββ services/ # Shared services
β βββ features/ # Feature modules
β βββ layouts/ # Layout components
β βββ assets/ # Static assets
β βββ images/ # Image files
β βββ icons/ # Icon files
β βββ fonts/ # Font files
βββ environments/ # Environment configurations
- π Auth: Authentication setup with Angular Fire and Firebase (coming soon)
- π i18n: Internationalization with ngx-translate (coming soon)
- π± PWA: Progressive Web App setup with Angular PWA (coming soon)
- π CRUD: CRUD operations setup (coming soon)
- π§ͺ Testing: Enhanced testing setup (coming soon)
- π Storybook: Storybook integration (coming soon)
Plugin system infrastructure is ready! You can create your own plugins now. Provided plugins will be available in future versions. Meanwhile, check out demo-plugin as an example.
The tool will ask you:
- Project Name: What should we call your masterpiece?
- Package Selection: Which packages do you want to include?
- Angular Material: UI component library
- Tailwind CSS: Utility-first CSS framework
- NgRx: State management library
- Dev Utilities: Which development utilities do you want to add?
- Husky: Git hooks with lint-staged for pre-commit code quality
- ESLint: Code linting and formatting
- Prettier: Code formatting and style consistency
- Folder Structure: Use default or custom structure?
Want to craft your own folder structure? Create a JSON file like this:
{
"src": {
"app": {
"core": {
"services": {},
"guards": {},
"models": {}
},
"features": {
"auth": {},
"dashboard": {}
}
}
}
}Then reference it during setup!
npm run buildnpm run devngx-crafter/
βββ src/
β βββ cli.ts # Main CLI entry point
β βββ default-structure.json # Default folder structure
β βββ utils/ # Utility functions
β βββ checkAngularCLI.ts # Angular CLI version checker
β βββ createFolders.ts # Folder creation logic
β βββ createProject.ts # Project creation logic
β βββ prompt.ts # Interactive prompts
βββ test/ # Test files
βββ package.json # Project configuration
βββ tsconfig.json # TypeScript configuration
Want to help improve ngx-crafter? Here's how you can contribute:
- Fork the repository π΄
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request π
This project is licensed under the MIT License - see the LICENSE file for details.
Happy Crafting! βοΈβ¨
Built with β€οΈ by TOROIMERA