/react-vite-trpc

template for monorepo client (react +vite) + server (express + tRPC), with emphasis on using absolute paths

Primary LanguageTypeScript

🛠️ Monorepo template

A template that provides a straightforward and flexible way to use the benefits of tRPC in your React projects. It emphasizes the use of absolute paths and a monorepo approach that significantly improves the developer experience. If you're looking for a clean setup with pure React and modularization, this template is an excellent place to start!

🔧 Stack

TypeScript React Vite NodeJS Express.js tRPC Turborepo

🧩 The challenge

This setup faced a challenge while importing the AppRouter from the server folder to the client folder, which resulted in Typescript server errors related to imports from the 'trpc' path on the server side.

The solution leverages Typescript references to allow importing the AppRouter on the client side while using absolute paths on the server side.

// apps/web/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "references": [{ "path": "../server" }] <~ fixes the /server references on the /web
}

// apps/web/package.json
{
  "scripts": {
    "prebuild": "tsc -b", <~ the -b flag is crucial when building an app that has references in its tsconfig.json
    "build": "vite build"
  }
}

// apps/server/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist", <~ required, sets the build destination folder
    "composite": true <~ required to make TS references work
  },
  "ts-node": { "swc": true }
}

🚀 Getting started

Note To run locally, trigger pnpm install and pnpm dev