Installation

npm install @btst/stack @tanstack/react-query

pnpm add @btst/stack @tanstack/react-query

yarn add @btst/stack @tanstack/react-query

import { createBackendStack } from "@btst/stack/api"
import { createPrismaAdapter } from "@btst/adapter-prisma"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  plugins: {
    // Add your backend plugins here
  },
  adapter: (db) => createPrismaAdapter(prisma, db, { 
    provider: "postgresql" // or "mysql", "sqlite", "cockroachdb", "mongodb"
  })
})

export { handler, dbSchema }

import { createBackendStack } from "@btst/stack/api"
import { createDrizzleAdapter } from "@btst/adapter-drizzle"
import { drizzle } from "drizzle-orm/postgres-js" // or "drizzle-orm/mysql2", "drizzle-orm/better-sqlite3", etc.
import postgres from "postgres"

const client = postgres(process.env.DATABASE_URL!)
const drizzleDb = drizzle(client)

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  plugins: {
    // Add your backend plugins here
  },
  adapter: (db) => createDrizzleAdapter(drizzleDb, db, {})
})

export { handler, dbSchema }

import { createBackendStack } from "@btst/stack/api"
import { createKyselyAdapter } from "@btst/adapter-kysely"
import { Kysely, PostgresDialect } from "kysely"
import { Pool } from "pg"

const kyselyDb = new Kysely({
  dialect: new PostgresDialect({
    pool: new Pool({ connectionString: process.env.DATABASE_URL })
  })
})

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  plugins: {
    // Add your backend plugins here
  },
  adapter: (db) => createKyselyAdapter(kyselyDb, db, {})
})

export { handler, dbSchema }

import { createBackendStack } from "@btst/stack/api"
import { createMongodbAdapter } from "@btst/adapter-mongodb"
import { MongoClient } from "mongodb"

const client = new MongoClient(process.env.MONGODB_URI!)
const mongoDb = client.db()

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  plugins: {
    // Add your backend plugins here
    // blog: blogBackendPlugin()
  },
  adapter: (db) => createMongodbAdapter(mongoDb, db, {})
})

export { handler, dbSchema }

// IMPORTANT: Memory adapter is used for development and testing only
import { createBackendStack } from "@btst/stack/api"
import { createMemoryAdapter } from "@btst/adapter-memory"

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  plugins: {
    // Add your backend plugins here
  },
  adapter: (db) => createMemoryAdapter(db)({})
})

export { handler, dbSchema }

npx @btst/cli generate --config=lib/stack.ts --orm=prisma --output=schema.prisma

npx @btst/cli generate --config=lib/stack.ts --orm=drizzle --output=src/db/schema.ts

DATABASE_URL=sqlite:./dev.db npx @btst/cli generate --config=lib/stack.ts --orm=kysely --output=migrations/schema.sql

npx @btst/cli generate --config=lib/stack.ts --orm=kysely --output=migrations/schema.sql --database-url=sqlite:./dev.db

npx @btst/cli generate --config=lib/stack.ts --orm=kysely --output=migrations/schema.sql --database-url=postgres://user:pass@localhost:5432/db

import { toNextRouteHandlers } from "@btst/stack/next"
import { handler } from "@/lib/stack"

export const { GET, POST, PUT, PATCH, DELETE } = toNextRouteHandlers(handler)

import { toReactRouterHandlers } from "@btst/stack/react-router"
import { handler } from "~/lib/stack"

// React Router's build can't strip destructured exports from route
// modules, so assign loader/action individually.
const handlers = toReactRouterHandlers(handler)
export const loader = handlers.loader
export const action = handlers.action

import { createFileRoute } from "@tanstack/react-router"
import { toTanStackHandlers } from "@btst/stack/tanstack"
import { handler } from "@/lib/stack"

export const Route = createFileRoute("/api/data/$")({
  server: { handlers: toTanStackHandlers(handler) },
})

import express from "express"
import { handler } from "./lib/stack"
import { toNodeHandler } from "@btst/stack/api"

const app = express()

// Convert Web API handler to Node.js handler
const nodeHandler = toNodeHandler(handler)

// Mount at your basePath
app.use("/api/data", nodeHandler)

app.listen(3000, () => {
  console.log("Server running on http://localhost:3000")
})

import express from "express"
import { handler } from "./lib/stack"
import { toNodeHandler } from "@btst/stack/api"

const app = express()
app.use(express.json()) // Parse JSON bodies

// Convert and mount BTST handler
app.all("/api/data/*", toNodeHandler(handler))

app.listen(3000)

"use client"

import { useMemo, useState } from "react"
import { QueryClientProvider } from "@tanstack/react-query"
import { StackProvider } from "@btst/stack/context"
import { nextRouter } from "@btst/stack/next"
import { getOrCreateQueryClient } from "@/lib/query-client"
import { getStackClient, type StackClientOptions } from "@/lib/stack-client"
import { uploadImage } from "@/lib/uploads"

export function PagesClientLayout({ children, clientOrigins }: {
  children: React.ReactNode
  clientOrigins: StackClientOptions
}) {
  const [queryClient] = useState(() => getOrCreateQueryClient())
  const clientStack = useMemo(
    () => getStackClient(queryClient, clientOrigins),
    [clientOrigins.apiOrigin, clientOrigins.siteOrigin, queryClient],
  )

  return (
    <QueryClientProvider client={queryClient}>
      <StackProvider
        stack={clientStack}
        router={nextRouter()}
        overrides={{ blog: { uploadImage } }}
      >
        {children}
      </StackProvider>
    </QueryClientProvider>
  )
}

import { headers } from "next/headers"
import { PagesClientLayout } from "../../pages/client-layout"
import { getServerClientOriginsFromHeaders } from "@/lib/stack-client.server"

