Zenn
🙆‍♀️

ミニマムで安心の開発環境（tRPC, prisma, turborepo）

2022/12/03に公開
Node.js
Prisma
#
monorepo
tRPC
Turborepo
tech

概要

新しい技術を集めて、使い回しやすく、型安全な、フルスタックの開発環境を作ったのでその共有です。

とりあえず動かしたい人へ

# optional: If you haven't installed pnpm
npm i -g pnpm
# clone repo
git clone https://github.com/yanagie/mono-trpc.git
# install packages
cd mono-trpc && pnpm i
# migrate db by prisma
pnpm --filter @mono-trpc/prisma run migrate:dev
# start dev server
pnpm dev

front: http://127.0.0.1:5173
api: http://localhost:3001

おすすめな人

  • monorepo, turborepoに興味がある人
  • 新しいもの好きな人
  • サーバーとクライアントの型がシームレスに共有される体験をしたい人

ゴール

  • 一目見てカスタマイズできる
  • 設定ファイルは最小限
  • 型は勝手につく

スタック

tRPC

公式のrepoから拝借したgifです。左側がサーバーで、右側がクライアントのコードになっています。サーバーの変数を変えると即座にクライアント側のコードがtype errorになります。つまり、サーバー側の型とクライアント側の型がシームレスに連携されます。
(https://github.com/trpc/trpc)

prisma

nodejsのために作られたORMです。prisma独自のschemaにDBのモデルを書き込むことで、マイグレーションや型ファイルの生成などを自動でやってくれます。
https://github.com/prisma/prisma

pnpm

早いnpmです。npmはプロジェクトごとに必要なパッケージをダウンロードします。一方でpnpmは、全てのパッケージを一箇所で管理します。そして、プロジェクトごとにシンボリックリンクします。つまり、同じパッケージは何回もダウンロードしないので早いということです。
https://github.com/pnpm/pnpm

turborepo

vercelが開発しているmonorepoの開発体験を向上させてくれるツールです。monorepoは一つ以上のアプリケーションを、複数のモジュールに分けて管理します。一般に、アプリケーションは複数のモジュールに依存していて、モジュールは別のモジュールに依存していることがあるので、ビルドの順番を間違うとビルドが通りません。さらに、一つのプロジェクトが更新されたからといって、アプリケーション全体が再ビルドされてしまったら時間がもったいないです。これらの課題を解決してくれるのがturborepoです。
https://github.com/vercel/turbo

その他

  • react

構造

monorepoになっていて、pnpmとturborepoを使って管理しています。
packages内のprisma/でDBの管理をしていて、api/ではprisma/が吐き出した型ファイルを使ってapiを定義しています。そして、front/ではapi/が吐き出した型ファイルを使ってapiを呼び出します。

├── apps
│  └── front # react project
│     ├── index.html
│     ├── package.json
│     ├── public
│     ├── src
│     ├── tsconfig.json
│     ├── tsconfig.node.json
│     ├── vite.config.ts
│     └── node_modules
├── package.json
├── packages
│  ├── api # tRPC project
│  │  ├── index.ts
│  │  ├── package.json
│  │  ├── tsconfig.json
│  │  └── node_modules
│  └── prisma # DB ORM
│     ├── index.ts
│     ├── package.json
│     ├── prisma
│     ├── tsconfig.json
│     ├── node_modules
│     └── dist
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── turbo.json
└── node_modules

使い方

Quick start

パッケージマネージャーとしてpnpmを使っています。インストールしていない人は入れてください。

npm i -g pnpm

クローンして、必要なパッケージを入れます。

git clone https://github.com/yanagie/mono-trpc.git
cd mono-trpc
pnpm i

DBをマイグレーションします。--filterオプションをつけることで、今回の場合、コマンドの実行をpackage.jsonのnameが@mono-trpc/prismaのパッケージに制限できます。

pnpm --filter @mono-trpc/prisma run migrate:dev

開発サーバーを立ち上げます。apiサーバーとクライアントサーバーが立ち上がります。

pnpm dev

front: http://127.0.0.1:5173
api: http://localhost:3001

モジュールの追加

内部モジュールはpackagesに追加します。
適当なディレクトリを作って、pnpmを使って初期化します。そしてpackage.jsonのmainにプロジェクトのエントリーポイントを定義します。後は、api/やprisma/を参考にしてください。

cd packages
mkdir -p ui && cd ui
pnpm init

packages内の他のモジュールを使う場合、

pnpm add @mono-trpc/api

アプリケーションの追加

アプリケーションはappsに追加します。
例として、viteのsvelteテンプレートを追加しています。

cd apps
pnpm create vite svelte-front --template svelte-ts

packages内のモジュールをアプリケーションで使う場合、

cd svelte-front
pnpm add @mono-trpc/api

使ってみてください

https://github.com/yanagie/mono-trpc

Discussion