DEV Community

Cover image for Runtime 0.3.0: The Unified Serverless Framework for TypeScript
Raman Marozau
Raman Marozau

Posted on

Runtime 0.3.0: The Unified Serverless Framework for TypeScript

#serverless #aws #react #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]
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

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:

Context Detection Behavior
Browser window exists Hydrates React, client-side routing
Lambda AWS_LAMBDA_FUNCTION_NAME Executes handler with DI
CDK CDK synthesis context Generates CloudFormation

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) };
  }
};
Enter fullscreen mode Exit fullscreen mode

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]
  }
}
Enter fullscreen mode Exit fullscreen mode

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) };
  }
};
Enter fullscreen mode Exit fullscreen mode

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']
  }
}
Enter fullscreen mode Exit fullscreen mode

Or use Cognito with minimal configuration:

auth: {
  type: 'cognito',
  userPoolId: 'us-east-1_xxxxx',
  region: 'us-east-1'
}
Enter fullscreen mode Exit fullscreen mode

HTTP API Authorization – Lifecycle & Behavior

Declarative route-level security for your API endpoints:

Runtime Web HTTP API Authorization – Lifecycle & Behavior

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
  }
];
Enter fullscreen mode Exit fullscreen mode
  • 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();
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Multi-Stack Architecture

Reliable deployments with infrastructure/runtime separation:

Stack Resources Purpose
Infra Stack S3, DynamoDB, CloudFront Long-lived infrastructure
Runtime Web Stack Lambda, API Gateway, Layers, etc. Microservices runtime
Runtime Stack Lambda, API Gateway, Layers Browser Application runtime

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)