📘

Turborepoでモノレポ構成を作る

に公開
React Native
Expo
NestJS
Turborepo
tech

はじめに

フロントエンド（ReactNative）とバックエンド（NestJS）からなるシステムを作りたいなぁと思ったので、Turborepoを使って効率よく管理していこうと思います。

環境

pnpm --version
10.20.0

注）pnpmのインストール方法については割愛します。

Turborepoのインストール

プロジェクトを作成したいディレクトリへ移動してcreate-turboコマンドをを実行します。

pnpm dlx create-turbo@latest

いくつか質問に答えてプロジェクトを作成すると以下のような構成になっていると思います。

$ tree -d -L 3 -P 'node_modules' -I "@*"
.
├── apps
│   ├── docs
│   │   ├── app
│   │   ├── node_modules
│   │   └── public
│   └── web
│       ├── app
│       ├── node_modules
│       └── public
├── node_modules
└── packages
    ├── eslint-config
    │   └── node_modules
    ├── typescript-config
    └── ui
        ├── node_modules
        └── src

ReactNetive（Expo）のインストール

apps配下にできた2つのアプリはどちらも使わないので削除します

cd apps
rm -fr docs web

create-expo-appコマンドを使ってExpoをインストールします

pnpm dlx create-expo-app app01

appsディレクトリ配下にapp01が出来上がります

$ cd apps
$ ls
app01

NestJSのインストール

@nestjs/cliをインストールします。公式ドキュメントでは-gをつけてインストールしていますが、本稿ではモノレポルートにインストールします

$ cd /mono/repo/root
$ pnpm add -Dw @nestjs/cli

@netsjs/cliのインストールが完了したら、新しいプロジェクトを作成します。

npx nest new apps/api

インストールが完了したら、apps配下にapiiディレクトリができていると思います

$ ls apps
api app01

インストール後に発生する問題について

自分の環境では以下のような問題が発生しました。

モノレポルートのpnpm run devで各パッケージが起動しない

Turborepoのデフォルト動作として、pnpm run devを実行した際、各パッケージのscripts.devを実行しようとするためでした。
各パッケージのpackage.jsonにscripts.devを追加することで実行してくれるようになりました。
例えばapp01（Exxpo）のpackage.jsonの場合は以下のようになります。

apps/app01/package.json
"scripts": {
  "start": "expo start",
  "dev": "expo start",    # この行を追加
  # 以下コマンドが続く
}

参考URL

https://turborepo.com/docs
https://docs.expo.dev
https://docs.nestjs.com

Discussion