https://github.com/mkosir/trpc-fe-boilerplate-next

⚒️ Minimal tRPC frontend Nextjs boilerplate for separate BE-FE repositories. Easily consume fully typesafe APIs.
https://github.com/mkosir/trpc-fe-boilerplate-next

nextjs reactjs trpc trpc-client typescript

Last synced: about 1 month ago
JSON representation

⚒️ Minimal tRPC frontend Nextjs boilerplate for separate BE-FE repositories. Easily consume fully typesafe APIs.

• Host: GitHub
• URL: https://github.com/mkosir/trpc-fe-boilerplate-next
• Owner: mkosir
• License: mit
• Created: 2023-06-08T08:00:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-12T15:22:46.000Z (4 months ago)
• Last Synced: 2024-05-15T12:46:55.631Z (4 months ago)
• Topics: nextjs, reactjs, trpc, trpc-client, typescript
• Language: TypeScript
• Homepage: https://mkosir.github.io/trpc-fe-boilerplate-next/
• Size: 2.43 MB
• Stars: 25
• Watchers: 2
• Forks: 6
• 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 (Nextjs) 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-next/blob/main/src/common/trpc-api-boilerplate/client/index.ts#L4) as a default option)

2. Run npm script `npm run trpc-api-import` ([uncomment line](https://github.com/mkosir/trpc-fe-boilerplate-next/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-next/actions/workflows/CI.yml/badge.svg

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