Basic tutorial

This tutorial will describe how you can set up Kubb and use the @kubb/swagger-ts plugin to generate types based on the petStore.yaml file.

The setup will contain from the beginning the following folder structure:

.
├── src
├── petStore.yaml
├── kubb.config.ts
└── package.json

Step one

Set up your kubb.config.ts file based on the Quick start.

We will add the plugins @kubb/swagger and @kubb/swagger-ts(which is dependent on the @kubb/swagger plugin). Together these two plugins will generate the TypeScript types.

Next to that, we will also set output to false for the @kubb/swagger plugin because we do not need the plugin to generate the JSON schemas for us.

• For the @kubb/swagger-ts plugin, we will set the output to the models folder.

kubb.config.ts

import { defineConfig } from '@kubb/core'
import { pluginOas } from '@kubb/plugin-oas'
import { pluginTs } from '@kubb/swagger-ts'

export default defineConfig(() => {
  return {
    root: '.',
    input: {
      path: './petStore.yaml',
    },
    output: {
      path: './src',
    },
    plugins: [
      pluginOas(
        {
          output: false,
          validate: true,
        },
      ),
      pluginTs(
        {
          output: {
            path: 'models',
          },
        },
      ),
    ],
  }
})

This will result in the following folder structure when Kubb has been executed

.
├── src/
│   └── models/
│       ├── typeA.ts
│       └── typeB.ts
├── petStore.yaml
├── kubb.config.ts
└── package.json

Step two

Update your package.json and install Kubb, see the installation.

Your package.json will look like this:

package.json

{
  "name": "your project",
  "scripts": {
    "generate": "kubb generate --config kubb.config.js"
  },
  "dependencies": {
    "@kubb/cli": "latest",
    "@kubb/core": "latest",
    "@kubb/swagger": "latest",
    "@kubb/swagger-ts": "latest"
  }
}

Step three

Run the Kubb script with the following command.

bun

bun run generate

pnpm

pnpm run generate

npm

npm run generate

yarn

yarn run generate

Step four

Drink a 🍺 and watch Kubb generate your files.