# Chunk 2: Hello World App

**Parent:** [Build Graph Dashboard](../build-graph-dashboard.md)  
**Previous:** [Chunk 1: TypeScript Client Generation](./chunk-1-client-generation.md)  
**Next:** [Chunk 3: Routing Framework](./chunk-3-routing-framework.md)

## Overview

Create a minimal "Hello World" single-page application using TypeScript and Mithril, fully integrated with the Bazel build system and served by the Build Graph Service.

## Scope

### In Scope
- Basic TypeScript + Mithril SPA setup
- Bazel BUILD rules for TypeScript compilation
- Integration with Build Graph Service (served by same process)
- Hermetic development workflow
- Basic bundling and minification

### Out of Scope
- Complex routing (handled in Chunk 3)
- Styling framework (basic CSS only)
- Real API integration (use generated client from Chunk 1 for basic connectivity test)

## Technical Approach

### Application Structure
```
databuild/
├── dashboard/
│   ├── BUILD
│   ├── src/
│   │   ├── main.ts          # Application entry point
│   │   ├── components/
│   │   │   └── HelloWorld.ts # Basic component
│   │   └── api/
│   │       └── client.ts     # Generated client import
│   ├── static/
│   │   └── index.html        # HTML template
│   └── tsconfig.json         # TypeScript configuration
```

### Bazel Integration
- Create `//databuild/dashboard:app` target
- Use `rules_nodejs` for TypeScript compilation
- Bundle with webpack or similar tool
- Serve static files from Build Graph Service

### Service Integration
- Update Build Graph Service to serve static files
- Add route for `/*` to serve dashboard
- Ensure API routes take precedence over static files
- Dashboard should self-configure service URL

### Development Workflow
```bash
# Build dashboard
bazel build //databuild/dashboard:app

# Development mode (with file watching)
bazel run //databuild/dashboard:dev

# Type checking
bazel run //databuild/dashboard:typecheck
```

## Implementation Strategy

1. **Set Up Bazel Rules**
   - Configure `rules_nodejs` for TypeScript
   - Create build targets for development and production
   - Set up bundling pipeline

2. **Create Basic App**
   - Simple Mithril application with single component
   - Import and test generated TypeScript client
   - Basic connectivity test to service API

3. **Service Integration**
   - Update Build Graph Service to serve static files
   - Add dashboard route configuration
   - Ensure proper content-type headers

4. **Development Tooling**
   - File watching for development
   - TypeScript compilation
   - Error reporting

## Deliverables

- [ ] Working TypeScript + Mithril "Hello World" app
- [ ] Bazel BUILD rules for compilation and bundling
- [ ] Integration with Build Graph Service
- [ ] Development workflow scripts
- [ ] Basic connectivity test with generated client

## Success Criteria

- App compiles and runs without errors
- Served by Build Graph Service on same port as API
- TypeScript client successfully connects to service
- Development workflow supports rapid iteration
- Hermetic build process

## Testing

- Build app with `bazel build //databuild/dashboard:app`
- Start service and verify dashboard loads
- Test API connectivity from dashboard
- Verify TypeScript compilation and type checking work