Skip to content
Porulle Porulle

Frontend Integration

Porulle is a backend framework. Your storefront calls its REST API. This section covers the established patterns for wiring the API into a TypeScript frontend with full type safety end-to-end.

Next.js Mount Porulle as a Hono app inside a Next.js route handler, share types between server components and client components.
TanStack Start Server functions calling Porulle's LocalAPI in-process — zero HTTP overhead.
Typed SDK Client @porulle/sdk plus React Query hooks. Compile-time validated requests and responses against your OpenAPI spec.

The general pattern

Section titled “The general pattern”

Porulle exposes its API at /api/* (mounted by createServer). Every route is documented in the OpenAPI spec served at /api/doc. Generate TypeScript types from that spec, then call the API through @porulle/sdk for end-to-end type safety:

Terminal window
bunx openapi-typescript http://localhost:4000/api/doc -o src/generated/api-types.ts
import { createClient } from "@porulle/sdk";
import type { paths } from "./generated/api-types";


const client = createClient<paths>({
  baseUrl: process.env.NEXT_PUBLIC_API_URL!,
});


const { data } = await client.GET("/api/catalog/entities", {
  params: { query: { type: "product", limit: 10 } },
});

Where to next

Section titled “Where to next”