# App.js Modularization
## Overview
Original `app.js` (1370 lines) has been split into 7 ES6 modules totaling 1427 lines.
## Module Structure
```
js/
├── config.js (136 lines) - Constants and configuration
├── api.js (56 lines) - API service layer
├── utils.js (132 lines) - Utility functions
├── wizard.js (199 lines) - Server recommendation wizard
├── pricing.js (502 lines) - Pricing table component
├── dashboard.js (350 lines) - Dashboard and Telegram integration
└── app.js (52 lines) - Main entry point
```
## Module Responsibilities
### config.js
- `TELEGRAM_BOT_URL` - Telegram bot URL constant
- `PRICING_DATA` - Legacy pricing data (VAT included, monthly basis)
- `MOCK_SERVERS`, `MOCK_STATS`, `MOCK_NOTIFICATIONS` - Mock data for UI testing
- `WIZARD_CONFIG` - Server recommendation wizard configuration
### api.js
- `API_CONFIG` - API configuration (base URL, timeout, etc.)
- `ApiService` - API request helper with error handling
### utils.js
- `formatPrice()` - KRW price formatting
- `switchTab()` - Tab switching (n8n/Terraform)
- `updatePing()`, `startPingUpdates()`, `stopPingUpdates()` - Ping simulation
- DOM event listeners for visibility change and keyboard navigation
### wizard.js
- `calculateRecommendation()` - Rule-based server recommendation logic
- `createWizardMethods()` - Wizard state and methods for Alpine.js
### pricing.js
- `pricingTable()` - Pricing table component with API integration
- Caching, filtering, sorting, and modal interactions
- Supports Global (Tokyo/Osaka/Singapore) and Seoul regions
- Subtabs for instance types (Standard/Dedicated/Premium/High Memory)
### dashboard.js
- `createDashboardMethods()` - Dashboard state and methods
- Telegram Mini App integration
- Web login widget support (Telegram Login Widget)
- Server management (start/stop/delete)
- Stats and notifications
### app.js
- Module imports and integration
- `anvilApp()` - Main Alpine.js data function (merges wizard + dashboard)
- Global function exposure (`window.anvilApp`, `window.pricingTable`)
- `window.onTelegramAuth()` - Telegram web login callback
- `window.AnvilDevTools` - Development tools
## Usage in HTML
```html
```
## Alpine.js Integration
All modules expose functions to `window` for Alpine.js `x-data`:
```html
```
## Benefits
1. **Separation of Concerns**: Each module has a single responsibility
2. **Maintainability**: Easier to find and modify specific functionality
3. **Testability**: Individual modules can be tested independently
4. **Code Reuse**: Modules can be imported as needed
5. **ES6 Features**: Modern JavaScript syntax (import/export)
6. **Alpine.js Compatible**: All functions exposed to `window` for x-data usage
## Cloudflare Pages Compatibility
ES6 modules work natively in modern browsers. Cloudflare Pages serves them with correct MIME types:
- `.js` files → `application/javascript`
- No build step required
- Works with CSP (Content Security Policy)
## Deployment
```bash
wrangler pages deploy . --project-name anvil-hosting
```
No build step required - deploy directly.
## Testing
1. Open browser console at https://hosting.anvil.it.com
2. Check for `[Anvil] Application modules loaded` message
3. Test `window.AnvilDevTools` object
4. Verify wizard modal opens correctly
5. Verify pricing table loads and filters work
6. Test Telegram Mini App integration (if in Telegram environment)
## Migration Notes
- Original `app.js` backed up as `app.js.backup`
- All functionality preserved
- No breaking changes to HTML templates
- Alpine.js integration unchanged
## Future Improvements
1. Add unit tests for each module
2. Implement TypeScript for type safety
3. Consider bundling for production (Vite, Rollup)
4. Add module documentation (JSDoc)
5. Implement code splitting for lazy loading