yarn workspace で NestJS + React 構成のモノレポを作る

記事の概要

• 以下の構成のモノレポを作る
  • backend という名前の workspace を作成し、 NestJS を導入する
  • frontend という名前の workspace を作成し、 React を導入する

前提

• node.js がすでにインストールされていること
• yarn がすでにインストールされていること

yarn workspace とは

• yarnが備えているモノレポ構成のための機構
• 一つのリポジトリで複数のnpmパッケージを開発できる

モノレポとは

• プロダクトに必要な全てのコードを単一のモノリシックなリポジトリの管理下におくこと
• 例えばバックエンドとフロントエンドでリポジトリを分けずにそれらを同じリポジトリにする

※ 本筋と外れるのでメリット・デメリットなどはここでは触れない

ルートの　package.json を作成

プロジェクトのルートに以下を作成

package.json

{
  "private": true,
  "workspaces": ["backend", "frontend"]
}

backend workspace の作成

続けて、 backend ディレクトリを作成してそれ用の package.json を配置

./backend/package.json

{
  "private": true,
  "name": "backend",
  "version": "0.0.1"
}

frontend workspace の作成

前章と同じ要領でFE用の workspace を作成

./frontend/package.json

{
  "private": true,
  "name": "frontend",
  "version": "0.0.1"
}

この時点でディレクトリ構成は以下となっている

$ tree ./
.
├── backend
│   └── package.json
├── frontend
│   └── package.json
└── package.json

2 directories, 3 files

プロジェクトルートで yarn を実行すると、　node_modules が作成されるが、それ以下に workspace へのシンボリックリンクが作成される

$ tree ./
./
├── backend
│   └── package.json
├── frontend
│   └── package.json
├── node_modules
│   ├── backend -> ../backend
│   └── frontend -> ../frontend
├── package.json
└── yarn.lock

5 directories, 4 files

NestJSのインストール

$ yarn global add @nestjs/cli
$ rm backend/package.json  # コンフリクトしてコマンド実行するので一旦消す
$ nest new backend

これで yarn workspace backend start を実行したらサーバーが起動し、 http://localhost:3000/ にアクセスしたら "Hello World!" が表示される（ただし、これはこの記事作成時のNestJSの既定の振る舞い）

Reactのインストール

$ rm frontend/package.json  # コンフリクトしてコマンド実行するので一旦消す
$ yarn create react-app frontend --template typescript

これも yarn workspace front start 実行したらサーバーが起動し React の初期画面にアクセスできるようになる。

プロジェクト全体でフォーマッター(prettier)を共有してみる

-W オプションを付加してインストールする

$ yarn add -D -W prettier

プロジェクトワイドに実行できる

$ yarn run prettier backend/src/index.tsx
$ yarn run prettier frontend/src/index.tsx
$ cd backend
$ yarn run prettier src/main.ts