110 lines
No EOL
3.3 KiB
Markdown
110 lines
No EOL
3.3 KiB
Markdown
# 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 |