README.md

🛠️ 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	Highlights	Quick start	Challenge	Scripts	Env	Ports	License

🔧 Stack

🌟 Highlights

Global	Server	Web
✅ Envs validation with envalid ✨ prettier + eslint ➡️ Auto sorting imports with @trivago/prettier-plugin-sort-imports 🚀 Simple Github Actions workflow for ts/lint check + running tests 📦 Bundling local packages with tsup ⚙️ pm2 for running server as a background process (i.e. for test coverage)	🖧 Express + tRPC ✅ vitest (unit / integration / e2e tests) + test coverage (istanbul) 🔑 separated .env files for development and testing 🛠️ Absolute paths set up with module-alias ⚡ Server compilation with swc 🔄 nodemon autoreload based on source code and local packages	⚛️ React + Vite 🏗️ Feature-Driven Development architecture 💅 styled-components + stylelint 🛤️ Routing with @tanstack/router ✅ vitest (unit / integration) + test coverage (istanbul) 🌐 cypress (e2e)

🚀 Quick start

Preview the deployment: https://react-vite-trpc.onrender.com

For local execution, use pnpm install and pnpm dev.

Customization & tips:

• To tailor the template to your needs, replace of @react-vite-trpc with @your-idea (you can use CMD + SHIFT + H in VS Code to do this globally)

• When deploying, make sure to update the host property in the HttpService class (@react-vite-trpc\config\src\services\httpService.ts)

• Adjust the preferred order of imports in .prettierrc files using the importOrder property

• When adding a new local package (i.e. /@react-vite-trpc/new-package), remember to update the watch array in nodemon.json and provide appropriate TypeScript references in tsconfig.json files for an enhanced DX

• The test coverage .lcov files (generated with pnpm test:coverage), can be easily leveraged with VS Code extension Coverage Gutters

🧩 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",
    "outDir": "dist",
  },
  "references": [{ "path": "../server" }] <~ fixes the /server references on the /web
}

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

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

⌨ Scripts

command	description
pnpm start	Runs the production build of the server (/server)
pnpm pm2:start	Runs the server production build as a background process, using pm2 (/server)
pnpm pm2:delete	Deletes all pm2 processes (/server)
pnpm pm2:logs	Shows logs for pm2 (/server)
pnpm dev	Launches apps and bundles all packages in watch mode
pnpm lint	Performs an eslint check through all workspaces
pnpm lint:fix	Performs an eslint fix through all workspaces
pnpm ts:check	Performs a TypeScript check through all workspaces
pnpm ts:references	Syncs TypeScript references in all tsconfig.json files + updates nodemon.json watch array
pnpm stylelint	Performs an stylelint check through all workspaces
pnpm check	Performs eslint, TypeScript, and stylelint checks through all workspaces
pnpm build	Builds all apps
pnpm build:lib	Bundles all packages
pnpm test:unit	Runs unit tests in watch mode
pnpm test:unit:run	Runs unit tests once
pnpm test:integration	Runs integration tests in watch mode
pnpm test:integration:run	Runs integration tests once
pnpm test:e2e	Runs e2e tests in watch mode
pnpm test:e2e:run	Runs e2e tests once
pnpm test:coverage	Generates test coverage reports
pnpm test:coverage:preview	Generates test coverage reports and opens preview
pnpm cypress	Opens the Cypress UI (/web)
pnpm cypress:install	Installs the Cypress (/web)
pnpm postinstall	Ensures that local or CI environment is ready after installing packages

🔒 Envs

Envs are validated with the package envalid. Check out .env-example & .env.test-example files

If the pnpm dev script is executed without the required environment variables, the application will output similar details in the console:

================================
Missing environment variables:
PORT: Port the Express server is running on (eg. "3001"). See https://expressjs.com/en/starter/hello-world.html
================================

🌐 Ports

• 🌐 :3000 - Web
• 🖥️ :3001 - Server

📜 License

The MIT License (MIT)