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/cli
npm 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 build
npm run dev
ngx-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