Skip to content

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!

License

Notifications You must be signed in to change notification settings

ErwanHeschung/ngx-crafter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

28 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

logo ngx-crafter

Craft your Angular projects like a pro! ⛏️

License: MIT npm version Node.js Angular

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! 🧰

🌟 Features

  • πŸ—οΈ 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

πŸš€ Quick Start

Prerequisites

Before you start crafting, make sure you have:

  • Node.js (v18 or higher) πŸ“¦
  • Angular CLI (v17-20) ⚑
npm install -g @angular/cli

Installation

npm install -g ngx-crafter

Usage

# 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.

🎯 What You Get

When you run ngx-crafter, you'll get a fully configured Angular project with:

πŸ“¦ Pre-configured Packages

  • 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

πŸ› οΈ Development Utilities

  • 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

πŸ“ Default Folder Structure

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

πŸ”Œ Available Plugins

  • πŸ” 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.

πŸ› οΈ Interactive Setup

The tool will ask you:

  1. Project Name: What should we call your masterpiece?
  2. Package Selection: Which packages do you want to include?
    • Angular Material: UI component library
    • Tailwind CSS: Utility-first CSS framework
    • NgRx: State management library
  3. 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
  4. Folder Structure: Use default or custom structure?

🎨 Custom Structures

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!

🧰 Development

Building the Project

npm run build

Development Mode

npm run dev

Project Structure

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

🀝 Contributing

Want to help improve ngx-crafter? Here's how you can contribute:

  1. Fork the repository 🍴
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request πŸš€

πŸ“ License

This project is licensed under the MIT License - see the LICENSE file for details.

Happy Crafting! β›οΈβœ¨

Built with ❀️ by TOROIMERA

About

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!

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published