kuubson/react-vite-trpc

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

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

react-vite-trpc's Issues

npm i not working. it gives npm ERR! Unsupported URL Type "workspace:": workspace:*

I give npm i in root of the project. but it gives error. so How can i fix this?

RFC: Some proposed changes

Hi, I have some ideas for improving this repo and I'd like to know what you think.

Depending on your response I'd happily open a PR / some PRs addressing them.

Server Hotreload

We can add a simple nodemon setup so that when you change some code in the server, it will automatically reload the changes that you made. This is a great DX.

Basic Github Actions

I know every project has some peculiarities and since this is a template we shouldn't add too much, but having some small github actions in place can be very useful and, honestly, pretty easy to delete if you don't like them.
This amazing Template repo called Create-T3-Turbo is a great reference of template repo in my opinion. They implemented some simple github actions and I could implement something very similar for this project.

What it does is: everytime you open a PR, Github automatically runs the ESLint checks in your changes to see if something went wrong with your types and code formatting. Great stuff!

License

It is pretty nice to have a License file in the project so it's more obvious how people can use your repo. Projects usually go for is the MIT License, would you be up for that one? That is a very standard license that allows people to take your code to any direction they want... which is perfect for a template repo. That's the same license they are using in Create-T3-Turbo

Stack Icons

Thanks for the repo! I will probably use it for my setup <3

Btw.
How one could get project icons as you have in the stack showcase?? https://github.com/kuubson/react-vite-trpc#-stack