https://github.com/mkosir/trpc-fe-boilerplate-vite
⚒️ Minimal tRPC frontend Vite boilerplate for separate BE-FE repositories. Easily consume fully typesafe APIs.
https://github.com/mkosir/trpc-fe-boilerplate-vite
reactjs trpc trpc-client typescript vite
Last synced: about 2 months ago
JSON representation
⚒️ Minimal tRPC frontend Vite boilerplate for separate BE-FE repositories. Easily consume fully typesafe APIs.
- Host: GitHub
- URL: https://github.com/mkosir/trpc-fe-boilerplate-vite
- Owner: mkosir
- License: mit
- Created: 2024-02-03T10:10:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T08:55:29.000Z (3 months ago)
- Last Synced: 2025-07-02T09:37:03.866Z (3 months ago)
- Topics: reactjs, trpc, trpc-client, typescript, vite
- Language: TypeScript
- Homepage: https://mkosir.github.io/trpc-fe-boilerplate-vite/
- Size: 2.45 MB
- Stars: 21
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tRPC Frontend Boilerplate 
[![CI][ci-badge]][ci-url]
Minimal [tRPC](https://trpc.io/) frontend Vite boilerplate for projects with separate backend and frontend repositories. Easily consume fully typesafe APIs.
Monorepos are great, but sometimes the architecture requires separating the backend and frontend into distinct repositories.
### Why use this?
This boilerplate is ideal when you want to separate:
- **Domain/business logic** – expose only what needs to be exposed through the API.
- **Developer responsibilities** – for larger teams/companies.
- **CI/CD pipelines** – manage PRs, issues, and deployments independently.
## Running
_Easily set up a local development environment_
- Clone the repo
- Run `npm install`
- Run `npm run dev`
- Use the [tRPC API package](https://www.npmjs.com/package/trpc-api-boilerplate) in your app 🚀
## Import tRPC API
There are two ways to import tRPC API types from the backend repo:
1. Install the npm package:
`npm install trpc-api-boilerplate`
_(currently [set](https://github.com/mkosir/trpc-fe-boilerplate-vite/blob/main/src/common/trpc-api-boilerplate/client/index.ts#L4) as the default option)_
2. Run the script:
`npm run trpc-api-import`
_(uncomment [this line](https://github.com/mkosir/trpc-fe-boilerplate-vite/blob/main/src/common/trpc-api-boilerplate/client/index.ts#L8))_
## Example Backend Repo
- [tRPC API Boilerplate](https://github.com/mkosir/trpc-api-boilerplate)
[ci-badge]: https://github.com/mkosir/trpc-fe-boilerplate-vite/actions/workflows/main.yml/badge.svg
[ci-url]: https://github.com/mkosir/trpc-fe-boilerplate-vite/actions/workflows/main.yml