Express + tRPC + React Example

A split client/server example with shared rules, tRPC middleware, and React UI checks

Purpose

examples/express-trpc-react demonstrates a fuller stack: Express hosts the tRPC server, React renders the client, and both sides share the same typed permission vocabulary.

What it demonstrates

shared permission definitions in one module
server-side permission setup inside a tRPC procedure middleware
permix.checkMiddleware(...) for tRPC procedure protection
client-side React checks against the same role model

Core idea

The shared rules module defines role-specific permissions once:

shared/permix.ts

export function getRules(role: 'admin' | 'user') {
  const rolesMap = {
    admin: adminPermissions,
    user: userPermissions,
  }

  return rolesMap[role]
}

The server attaches those rules to procedure context:

server/main.ts

ctx: {
  permix: permix.setup(getRules(user.role)),
},

And the client uses the same model for UI gating before making requests.

Run it

cd examples/express-trpc-react
pnpm dev:server

In a second terminal:

cd examples/express-trpc-react
pnpm dev:client

Key files

shared/permix.ts: shared permission definition and role rules
server/main.ts: Express+tRPC server and protected procedures
client/src/permix.ts: client-side Permix instance
client/src/App.tsx: UI checks and tRPC calls

When to use it

Use this example when you want one typed permission contract shared between API middleware and a separate frontend.

Source code

Browse the example on GitHub