Runtime 0.3.0: The Unified Serverless Framework for TypeScript

Source: Dev.to

One codebase. Three contexts. Zero configuration.

We’re thrilled to announce Runtime Web 0.3.0 – a complete server‑less framework that unifies a Lambda backend, AWS CDK infrastructure, and a React frontend into a single, type‑safe TypeScript codebase.

What is Runtime Web?

Runtime Web is a production‑ready framework that eliminates the complexity of building full‑stack serverless applications on AWS. Write your entire application – backend, infrastructure, and frontend – in one place, then deploy with a single command.

runtime({
  app: ({ router }) => ,
  router: runtimeRouter({ router, defaults }),
  config: { serviceName: 'my-app', stage: 'prod' },
  register: {
    users: {
      ties: [UsersTies],
      lambdas: [createUserHandler, getUserHandler]
    }
  }
});

This single entry point works everywhere: Lambda execution, CDK synthesis, and browser hydration.

Core Features

Unified runtime() Entry Point

One function that automatically detects its execution context:

No environment checks. No conditional imports. Just works.

Type‑Safe Dependency Injection

Access services through event.ties with full TypeScript support:

type PaymentTies = {
  paymentService: PaymentsService;
  billingService: BillingService;
};

export const chargeHandler: LambdaDefinition = {
  ties: { paymentService: PaymentsService, billingService: BillingService },
  handler: async (event, context) => {
    // Full IntelliSense – no magic strings, no hash keys
    const result = await event.ties.paymentService.charge(event.body);
    await event.ties.billingService.record(result);
    return { statusCode: 200, body: JSON.stringify(result) };
  }
};

• Compile‑time errors for missing dependencies.
• IDE autocomplete for everything.

Declarative Microservice Architecture

Organise your backend into logical micro‑services with isolated DI containers:

register: {
  payments: {
    ties: [PaymentsTies, BillingTies],
    lambdas: [chargeHandler, refundHandler, webhookHandler]
  },
  users: {
    ties: [UsersTies, AuthTies],
    lambdas: [createUserHandler, getUserHandler]
  }
}

Each micro‑service gets its own Lambda Layer with pre‑built dependencies, eliminating cold‑start overhead from unused services.

Lambda Cold‑Start Initialization

Execute expensive operations once, not on every request:

export const getUserHandler: LambdaDefinition = {
  ties: { db: DatabaseService },

  // Runs ONCE during cold start — cached for all invocations
  init: async (ties) => ({
    dbPool: await ties.db.createConnectionPool(),
    config: await loadRemoteConfig(),
    warmSdk: await warmupAwsSdk()
  }),

  // Access cached snapshot on every request — zero overhead
  handler: async (event) => {
    const user = await event.snapshot.dbPool.query(event.pathParameters.id);
    return { statusCode: 200, body: JSON.stringify(user) };
  }
};

Why it matters

• Database connections created once, reused across thousands of requests.
• Remote config loaded once, not on every cold start.
• SDK clients pre‑warmed before the first request hits.

event.snapshot is fully typed – IDE autocomplete for cached resources. Works at micro‑service level too – share expensive resources across all handlers in a service.

HTTP API Authorization

Built‑in support for JWT, IAM, Cognito, and custom Lambda authorizers:

http: {
  method: 'POST',
  path: '/api/payments/charge',
  auth: {
    type: 'jwt',
    issuer: 'https://auth.example.com',
    audience: ['api.example.com']
  }
}

Or use Cognito with minimal configuration:

auth: {
  type: 'cognito',
  userPoolId: 'us-east-1_xxxxx',
  region: 'us-east-1'
}

HTTP API Authorization – Lifecycle & Behavior

Declarative route‑level security for your API endpoints:

React SSR with Streaming

Server‑side rendering with renderToPipeableStream() and multi‑layer caching:

• CloudFront edge caching – sub‑200 ms TTFB for cached routes.
• S3 HTML cache – deterministic ETags, automatic invalidation.
• Streaming HTML – faster Time‑to‑First‑Byte.

runtimeAsync Data Loading

Replace React Router’s loader with a framework‑level abstraction:

const routes: RuntimeRoute[] = [
  {
    path: '/products/:id',
    Component: ProductPage,
    runtimeAsync: [productRetriever, reviewsRetriever] // Parallel execution
  }
];

• Parallel data fetching with Promise.allSettled.
• Automatic SEO metadata loading.
• Server‑side execution with client hydration.
• Type‑safe useRuntimeData() hook.

Built‑in SEO Management

SEO metadata is stored in DynamoDB and served automatically for each route, ensuring up‑to‑date Open Graph, Twitter Card, and JSON‑LD data without extra effort.

Data with Automatic Updates

// RuntimeHeadManager handles everything

// Access SEO data in components
const seo = useRuntimeSeoMeta();

• Title, description, Open Graph, Twitter Cards
• JSON‑LD structured data
• Client‑side navigation updates

CLI tools: runtime seo init, runtime seo sync

Development Server with HMR

Local development with Hot Module Replacement:

npx runtime dev

• File watching with esbuild
• WebSocket‑based live reload
• Lambda emulation
• Instant feedback loop

Zero‑Config AWS Deployment

CDK constructs auto‑provision everything:

npx runtime deploy --stage prod

Creates:

• API Gateway HTTP API with Lambda integrations
• Lambda functions with optimized layers
• S3 buckets for static assets and SSR cache
• CloudFront distribution with edge caching
• DynamoDB for SEO metadata
• IAM roles with least‑privilege permissions

CloudFront Cache Invalidation

Automatic cache clearing on deployment:

// Enabled by default
clearCacheOnDeploy: true

No stale content – users see updates immediately.

CLI Reference

CLI Commands

# Initialize new project
npx @worktif/runtime init

# Development
npx runtime dev              # Start dev server with HMR
npx runtime build           # Build all targets

# Deployment
npx runtime deploy --stage dev
npx runtime destroy --stage dev

# SEO Management
npx runtime seo init
npx runtime seo sync --stage dev

# Utilities
npx runtime cache-clear --stage dev
npx runtime stacks list
npx runtime doctor

Multi‑Stack Architecture

Reliable deployments with infrastructure/runtime separation:

Lambda functions receive the correct environment variables on first deployment – no chicken‑and‑egg problems.

Performance Targets

• Lambda bundle: (details omitted in source)
• Examples: (details omitted in source)

Ready to build? Run npx @worktif/runtime init and ship your first unified server‑less application today.