Astro + Firebase + Lit Generator

🚀 Yeoman generator for modern web applications

A powerful scaffolding tool that generates complete Astro + Firebase + Lit applications with configurable branding and best practices built-in.

Features

✨ Modern Stack

• Astro - Fast, modern web framework
• Firebase - Complete backend solution (Auth, Database, Storage, Messaging)
• Lit - Efficient web components
• TypeScript - Type safety and better DX

🎨 Configurable Branding

• Customizable company branding and styling
• Logo and color scheme configuration
• Consistent UI components
• Professional layout structure

🔧 Configurable Features

• Microsoft Authentication with Firebase Auth
• Real-time notifications and messaging
• PWA support with manifest and service worker
• Project management components (Tasks, Bugs, Epics)
• Multiple view types (List, Table, Kanban)
• Complete card management system

📁 Production-Ready Structure

• Organized service layer (Firebase, notifications, etc.)
• Factory pattern for components
• Renderer system for different views
• Controller architecture for app logic
• Utilities and shared styling system
• Comprehensive Firebase rules and security

Quick Start

Installation

# Install Yeoman globally
npm install -g yo

# Install the generator
npm install -g generator-astro-firebase-lit

# Create a new project
yo astro-firebase-lit

With Company Configuration

# Create a new project with your company configuration
yo astro-firebase-lit --config ./path/to/your-company-config.json

Configuration

The generator supports external configuration files to customize company-specific settings like branding, colors, authentication domains, and Firebase rules.

Basic Configuration File

Create a JSON file with your company settings:

{
  "company": {
    "name": "Your Company Name",
    "domain": "yourcompany.com",
    "logo": "logo.png",
    "colors": {
      "primary": "#4a9eff",
      "secondary": "#357ae8",
      "accent": "#ec3e95",
      "background": "#f5f7fa"
    }
  },
  "authentication": {
    "domains": ["yourcompany.com"],
    "adminEmails": ["[email protected]"],
    "partnerEmails": [],
    "microsoftTenant": "yourcompany.onmicrosoft.com"
  },
  "firebase": {
    "rules": {
      "allowedDomains": ["yourcompany.com"],
      "adminUsers": ["[email protected]"],
      "partnerDomains": []
    }
  },
  "repository": {
    "url": "https://github.com/yourcompany/your-app",
    "issues": "https://github.com/yourcompany/your-app/issues",
    "docs": "https://github.com/yourcompany/your-app"
  },
  "defaultAuthor": "Your Company Name",
  "defaultDescription": "A web application built with Astro, Firebase, and Lit"
}

For detailed configuration options, see Configuration Guide.

Generator Options

The generator will prompt you for:

Basic Configuration

• Project name - Your application name
• Description - Project description
• Author - Author information

Firebase Setup

• Project ID - Your Firebase project ID
• API Key - Firebase API key
• Auth Domain - Authentication domain
• Database URL - Realtime Database URL

Features Selection

• ✅ Authentication (Microsoft) - Azure AD authentication
• ✅ Real-time Notifications - Push notifications and real-time updates
• ✅ PWA Support - Progressive Web App capabilities
• ⚪ Project Management Components - Task, Bug, Epic management
• ⚪ Card System - Full card management with CRUD operations
• ⚪ Table and Kanban Views - Multiple data presentation views

Demo Content

• ⚪ Include demo pages - Sample dashboard and components

Generated Project Structure

your-project/
├── src/
│   ├── layouts/
│   │   └── Layout.astro          # Main layout with company branding
│   ├── pages/
│   │   ├── index.astro          # Landing page
│   │   └── dashboard.astro      # Demo dashboard (optional)
│   ├── firebase/
│   │   └── config.js            # Server-side Firebase config
│   └── lib/
│       ├── authapp.js           # Authentication utilities
│       └── firebase-client.js   # Client-side Firebase utilities
├── public/
│   ├── js/
│   │   ├── wc/                  # Web Components (Lit)
│   │   ├── services/            # Application services
│   │   ├── utils/               # Utility functions
│   │   └── ui/styles/           # Styling system
│   ├── images/
│   │   └── logo.png             # Company logo
│   ├── manifest.json            # PWA manifest (optional)
│   └── firebase-config.js       # Auto-generated Firebase config
├── scripts/
│   ├── generateFirebaseConfig.js       # Config generation
│   └── generateFirebaseMessagingServiceWorker.js  # SW generation
├── firebase.json               # Firebase hosting config
├── firestore.rules            # Firestore security rules
├── database.rules.json        # Realtime DB rules
├── storage.rules              # Storage security rules
└── package.json               # Dependencies and scripts

Key Components

Core Web Components (Always Included)

• MenuNav - Responsive navigation with active indicators
• AppModal - Flexible modal system for dialogs
• SlideNotification - Toast-style notifications

Authentication Components (Optional)

• NotificationBell - Real-time notification bell with badge
• Microsoft Azure AD integration
• User state management

Management Components (Optional)

• TaskCard - Task management with status tracking
• BugCard - Bug tracking with priority and status
• EpicCard - Epic/feature management
• ProposalCard - Proposal and idea tracking

View System (Optional)

• List Renderer - Card-based list views
• Table Renderer - Sortable table presentations
• Kanban Renderer - Drag-and-drop kanban boards
• View Factory - Unified view switching

Development Workflow

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run generate-config  # Generate Firebase configs

Adding New Components

1. Create component in public/js/wc/
2. Follow Lit best practices
3. Use shared styling from public/js/ui/styles/
4. Register in main layout if needed

Customization

• Branding - Update configuration file and regenerate
• Navigation - Modify MenuNav component
• Pages - Add new pages in src/pages/
• Components - Create custom web components

Requirements

• Node.js 16 or later
• Firebase project
• Yeoman generator

Examples

Basic Usage

yo astro-firebase-lit

With Custom Configuration

yo astro-firebase-lit --config ./my-company-config.json

Skip Installation

yo astro-firebase-lit --skip-install

Firebase Integration

Services Included

• Authentication - Microsoft Azure AD provider
• Realtime Database - Live data synchronization
• Firestore - Document database
• Cloud Storage - File upload and management
• Cloud Messaging - Push notifications (optional)

Security Rules

Pre-configured security rules for:

• Document-level access control
• User-based permissions
• File upload restrictions

Contributing

1. Fork the repository
2. Create your feature branch
3. Make your changes
4. Test with the generator
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

• 📚 Configuration Guide
• 🐛 Issues
• 💬 Repository

Generated with Astro + Firebase + Lit Generator 🚀