export default async function PagesLayout({ children }) {
  const clientOrigins = getServerClientOriginsFromHeaders(await headers())
  return (
    <PagesClientLayout clientOrigins={clientOrigins}>
      {children}
    </PagesClientLayout>
  )
}

import { useMemo, useState } from "react"
import { Outlet, useLoaderData, type LoaderFunctionArgs } from "react-router"
import { QueryClientProvider } from "@tanstack/react-query"
import { StackProvider } from "@btst/stack/context"
import { reactRouter } from "@btst/stack/react-router"
import { getOrCreateQueryClient } from "~/lib/query-client"
import { getStackClient } from "~/lib/stack-client"
import { getServerClientOrigins } from "~/lib/stack-client.server"
import { uploadImage } from "~/lib/uploads"

export function loader({ request }: LoaderFunctionArgs) {
  return getServerClientOrigins(new URL(request.url).origin)
}

export default function PagesLayout() {
  const [queryClient] = useState(() => getOrCreateQueryClient())
  const { apiOrigin, siteOrigin } = useLoaderData<typeof loader>()
  const clientStack = useMemo(
    () => getStackClient(queryClient, { apiOrigin, siteOrigin }),
    [apiOrigin, queryClient, siteOrigin],
  )

  return (
    <QueryClientProvider client={queryClient}>
      <StackProvider
        stack={clientStack}
        router={reactRouter()}
        overrides={{ blog: { uploadImage } }}
      >
        <Outlet />
      </StackProvider>
    </QueryClientProvider>
  )
}

import { createFileRoute, Outlet } from "@tanstack/react-router"
import { QueryClientProvider } from "@tanstack/react-query"
import { StackProvider } from "@btst/stack/context"
import { tanstackRouter } from "@btst/stack/tanstack"
import { useMemo } from "react"
import { getStackClient } from "@/lib/stack-client"
import { getTrustedClientOrigins } from "@/lib/stack-client.origins"
import { uploadImage } from "@/lib/uploads"

export const Route = createFileRoute("/pages")({
  loader: async () => getTrustedClientOrigins(),
  component: PagesLayout,
})

function PagesLayout() {
  const { queryClient } = Route.useRouteContext()
  const { apiOrigin, siteOrigin } = Route.useLoaderData()
  const clientStack = useMemo(
    () => getStackClient(queryClient, { apiOrigin, siteOrigin }),
    [apiOrigin, queryClient, siteOrigin],
  )

  return (
    <QueryClientProvider client={queryClient}>
      <StackProvider
        stack={clientStack}
        router={tanstackRouter()}
        overrides={{ blog: { uploadImage } }}
      >
        <Outlet />
      </StackProvider>
    </QueryClientProvider>
  )
}

import { createNextPage } from "@btst/stack/next"
import { headers } from "next/headers"
import { getOrCreateQueryClient } from "@/lib/query-client"
import { getStackClientForRequest } from "@/lib/stack-client.server"

export const dynamic = "force-dynamic"

const page = createNextPage({
  getStackClient: async (queryClient) =>
    getStackClientForRequest(queryClient, {
      headers: new Headers(await headers()),
    }),
  getQueryClient: getOrCreateQueryClient,
})
export default page.Page
export const generateMetadata = page.generateMetadata

import { createReactRouterPage } from "@btst/stack/react-router"
import { getOrCreateQueryClient } from "~/lib/query-client"
import { getStackClient } from "~/lib/stack-client"

const page = createReactRouterPage({ getStackClient, getQueryClient: getOrCreateQueryClient })
export const loader = page.loader
export const meta = page.meta
export const ErrorBoundary = page.ErrorBoundary
export default page.Component

import { createFileRoute } from "@tanstack/react-router"
import { createTanStackPageOptions } from "@btst/stack/tanstack"
import { getStackClient } from "@/lib/stack-client"

export const Route = createFileRoute("/pages/$")(
  createTanStackPageOptions({ getStackClient }),
)

import type { MetadataRoute } from "next"
import { QueryClient } from "@tanstack/react-query"
import { getStackClient } from "@/lib/stack-client"

export const dynamic = "force-dynamic"

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const queryClient = new QueryClient()
  const stackClient = getStackClient(queryClient)
  return stackClient.generateSitemap()
}

import type { Route } from "./+types/sitemap.xml"
import { QueryClient } from "@tanstack/react-query"
import { getStackClient } from "~/lib/stack-client"
import { sitemapEntryToXmlString } from "@btst/stack/client"

export async function loader({}: Route.LoaderArgs) {
  const queryClient = new QueryClient()
  const stackClient = getStackClient(queryClient)
  const entries = await stackClient.generateSitemap()
  const xml = sitemapEntryToXmlString(entries)

  return new Response(xml, {
    headers: {
      "Content-Type": "application/xml; charset=utf-8",
      "Cache-Control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=86400",
    },
  })
}

// Note: [.] syntax in TanStack Router creates a route for "sitemap.xml"
import { createFileRoute } from "@tanstack/react-router"
import { QueryClient } from "@tanstack/react-query"
import { getStackClient } from "@/lib/stack-client"
import { sitemapEntryToXmlString } from "@btst/stack/client"

export const Route = createFileRoute("/sitemap.xml")({
  server: {
    handlers: {
      GET: async () => {
        const queryClient = new QueryClient()
        const stackClient = getStackClient(queryClient)
        const entries = await stackClient.generateSitemap()
        const xml = sitemapEntryToXmlString(entries)

        return new Response(xml, {
          headers: {
            "Content-Type": "application/xml; charset=utf-8",
            "Cache-Control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=86400",
          },
        })
      },
    },
  },
})