PWA 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 ⛏️

🧩 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/client/tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@trpc": ["trpc"],
      "trpc": ["../../server/trpc"],
      "trpc/trpc": ["../../server/trpc/trpc"]
    }
  },
}

🚀 Getting started

Note To run locally, trigger pnpm install and pnpm dev