Rustelo/docs/guides/quick-start-guide.md

Quick Start Guide - Create Rustelo Implementation

🚀 Two Ways to Get Started

This guide shows you how to create a Rustelo implementation using two approaches:

1. Command Line: Interactive, step-by-step creation
2. Config File: Declarative, reproducible setup

Both approaches create the same result - choose what fits your workflow best!

---

📋 Prerequisites (2 minutes)

Install Rustelo CLI

# Install latest Rustelo CLI
cargo install rustelo-cli

# Verify installation
cargo rustelo --version
# Output: rustelo-cli 0.1.0

# Check available commands
cargo rustelo --help

System Requirements

• Rust: 1.70+ (install from rustup.rs)
• Node.js: 18+ (for CSS and tooling)
• Git: For version control
• Database: PostgreSQL or SQLite (optional, for database features)

---

🎯 Approach 1: Command Line Creation

Step 1: Create New Project (Interactive)

# Start interactive project creation
cargo rustelo new

# Interactive prompts:
📋 Project name: my-webapp
📋 Description: My awesome web application
📋 Template type:
  > webapp (Full-stack web application)
    api (REST API server)
    static (Static site generator)
    desktop (Desktop application)

📋 Select features:
  [x] analytics (Usage analytics and monitoring)
  [x] auth (Authentication and authorization)  
  [ ] smart-build (Intelligent build caching)
  [x] debugging-tools (Enhanced debugging capabilities)
  [ ] email (Multi-provider email system)
  [ ] tls (HTTPS/TLS support)

📋 Database:
  > postgres (PostgreSQL - production ready)
    sqlite (SQLite - development friendly)
    none (No database)

📋 Styling:
  [x] tailwind (Tailwind CSS via UnoCSS)
  [ ] custom (Custom CSS setup)

📋 Additional options:
  [x] github-actions (CI/CD workflows)
  [x] docker (Docker configuration)
  [x] docs (Documentation setup)

Step 2: Project Generated

✅ Created my-webapp project with:
   - Template: webapp
   - Features: analytics, auth, debugging-tools
   - Database: PostgreSQL
   - Styling: Tailwind/UnoCSS
   - CI/CD: GitHub Actions
   - Containerization: Docker

📁 Project structure created at: ./my-webapp/
🔧 Configuration files generated
📦 Dependencies resolved
🚀 Ready for development!

Next steps:
  cd my-webapp
  just setup
  just dev

Step 3: Development Setup

cd my-webapp

# One-command setup (installs dependencies, sets up database, etc.)
just setup

# Setup process:
🔧 Installing Rust dependencies...
📦 Installing Node.js dependencies...
🗄️ Setting up PostgreSQL database...
🎨 Building initial CSS...
✅ Development environment ready!

# Start development server
just dev

# Development server started:
🚀 Server running at http://localhost:3000
📊 Analytics dashboard at http://localhost:3001
🔧 Debug tools enabled
🔄 Hot reload active

Step 4: Explore Your Project

# See available commands
just --list

# Available recipes:
# dev              Start development server
# dev-full         Start all services (server, analytics, debugging)
# build            Build for development
# build-prod       Build for production
# test             Run tests
# auth-setup       Setup authentication
# analytics-report Generate analytics report
# db-migrate       Run database migrations
# quality          Run all quality checks

# Try some commands:
just auth-setup     # Configure authentication
just db-migrate     # Run database migrations
just quality        # Check code quality

---

⚙️ Approach 2: Config File Creation

Step 1: Create Project Config File

# Create project configuration
mkdir my-webapp
cd my-webapp

# Create rustelo.toml configuration
cat > rustelo.toml << 'EOF'
[project]
name = "my-webapp"
description = "My awesome web application"
version = "0.1.0"
authors = ["Your Name <your.email@example.com>"]
license = "MIT"

[template]
type = "webapp"
variant = "full-stack"

[features]
# Core features
analytics = { enabled = true, config = { retention_days = 30, dashboard_port = 3001 } }
auth = { enabled = true, config = { methods = ["jwt", "oauth2"], providers = ["google", "github"] } }
debugging-tools = { enabled = true, config = { browser_logs = true, performance_monitoring = true } }

# Optional features (disabled by default)
smart-build = { enabled = false }
email = { enabled = false }
tls = { enabled = false }

[database]
type = "postgres"
url = "postgresql://localhost:5432/my_webapp"
migrations = true
auto_setup = true

[styling]
framework = "tailwind"
processor = "unocss"
themes = ["light", "dark"]
custom_colors = { primary = "#3b82f6", secondary = "#10b981" }

[development]
hot_reload = true
debug_mode = true
log_level = "debug"
port = 3000

[build]
optimize = true
target_dir = "target"
features = ["analytics", "auth", "debugging-tools"]

[deployment]
docker = true
ci_cd = "github-actions"
environments = ["staging", "production"]

[tooling]
justfile = true
package_json = true
dockerfile = true
github_actions = true
documentation = true

[quality]
pre_commit_hooks = true
code_formatting = "rustfmt"
linting = "clippy"
testing = { unit = true, integration = true, e2e = false }
EOF

Step 2: Generate Project from Config

# Create project from configuration file
cargo rustelo create --config rustelo.toml

# Output:
📋 Reading configuration from rustelo.toml...
✅ Configuration validated
🏗️ Creating project structure...
📦 Installing dependencies...
🔧 Configuring features...
🎨 Setting up styling system...
🗄️ Configuring database...
🚀 Setting up development environment...

✅ Project created successfully!

Project: my-webapp (v0.1.0)
Template: webapp (full-stack variant)
Features: analytics, auth, debugging-tools
Database: PostgreSQL
Styling: Tailwind/UnoCSS

Next steps:
  just setup
  just dev

