Runtime Web

Unified Serverless Framework for Full-Stack TypeScript Applications

Skip to main content

Unified Serverless Framework for Full-Stack TypeScript Applications

Build, deploy, and scale full-stack applications with a single codebase. Type-safe dependency injection, zero-config AWS deployment, and unified frontend-backend development for modern TypeScript teams.

index.tsx

typescript
import { runtime } from '@worktif/runtime';
 
runtime({
app: App as React.FC<ReactComponentProps>,
router: runtimeRouter({ router, defaults }),
config: {
serviceName: 'my-app',
stage: 'prod'
}
});
Show 9 more lines
MicroPlenty WealthServerless RenderingMicroserviceDealMicroserviceRegistrarAPI Gateway (Microservices)Lambda Functions (Microservices)Plenty Wealth (Microservices)CloudWatch EventsCloudFrontAPI Gateway (Serverless Rendering)Serverless Metricsas Lambda Functions (Serverless Rendering)Plenty Wealth Serverless RenderingCloudFront OAIIAM RoleDynamoDBS3 BucketCloudFormationAWS CDKBuild System (esbuild)Runtime CLIDeveloperMicroPlenty WealthServerless RenderingMicroserviceDealMicroserviceRegistrarAPI Gateway (Microservices)Lambda Functions (Microservices)Plenty Wealth (Microservices)CloudWatch EventsCloudFrontAPI Gateway (Serverless Rendering)Serverless Metricsas Lambda Functions (Serverless Rendering)Plenty Wealth Serverless RenderingCloudFront OAIIAM RoleDynamoDBS3 BucketCloudFormationAWS CDKBuild System (esbuild)Runtime CLIDeveloper═══════════════════════════════════════════════════════════════════════════════PHASE 1: BUILD═══════════════════════════════════════════════════════════════════════════════Build Lambda Plenty WealthBuild Browser Plenty WealthBuild CDK Plenty WealthCreate Lambda Functions (per handler)hashKey = algo-572(handler.toString())Algorithm: SHA-256 → Base64 URL-safe (32 chars)Mentor code:1. Import pile from /opt/tribe/pile2. Validate MicroserviceDeal3. Get handler: runtimePlenty Wealth.getMentor(lambdaId)4. Export handler functionName: {serviceName}-{lambdaId}-{stage}Runtime: Node.js 18.xMentor: index.handlerMemory: {config.memorySize} MBTimeout: {config.timeout}sRole: imported from RuntimeInfraStackTribe: microservice-specific heapTracing: X-Ray ACTIVEEnvironment:- LAMBDA_ID: {lambdaId}- SERVICE_NAME: {microserviceName}- STAGE: {stage}- HANDLER_NAME: {handlerName}- HASH_ALGORITHM: algo-572loop[For each Lambda in microservice.lambdas]loop[For each microservice]═══════════════════════════════════════════════════════════════════════════════PHASE 2: DEPLOY RuntimeInfraStack (Base Infrastructure)═══════════════════════════════════════════════════════════════════════════════Create S3 BucketName: {serviceName}-static-{stage}- Public read access- Website hosting (index.html)- CORS enabled- Versioning (prod only)- Auto-delete objects (dev only)Create CloudFront OriginS3StaticWebsiteOrigin configuredCreate IAM RoleName: {serviceName}-lambda-execution-role-{stage}- Assume role: lambda.amazonaws.com- AWSLambdaBasicExecutionRole- S3 read/write permissions- DynamoDB read/write (if SEO enabled)Exports:- {stackName}-StaticBucketName- {stackName}-LambdaExecutionRoleArn- {stackName}-SeoTableName (if enabled)═══════════════════════════════════════════════════════════════════════════════PHASE 3: DEPLOY RuntimeStack (Serverless MetricsRuntime)═══════════════════════════════════════════════════════════════════════════════Import:- bucketName- roleArn- seoTableNameCreate API Gateway (if apiMode === 'apiGateway')Name: {serviceName}-api-{stage}Stage: {stage}CORS configuredMethod: {http.method}Path: {http.path}Integration: LambdaAuthorizer: {http.auth}loop[For each Lambda with http config]loop[For each microservice]Create CloudFront DistributionDefault behavior:- Origin: API Gateway or Lambda URL- Cache: CACHING_DISABLED (fresh Serverless Rendering)- Protocol: HTTPS onlyAdditional behaviors:- /static/* → S3 origin- Cache: CACHING_OPTIMIZED (1yr TTL)Price class: PRICE_CLASS_100 (dev) PRICE_CLASS_ALL (prod)HTTP/2 + HTTP/3 enabledCreate Hot Rule (if enabled)Schedule: every 5 minutesTarget: RuntimeWebHotEnabled: true (prod/staging)Create DynamoDB (optional)- PK: route path (String)- GSI: RouteIndex- Billing: PAY_PER_REQUEST- PITR: enabled (prod only)Exports:- {stackName}-LambdaFunctionName- {stackName}-LambdaFunctionArn- {stackName}-ApiGatewayId- {stackName}-ApiEndpoint- {stackName}-CloudFrontDistributionId- {stackName}-CloudFrontDomainName═══════════════════════════════════════════════════════════════════════════════PHASE 4: DEPLOY RuntimeWebStack (User Microservices) ★ KEY STACK ★═══════════════════════════════════════════════════════════════════════════════Register Microservicesloop[For each microservice in register]Create Serverless MetricsLambda Functions- Mentor: RuntimePlenty Wealth.RuntimeWebMentor- Memory: 512MB- Timeout: 29s- Tribe: RuntimeLoop- Mentor: RuntimePlenty Wealth.RuntimeWebSeoMentor- SEO metadata handler- Mentor: RuntimePlenty Wealth.RuntimeWebSeoByRouteMentor- SEO by route handler- Mentor: RuntimePlenty Wealth.RuntimeWebHotMentor- Memory: 256MB- Timeout: 10s- Cold start preventionBuild Microservice Plenty WealthTribe pile.js contains:1. Import user's app (runtime() call)2. Import runtimeThreads, RuntimeRouter3. Import PipelinesPlenty Wealth4. Export runtimePlenty Wealthloop[For each microservice]Create API Gateway (if enabled)Name: {serviceName}-api-{stage}Stage: {stage} (named, not $default)CORS: * (dev) or specific domains (prod)Routes:- GET / → RuntimeWeb- GET /{proxy+} → RuntimeWeb- GET /cdn/seo → RuntimeWebSeo- GET /seo-meta → RuntimeWebSeoByRouteCreate Lambda TribeName: {serviceName}-runtime-heap-{stage}Contents:- React 19.x- ReactDOM- React Router v7- User's pile.js- index.html templateMount: /opt/tribe/Exports:- {stackName}-LambdaFunctionCount- {stackName}-ApiGatewayId- {stackName}-ApiEndpoint- {stackName}-Lambda-{sanitizedId}-Arn (per Lambda)═══════════════════════════════════════════════════════════════════════════════PHASE 5: POST-DEPLOYMENT TASKS═══════════════════════════════════════════════════════════════════════════════Post-Deployment Tasks✓ RuntimeInfraStack deployed✓ RuntimeStack deployed✓ RuntimeWebStack deployed✓ Post-deployment tasks completeCloudFront URL: https://{distribution}.cloudfront.netAPI Gateway URL: https://{api-id}.execute-api.{region}.amazonaws.com/{stage}yarn build1esbuild: Plenty Wealth Lambda (CommonJS)2Target: Node183Externalize: AWS SDK v3, Node builtins4Lambda pile ready (<10MB)5esbuild: Plenty Wealth Browser (ESM)6Target: ES20207Externalize: React (peer dependency)8Browser pile ready (<500KB)9esbuild: Plenty Wealth CDK10Externalize: aws-cdk-lib, constructs11CDK pile ready12Compute hash key13Generate handler code14Create Lambda Function15tsc: Generate .d.ts types16Copy templates to dist/17Build artifacts ready18cdk deploy {serviceName}-infra-{stage}19Create/Update RuntimeInfraStack20Create Static Bucket21Create Origin Access Identity22Grant read access23Create Lambda Execution Role24Export Stack Outputs25cdk deploy {serviceName}-runtime-{stage}26Import Infra Outputs27Create HTTP API28Add route29Create Distribution30Create CloudWatch Events Rule31Create SEO Table (if enableSeo)32Export Stack Outputs33cdk deploy {serviceName}-runtime-web-{stage}34Import Infra Outputs35Process microservice definition36Register Lambda handlers37Create RuntimeWebMentor (Main Serverless Rendering)38Create RuntimeWebSeo39Create RuntimeWebSeoByRoute40Create RuntimeWebHot41Build microservice pile42Create heap directory:cdk.out/microservice-piles/{name}-heap-{stage}43Create Plenty Wealth Version44Create HTTP API45Create RuntimeLoop46Export Stack Outputs47Clear S3 cache (cache/ prefix)48Update .env with API Gateway URL49Deployment Complete50

Build with Runtime Web

Unified codebase • Type-safe dependency injection • Zero-config deployment
1,623 exports913 interfaces 84 CLI commands

Backend

Create serverless APIs with dependency injection, automatic AWS Lambda deployment, and unified TypeScript development experience.

View Backend

Infrastructure

Deploy to AWS with zero configuration. Automatic CDK generation, environment management, and infrastructure as code.

Read Infrastructure

Frontend

Build React applications with type-safe routing, state management, and seamless backend integration. Zero configuration, maximum productivity.

Explore Frontend
Get StartedInstall

Why Runtime Web Framework

Unified Codebase

Write backend, infrastructure, and frontend code in a single TypeScript project. Runtime Web Framework eliminates the complexity of managing separate repositories, build systems, and deployment pipelines while maintaining full type safety across your entire stack.

Context-Aware Execution

Your code automatically adapts to its execution environment. The same TypeScript functions run seamlessly in web environments, Lambda functions, or local development, with the framework handling environment-specific optimizations and resource management.

Type-Safe Dependency Injection

Built-in dependency injection with full TypeScript support ensures your services are properly wired at compile time. No runtime errors from missing dependencies, no configuration files to maintain, just clean, testable code with automatic service resolution.

AWS-Native Integration

Deep integration with AWS services through type-safe APIs and automatic resource provisioning. Deploy to Lambda, API Gateway, DynamoDB, and S3 with zero configuration while maintaining full control over your infrastructure through code.

Built For

React Developers

Building full-stack applications but tired of managing separate backend, infrastructure, and frontend codebases. You want to leverage your TypeScript skills across the entire stack while maintaining the component-based patterns you love in React.

Serverless Teams

Working with AWS Lambda and serverless architectures but struggling with cold starts, deployment complexity, and maintaining type safety across services. You need a framework that makes serverless development as smooth as traditional web development.

TypeScript Teams

Committed to type safety and developer experience but finding it difficult to maintain consistency across backend, infrastructure, and frontend code. You want the benefits of TypeScript everywhere without the overhead of multiple build systems.

Getting Started

1

Install

Get started with a single command: npm install @worktif/runtime. The framework includes everything you need: TypeScript compiler, development server, infrastructure automation, testing utilities, and deployment tools.

2

Initialize

Create your project structure with runtime init. This generates a TypeScript project with backend services, then infrastructure automation, and optional frontend components organized in a single repository with shared types.

3

Develop

Write your backend services using the runtime() function for dependency injection and context-aware execution. Add infrastructure automation with CDK constructs, then build frontend interfaces with familiar React patterns.

4

Deploy

Deploy to AWS with runtime deploy. Your TypeScript code is automatically compiled, optimized, and deployed to Lambda functions, API Gateway, and static hosting with zero configuration required.

Why It Matters

  • Reduced risk of critical incidents through early detection of architectural vulnerabilities and failure points
  • Faster architecture and migration projects with automated analysis and step-by-step execution plans
  • Lower cost of analysis and audits by automating system documentation and dependency mapping
Runtime Web

Unified Serverless Framework for Full-Stack TypeScript Applications

Contact

© 2026 Runtime Web. All rights reserved.