stuart/databuild
1
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions
databuild/plans/webapp_v1/chunk-2-hello-world-app.md

3.3 KiB
Raw Blame History

Chunk 2: Hello World App

Parent: Build Graph Dashboard
Previous: Chunk 1: TypeScript Client Generation
Next: Chunk 3: Routing Framework

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

# 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