Step 3: Verify Configuration

# Check generated project matches config
cargo rustelo info

# Output:
📋 Project Information:
  Name: my-webapp
  Template: webapp (full-stack)
  Generated by: cargo rustelo v0.1.0
  Configuration: rustelo.toml
  
🎯 Enabled Features:
  ✅ analytics (retention: 30 days, port: 3001)
  ✅ auth (JWT + OAuth2: google, github)  
  ✅ debugging-tools (browser logs, performance monitoring)
  
🗄️ Database:
  Type: PostgreSQL
  URL: postgresql://localhost:5432/my_webapp
  Migrations: Enabled
  
🎨 Styling:
  Framework: Tailwind CSS
  Processor: UnoCSS
  Themes: light, dark
  Primary: #3b82f6, Secondary: #10b981

🔧 Development:
  Port: 3000
  Hot Reload: Enabled
  Debug Mode: Enabled
  Log Level: debug

Step 4: Customize Configuration (Optional)

# Edit configuration for your needs
nano rustelo.toml

# Example customizations:
[features]
# Add more features
smart-build = { enabled = true, config = { cache_size = "2GB", parallel_jobs = 4 } }
email = { enabled = true, config = { provider = "sendgrid", templates = true } }

[styling.custom_colors]
# Update brand colors
primary = "#ff6b6b"
secondary = "#4ecdc4"
accent = "#45b7d1"

# Regenerate with new configuration
cargo rustelo update --config rustelo.toml

# Applies configuration changes:
✅ Added smart-build feature
✅ Added email feature  
✅ Updated color theme
🔄 Rebuilding CSS with new colors...
✅ Configuration updated successfully!

---

🔄 Configuration File Templates

Minimal Configuration (API Only)

# minimal-api.toml
[project]
name = "my-api"
description = "Simple REST API"

[template]
type = "api"

[features]
auth = { enabled = true }

[database]
type = "sqlite"

Full-Featured Web App

# full-webapp.toml
[project]
name = "my-saas"
description = "Full SaaS application"

[template] 
type = "webapp"
variant = "saas"

[features]
analytics = { enabled = true }
auth = { enabled = true, config = { methods = ["jwt", "oauth2", "2fa"] } }
smart-build = { enabled = true }
debugging-tools = { enabled = true }
email = { enabled = true }
tls = { enabled = true }

[database]
type = "postgres"
url = "$DATABASE_URL"

[styling]
framework = "tailwind"
themes = ["light", "dark", "system"]

[deployment]
docker = true
ci_cd = "github-actions"
environments = ["dev", "staging", "prod"]

Static Site

# static-site.toml
[project]
name = "my-blog"
description = "Personal blog"

[template]
type = "static"

[features]
analytics = { enabled = true, config = { provider = "google" } }

[styling]
framework = "tailwind"
themes = ["minimal"]

[content]
type = "markdown"
source = "content/"

Team/Organization Template

# team-template.toml
[project]
name = "team-project"
description = "Standardized team project"

[template]
type = "webapp"

[features]
analytics = { enabled = true }
auth = { enabled = true }
smart-build = { enabled = true }
debugging-tools = { enabled = true }

[team]
shared_config = true
code_style = "strict"
pre_commit_hooks = ["format", "lint", "test", "integrity"]

[quality]
coverage_threshold = 90.0
security_scan = true
performance_budget = { fcp = "1.5s", lcp = "2.5s" }

---

🎯 Next Steps After Creation

Development Workflow

# Start development
just dev

# In separate terminal, try features:
just auth-setup        # Setup authentication
just analytics-report  # View analytics
just db-migrate        # Run database migrations

# Check code quality
just quality

# Run tests
just test

Customization

# Override templates locally
cargo rustelo override template justfile
# Edit config/local/justfile with your custom commands

# Override components
cargo rustelo override component NavBar
# Edit src/components/local/NavBar.rs

# Add local configuration
echo 'debug_toolbar = true' >> config/local/development.toml

Feature Management

# Add more features
cargo rustelo add smart-build
cargo rustelo add email

# Check feature status
cargo rustelo features status

# Remove features
cargo rustelo remove debugging-tools

Production Deployment

# Build for production
just build-prod

# Run deployment checks
just deploy-check

# Deploy (if configured)
just deploy-staging  # Deploy to staging first
just deploy-prod     # Deploy to production

---

🚨 Common Issues and Solutions

Issue 1: Database Connection Failed

# Problem: PostgreSQL not running
# Solution:
just db-start        # Start database
just db-setup        # Setup database schema
just db-migrate      # Run migrations

Issue 2: Port Already in Use

# Problem: Port 3000 already in use
# Solution: Change port in config/local/development.toml
echo 'port = 3001' >> config/local/development.toml
just dev

Issue 3: Node.js Dependencies Missing

# Problem: CSS build fails
# Solution:
npm install          # Install Node.js dependencies
just css-build       # Rebuild CSS

Issue 4: Permission Denied

# Problem: Permission errors on Linux/Mac
# Solution:
chmod +x scripts/**/*.sh  # Make scripts executable
sudo chown -R $USER target/  # Fix target directory ownership

---

📚 What's Next?

1. Read the Migration Guide: MIGRATION_GUIDE.md
2. Explore New Workflows: NEW_WORKFLOWS.md
3. Understand Architecture: TEMPLATE_ARCHITECTURE.md
4. Learn Layer System: LAYERED_OVERRIDE_SYSTEM.md
5. Check Integrity Protection: FRAMEWORK_INTEGRITY_PROTECTION.md

🆘 Getting Help

• CLI Help: cargo rustelo help <command>
• Project Issues: cargo rustelo diagnose
• Community: GitHub Discussions
• Documentation: cargo rustelo docs

Happy coding with Rustelo! 🦀🚀