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 |
---|
Global | Server | Web |
---|---|---|
|
|
|
Preview the deployment: https://react-vite-trpc.onrender.com
For local execution, use pnpm install
and pnpm dev
.
-
To tailor the template to your needs, replace of
@react-vite-trpc
with@your-idea
(you can useCMD + SHIFT + H
in VS Code to do this globally) -
When deploying, make sure to update the
host
property in theHttpService
class (@react-vite-trpc\config\src\services\httpService.ts
) -
Adjust the preferred order of imports in
.prettierrc
files using theimportOrder
property -
When adding a new local package (i.e.
/@react-vite-trpc/new-package
), remember to update thewatch
array innodemon.json
and provide appropriate TypeScript references intsconfig.json
files for an enhanced DX -
The test coverage
.lcov
files (generated withpnpm test:coverage
), can be easily leveraged with VS Code extension Coverage Gutters
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 }
}
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 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
================================
- ๐ :3000 - Web
- ๐ฅ๏ธ :3001 - Server