Type-safe API with hono 4.6.13, drizzle, zod, OpenAPI and scalar

This project get from Syntax YouTube channel.

Project Link Build a documented / type-safe API with hono, drizzle, zod, OpenAPI and scalar

ESLint config

• install pnpm dlx @antfu/eslint-config@latest from repo
• if the above is not work please use pnpm add -D @antfu/eslint-config
• then create config file eslint.config.mjs and page below code

import antfu from "@antfu/eslint-config";

export default antfu(
  {
    type: "app",
    typescript: true,
    formatters: true,
    stylistic: {
      indent: 2,
      semi: true,
      quotes: "double",
    },
    ignores: ["**/migrations/*"],
  },
  {
    rules: {
      "no-console": ["warn"],
      "antfu/no-top-level-await": ["off"],
      "node/prefer-global/process": ["off"],
      "node/no-process-env": ["error"],
      "perfectionist/sort-imports": [
        "error",
        {
          tsconfigRootDir: ".",
        },
      ],
      "unicorn/filename-case": [
        "error",
        {
          case: "kebabCase",
          ignore: ["README.md"],
        },
      ],
    },
  }
);

Hono zod openapi

• install npm i hono zod @hono/zod-openapi from repo

• This is wrapper of hono and extends with zod schema validation and openapi schema generation.

• Zod OpenAPI Hono is an extended Hono class that supports OpenAPI. With it, you can validate values and types using Zod and generate OpenAPI Swagger documentation.

Stoker

• Utilities for hono and @hono/zod-openapi.

• This is boilerplate some codes if you not need install if you copy that code from it.

• you reduce some code like below using stoker

      200:{
           content: {
         "application/json": {
           schema: z.object({
             message: z.string(),
           }),
         },
       },

       description: "Tasks API Index",
     }

• instead of using above one you can use below one.

[HttpStatusCodes.OK]:jsonContent(
  z.object({
    message: z.string(),
  }),
  "Tasks API Index",
);

Logger

• default hono logger

import { logger } from "@hono/logger";
app.use(logger());

• this will give the response like below one

<-- GET /error --> GET /error 500 14ms <-- GET /error --> GET /error 500 1ms <-- GET / --> GET / 200 0ms

• So in here we use hono+pino logger.
• But in here there is an once issue it give more information but not a proper format in that case we usepino-pretty to get proper format.

Method:1 Zod OpenAPI Hono

• zod-openapi is an extended Hono class that supports OpenAPI. With it, you can validate values and types using Zod and generate OpenAPI route documentation.

• This give a simplify way of documentation in json format at /doc end point in this project.

• So you can create endpoint using below example it will generate documentation at /doc end point.

import { createRoute, z } from "@hono/zod-openapi";

import { createRouter } from "@/lib/create-app";

const router = createRouter().openapi(createRoute({
  method: "get",
  path: "/",
  responses: {
    200: {
      content: {
        "application/json": {
          schema: z.object({
            message: z.string(),
          }),
        },
      },

      description: "Tasks API Index",
    },
  },
}), (c) => {
  return c.json({ message: "Tasks API" });
});

export default router;

Method:2 Scalar hono-api-reference

• Scalar is a also Create world-class API Docs with a built-in interactive playground which seamlessly turns to a full featured API Client.
• This is required method one setup and extend it using this scalar to interactive testable api ui interface will created.
• for this install using this package for easily add in your project scalar hono-api-reference.

Important

npm i cross-env this want in window user for run command like env specified command like this cross-env LOG_LEVEL=silent vitest if you put like LOG_LEVEL=silent vitest then it will not work for window.

Thanks for Syntax