Back to Trpc

Example Apps

www/versioned_docs/version-10.x/main/example-apps.mdx

11.16.05.3 KB
Original Source

import TabItem from '@theme/TabItem'; import Tabs from '@theme/Tabs';

:::note Although it is possible to install the examples using any of listed package managers, the examples are all configured to use pnpm as the script runner, so make sure to install it first.

If you wish to use npm or yarn, make sure to update the relevant package.json scripts entries in generated example. :::


<Tabs> <TabItem value="npm" label="npm" default>
bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
</TabItem> <TabItem value="yarn" label="yarn">
sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
</TabItem> <TabItem value="pnpm" label="pnpm">
sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
</TabItem> <TabItem value="bun" label="bun">
sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
</TabItem> </Tabs>

create-t3-turbo - T3 Stack with Expo and Turborepo

<Tabs> <TabItem value="git" label="git">
bash
git clone [email protected]:t3-oss/create-t3-turbo.git
</TabItem> </Tabs>

Next.js starter with Prisma, E2E testing, ESLint, next-auth, WebSockets, and subscriptions

<Tabs> <TabItem value="npm" label="npm" default>
bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
</TabItem> <TabItem value="yarn" label="yarn">
sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
</TabItem> <TabItem value="pnpm" label="pnpm">
sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
</TabItem> <TabItem value="bun" label="bun">
sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
</TabItem> </Tabs>

Next.js Todo MVC example with SSG and Prisma

<Tabs> <TabItem value="npm" label="npm" default>
bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo
</TabItem> <TabItem value="yarn" label="yarn">
sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo
</TabItem> <TabItem value="pnpm" label="pnpm">
sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo
</TabItem> <TabItem value="bun" label="bun">
sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo
</TabItem> </Tabs>

Minimal (Hello world) server and client in Node.js


Vanilla standalone server and Node.js procedure calls


Express server and Node.js procedure calls


Fastify server with WebSockets and Node.js procedure calls


SvelteKit with Prisma


Sign-In With Ethereum Authentication With Express

<Tabs> <TabItem value="git" label="git">
bash
git clone [email protected]:codingwithmanny/trpc-siwe-monorepo.git
</TabItem> </Tabs>

Separate backend & frontend repositories