🌾 OATS - OpenAPI TypeScript Sync

Automatically sync OpenAPI specs to TypeScript clients. No manual steps, just real-time updates.

🚀 Quick Start

1# Install
2npm install -D @tryloop/oats
3
4# Initialize config
5npx oats init
6
7# Start development
8npx oats start

🎯 What is OATS?

OATS eliminates the manual 6-step workflow of syncing OpenAPI changes:

1. Wait for backend to regenerate OpenAPI spec
2. Copy spec to client generator
3. Run generator
4. Build client
5. Link to frontend
6. Restart frontend

With OATS: Change your API → Everything syncs automatically ✨

📋 Configuration

OATS supports multiple configuration formats:

JSON Configuration

1{
2  "$schema": "node_modules/@tryloop/oats/schema/oats.schema.json",
3  "services": {
4    "backend": {
5      "path": "./backend",
6      "port": 8000,
7      "startCommand": "npm run dev",
8      "apiSpec": {
9        "path": "/api/openapi.json"
10      }
11    },
12    "client": {
13      "path": "./api-client",
14      "packageName": "@myorg/api-client",
15      "generator": "@hey-api/openapi-ts"
16    },
17    "frontend": {
18      "path": "./frontend",
19      "port": 3000,
20      "startCommand": "npm run dev"
21    }
22  }
23}

TypeScript Configuration

1import { defineConfig } from '@tryloop/oats'
2
3export default defineConfig({
4  services: {
5    backend: {
6      path: './backend',
7      port: 8000,
8      startCommand: 'npm run dev',
9      apiSpec: {
10        path: '/api/openapi.json'
11      }
12    },
13    client: {
14      path: './api-client',
15      packageName: '@myorg/api-client',
16      generator: '@hey-api/openapi-ts'
17    },
18    frontend: {
19      path: './frontend',
20      port: 3000,
21      startCommand: 'npm run dev'
22    }
23  }
24})

Note: TypeScript configs are fully supported. OATS includes esbuild for consistent transpilation across all environments.

JavaScript Configuration

1const { defineConfig } = require('@tryloop/oats')
2
3module.exports = defineConfig({
4  // Same structure as TypeScript config
5})

🌐 Supported Technologies

Backend Frameworks

Language	Frameworks	OpenAPI Support
Node.js	Express, Fastify, NestJS, Koa, Hapi	Static files or runtime generation
Python	FastAPI, Flask, Django REST	Runtime endpoints (e.g., /openapi.json)

Frontend Frameworks

All major frameworks: React, Vue, Angular, Svelte, Next.js, Nuxt, Remix

TypeScript Client Generators

• @hey-api/openapi-ts (Recommended)
• swagger-typescript-api
• openapi-generator-cli
• Custom generators (via generateCommand)

🔧 CLI Commands

Command	Description	Options
oats start	Start all services with auto-sync	--config, --quiet, --init-gen
oats init	Create configuration interactively	--force, --yes
oats validate	Validate configuration file	--config
oats detect	Auto-detect project structure	-

🎨 Key Features

🔄 Real-time Synchronization

• File watching with intelligent debouncing
• Smart change detection - ignores formatting changes
• Hash-based caching - skip unnecessary regeneration
• Concurrent sync prevention - no duplicate operations

🛠️ Developer Experience

• Auto port management - kills conflicting processes
• Cross-platform support - Windows, macOS, Linux
• Config hot-reload - changes restart services automatically
• IntelliSense support - JSON schema for autocompletion
• Multiple config formats - JSON, JS, or TypeScript (with built-in transpilation)
• Automatic backend URL injection - Frontend uses local API in dev, production in prod

🚀 Performance

• 45% faster sync than manual process
• Incremental builds when possible
• Parallel service startup
• Efficient polling for runtime API specs

📚 Examples

Python FastAPI + React

1{
2  "services": {
3    "backend": {
4      "path": "../backend",
5      "port": 8000,
6      "runtime": "python",
7      "python": {
8        "virtualEnv": ".venv"
9      },
10      "startCommand": ".venv/bin/uvicorn main:app --reload",
11      "apiSpec": {
12        "path": "/openapi.json"
13      }
14    },
15    "client": {
16      "path": "../api-client",
17      "packageName": "@myapp/api",
18      "generator": "@hey-api/openapi-ts"
19    },
20    "frontend": {
21      "path": "./",
22      "port": 3000,
23      "startCommand": "npm start"
24    }
25  }
26}

NestJS + Next.js Monorepo

1{
2  "services": {
3    "backend": {
4      "path": "./apps/api",
5      "port": 3333,
6      "startCommand": "nx serve api",
7      "apiSpec": {
8        "path": "swagger.json"
9      }
10    },
11    "client": {
12      "path": "./packages/api-client",
13      "packageName": "@myapp/api-client",
14      "generator": "custom",
15      "generateCommand": "yarn openapi-ts"
16    },
17    "frontend": {
18      "path": "./apps/web",
19      "port": 4200,
20      "startCommand": "nx serve web"
21    }
22  }
23}

📖 Configuration Reference

Service Configuration

Property	Description	Required
path	Path to service directory	✅
port	Port number (backend/frontend)	⚠️
startCommand	Command to start service	✅
runtime	"node" or "python"	❌
apiSpec.path	Path to OpenAPI spec	✅

⚠️ Port is required for backend/frontend services, but not for client

Sync Options

Option	Default	Description
strategy	"smart"	"smart" or "aggressive"
debounceMs	1000	Delay before regenerating
autoLink	true	Auto-link packages
pollingInterval	5000	For runtime API specs

Log Options

Option	Default	Description
level	"info"	"debug", "info", "warn", "error"
colors	true	Enable colored output
timestamps	false	Show timestamps in logs
showServiceOutput	true	Display output from services

🛡️ Troubleshooting

Port conflicts

OATS automatically handles port conflicts. To disable:

1{
2  "services": {
3    "backend": {
4      "env": {
5        "OATS_AUTO_KILL_PORTS": "false"
6      }
7    }
8  }
9}

Client not updating

1. Check package is linked: npm ls @myorg/api-client
2. For Vite: Exclude from optimization in vite.config.ts
3. Ensure packageName matches your client's package.json

Automatic Backend URL Injection

OATS automatically injects your backend URL into your frontend environment:

1// Your frontend code
2const API_URL = import.meta.env.VITE_OATS_BACKEND_BASE_URL || 'https://api.production.com'

How it works:

1. OATS detects your frontend framework (Vite, CRA, Next.js, etc.)
2. Injects the backend URL with the correct prefix:
   • Vite: VITE_OATS_BACKEND_BASE_URL
   • Create React App: REACT_APP_OATS_BACKEND_BASE_URL
   • Next.js: NEXT_PUBLIC_OATS_BACKEND_BASE_URL
   • Vue CLI: VUE_APP_OATS_BACKEND_BASE_URL
3. Your app uses local backend when running with OATS, production otherwise

No configuration needed - it just works!

TypeScript config issues

OATS fully supports TypeScript configs (.ts files) with built-in transpilation:

• Configs work consistently across all environments
• No additional setup or dependencies required
• Use ESM syntax: export default defineConfig({...})

Command not found

Use npx or add to scripts:

1{
2  "scripts": {
3    "dev:sync": "oats start"
4  }
5}

🤝 Contributing

Contributions welcome! See CONTRIBUTING.md for details.

1# Clone repo
2git clone https://github.com/loopkitchen/oats.git
3
4# Install dependencies
5yarn install
6
7# Run tests
8yarn test
9
10# Start development
11yarn dev

📄 License

MIT © Hari Shekhar

---

GitHub • npm • Issues