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: 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 (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-08T15:29:06.000Z (12 months ago)
• Last Synced: 2024-03-08T16:39:14.448Z (12 months ago)
• Topics: reactjs, trpc, trpc-client, typescript, vite
• Language: TypeScript
• Homepage: https://mkosir.github.io/trpc-fe-boilerplate-vite/
• Size: 2.29 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tRPC Frontend Boilerplate ![Heisenberg](/misc/heisenberg_75.png)

[![CI][ci-badge]][ci-url]

Minimal [tRPC](https://trpc.io/) frontend boilerplate (Vite) for separate BE-FE repositories. Easily consume fully typesafe APIs.

Monorepos are great, but sometimes we are targeting backend and frontend as separate (mono)repositories.

We might aim for backend and frontend repositories separation of:

- domain/business logic - expose only what need to be exposed through API.

- developers - larger teams/companies.

- CI/CD pipelines, PRs, issues, etc.

... in that case checkout this boilerplate.

## Running

_Easily set up a local development environment_

- clone repo

- `npm install`

- `npm run dev`

- use latest tRPC API [package](https://www.npmjs.com/package/trpc-api-boilerplate) in your app 🚀

## Import tRPC API

There are 2 ways to import tRPC API types from backend repo:

1. Install npm package `npm i trpc-api-boilerplate` (currently [set](https://github.com/mkosir/trpc-fe-boilerplate-vite/blob/main/src/common/trpc-api-boilerplate/client/index.ts#L2) as a default option)

2. Run npm script `npm run trpc-api-import` ([uncomment line](https://github.com/mkosir/trpc-fe-boilerplate-vite/blob/main/src/common/trpc-api-boilerplate/client/index.ts#L7))

## Example Repo

Example backend API repository - [tRPC API Boilerplate](https://github.com/mkosir/trpc-api-boilerplate)

[ci-badge]: https://github.com/mkosir/trpc-fe-boilerplate-vite/actions/workflows/CI.yml/badge.svg

[ci-url]: https://github.com/mkosir/trpc-fe-boilerplate-vite/actions/workflows/CI.yml