Runtime 0.3.0: The Unified Serverless Framework for TypeScript

One codebase. Three contexts. Zero configuration.

We're thrilled to announce Runtime Web 0.3.0 – a complete serverless framework that unifies Lambda backend, AWS CDK infrastructure, and 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, deploy with a single command.

runtime({

  app: ({ router }) => <App router={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<PaymentTies> = {

  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

Organize your backend into logical microservices with isolated DI containers:

register: {

  payments: {

    ties: [PaymentsTies, BillingTies],

    lambdas: [chargeHandler, refundHandler, webhookHandler]

  },

  users: {

    ties: [UsersTies, AuthTies],

    lambdas: [createUserHandler, getUserHandler]

  }

}

Each microservice gets its own Lambda Layer with pre-built dependencies. Zero cold-start overhead from unused services.

Lambda Cold Start Initialization

Execute expensive operations once, not on every request:

export const getUserHandler: LambdaDefinition<UserTies> = {

  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 first request hits


• 
  event.snapshot is fully typed — IDE autocomplete for cached resources

Works at microservice 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-200ms 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

DynamoDB-backed SEO metadata with automatic <head> updates:

// RuntimeHeadManager handles everything

<RuntimeHeadManager />



// 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 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 correct environment variables on first deployment. No chicken-and-egg problems.

Performance

• 
  Lambda bundle: <10MB compressed (AWS limit enforced)


• 
  Browser bundle: <500KB gzipped target


• 
  Cold start: <2s with optimized layers


• 
  SSR render: <500ms target


• 
  TTFB (cache hit): <200ms

Getting Started

# Create new project

mkdir my-app && cd my-app

npx @worktif/runtime init



# Start development

npx runtime dev



# Deploy to AWS

npx runtime deploy --stage dev

Package Exports

// Main library

import { runtime, runtimeRouter, RuntimeHeadManager } from '@worktif/runtime';

import type { LambdaDefinition, RuntimeRoute } from '@worktif/runtime';



// CDK constructs

import { RuntimeInfraStac, RuntimeStack, RuntimeWebStack } from '@worktif/runtime/infra';

Migration from 0.2.x

Fully backward compatible. Existing deployments update in-place:

1. Update package: npm install @worktif/runtime@latest
   


2. Optionally adopt new features (object-based ties, runtimeAsync)


3. Deploy: npx runtime deploy --stage dev
   

No breaking changes. Runtime Web Core is an additive layer.

What's Next

• Lambda invocation API for service-to-service calls


• Enhanced microservice bundle isolation


• Performance monitoring dashboard


• Multi-region deployment support

Links

• 
  Documentation: https://runtimeweb.com/docs/getting-started
  


• 
  Examples: https://runtimeweb.com/docs/api-reference
  

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