kevinzai/commander/api-first-workflow

# openapi.yaml
openapi: 3.1.0
info:
  title: My API
  version: 1.0.0
  description: API description
servers:
  - url: http://localhost:3001
    description: Development
  - url: https://api.example.com
    description: Production
 
paths:
  /api/v1/users:
    get:
      operationId: listUsers
      summary: List all users
      parameters:
        - $ref: '#/components/parameters/PageParam'
        - $ref: '#/components/parameters/LimitParam'
      responses:
        '200':
          description: Paginated list of users
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/PaginatedUsers'
 
  /api/v1/users/{id}:
    get:
      operationId: getUser
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: string
            format: uuid
      responses:
        '200':
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
        '404':
          $ref: '#/components/responses/NotFound'
 
components:
  schemas:
    User:
      type: object
      required: [id, email, name, createdAt]
      properties:
        id:
          type: string
          format: uuid
        email:
          type: string
          format: email
        name:
          type: string
        createdAt:
          type: string
          format: date-time
 
  parameters:
    PageParam:
      name: page
      in: query
      schema:
        type: integer
        minimum: 1
        default: 1
    LimitParam:
      name: limit
      in: query
      schema:
        type: integer
        minimum: 1
        maximum: 100
        default: 20
 
  responses:
    NotFound:
      description: Resource not found
      content:
        application/json:
          schema:
            type: object
            properties:
              error:
                type: object
                properties:
                  code:
                    type: string
                    example: NOT_FOUND
                  message:
                    type: string

# Generate TypeScript types from OpenAPI spec
npx openapi-typescript openapi.yaml -o src/types/api.d.ts
 
# Or use zodios for runtime validation
npx openapi-zod-client openapi.yaml -o src/types/api.ts

# Prism mock server — instant API from spec
npx @stoplight/prism-cli mock openapi.yaml --port 4010
 
# Frontend can develop against http://localhost:4010 immediately

// Validate implementation matches spec
import { createDocument } from 'zod-openapi';
import spec from './openapi.yaml';
describe('API Contract', () => {
  it('GET /api/v1/users returns valid response', async () => {
    const response = await app.inject({ method: 'GET', url: '/api/v1/users' });
    const body = JSON.parse(response.body);
    // Validate against OpenAPI schema
    expect(response.statusCode).toBe(200);
    expect(body).toHaveProperty('data');
    expect(body).toHaveProperty('pagination');
    expect(body.data[0]).toHaveProperty('id');
    expect(body.data[0]).toHaveProperty('email');
  });
});

// Swagger UI setup (Fastify)
import swagger from '@fastify/swagger';
import swaggerUI from '@fastify/swagger-ui';
await app.register(swagger, {
  openapi: {
    openapi: '3.1.0',
    info: { title: 'My API', version: '1.0.0' },
  },
});
await app.register(swaggerUI, { routePrefix: '/docs' });
// Alternative: Scalar (modern UI)
// https://github.com/scalar/scalar