react-vite-trpc icon indicating copy to clipboard operation
react-vite-trpc copied to clipboard

verified publisher icon kuubson
→

Metadata

template for monorepo (turborepo): client (React + Vite) + server (Express + tRPC) + vitest + cypress + pnpm, emphasizing the use of absolute paths.

🛠️ 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

TypeScript React Vite Styled Components Cypress

NodeJS Express tRPC Vitest Turborepo

Render GitHub Actions

🌟 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)

← Metadata

71
Stars
4
Forks
Watchers

Owner

verified publisher icon kuubson

Metadata

template for monorepo (turborepo): client (React + Vite) + server (Express + tRPC) + vitest + cypress + pnpm, emphasizing the use of absolute paths.

Back