lerna nx Nuxt3のmonorepoとりあえず環境を作成する

# Lerna nx nuxt(v3)の環境をとりあえ作成してみる

### package dependency

| package name | version | refs |
|:---:|:---:|:---:|
| lerna | 5.1.4 | [lerna](https://lerna.js.org/) |
| nx | 14.3.5 | [nx](https://nx.dev/) |
| nuxt | 3.0.0-rc.4 | [nuxt](https://v3.nuxtjs.org/) |

<hr>

### why do this?

lernaの開発が止まりnrwlが開発サポートして、pageが生まれ変わったため。
reactとangularはストレートにnrwlを使った方がメリットを享受できると思っている。。。

### table of contents

0. lernaのprojectを作成する
0. nxを有効にする
0. nuxiを利用してoverrideを実施
0. 起動確認

## 1. lernaのprojectを作成する

yarnのwork spaceを作成して、`lerna`のpackageをインストールします。

```
$ mkdir lerna_sample & cd '$_'
$ yarn init -y
$ yarn add -D lerna@latest 
```

lernaの環境を作成する

```
$ yarn lerna init
$ less package.json
{
  "name": "lerna_sample",
  "version": "1.0.0",
  "main": "index.js",
  "private": true,
  "devDependencies": {
    "lerna": "^5.1.4",
  }
}
```

lernaの`yarn`を利用しているため、npmClientの設定を追加します
```terminal
$ less lerna.json
{
  "packages": ["packages/*"],
  "version": "0.0.0"
}
```

以下を追加

```lerna.json
{
  "packages": ["packages/*"],
  "npmClient": "yarn", # ここを追記
  "version": "0.0.0"
}

```

いろいろErrorが出る人は、おそらくgitのuser.emailなどを設定してないので設定してください。

## 1. nxを有効にする

nxをdependencyに追加します

```terminal
$ yarn add -D nx
$ less package.json
{
  "name": "lerna_sample",
  "version": "1.0.0",
  "main": "index.js",
  "private": true,
  "devDependencies": {
    "lerna": "^5.1.4",
    "nx": "^14.3.5"   //追記されている
  }
}
```

次にnxを有効化にするために、lerna.jsonに記載を追加します。

```terminal
$ less lerna.json
{
  "packages": [ "packages/*"],
  "npmClient": "yarn",
  "version": "0.0.0"
}
```

`useNx`を`true`に設定する

```lerna.json
{
  "packages": ["packages/*"],
  "useNx": true,
  "npmClient": "yarn",
  "version": "0.0.0"
}

```

nxが有効化されていることを確認するため、`nx`コマンドを利用して確認します

```
$ npx nx graph
>  NX   Project graph started at http://127.0.0.1:4211
```

![nx-graph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/f3777ac9-c3a1-315f-3b87-710c14714bc0.png)

### 3. nuxiを利用してPackageを追加する

とりあえず公式通りに、nuxtのプロジェクトを作成します。

```terminal
$ pwd
PROJECT_DIRECTORY
$ cd packages
$ pwd
PROJECT_DIRECTORY/packages
$ npx nuxi init nuxt
$ cd nuxt
$ tree -L 1
.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
├── tsconfig.json
```

とりあえずインストールできているのが、確認できました。

### 4. 起動確認

最後に追加したnuxtの起動と、nxにpackageとして認識されているか確認します.

#### nuxtのpackageをインストールする

`lerna bootstrap`を利用してインストールします。

```terminal
$ pwd
PROJECT_PATH
$ yarn lerna bootstrap
$ tree ./packages/nuxt -L 1
./packages/nuxt
├── README.md
├── app.vue
├── node_modules
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── yarn.lock
```

#### nuxtの起動を確認する

`lerna run`コマンドを利用して、`packages/nuxt/package.json#script`に記載があるコマンドを利用します。

```terminal
$ pwd
PROJECT_PATH
$ yarn lerna run dev --scope nuxt

lerna notice cli v5.1.4
lerna notice filter including "nuxt"
lerna info filter [ 'nuxt' ]
> nuxt:dev
$ nuxt dev
Nuxt CLI v3.0.0-rc.4
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.100.100:3000/
ℹ Vite server warmed up in 123ms
ℹ Vite client warmed up in 1118ms
✔ Vite server built in 651ms
✔ Nitro built in 363 ms
```

ブラウザで表示された[localhost:3000](http://localhost:3000)に遷移して、以下が表示されれば起動確認は完了です。

![nuxt-hellp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/15d3b80e-7024-7245-a202-f88d63384131.png)

### lernaの依存状態を確認

`nx graph`を利用して追加した`nuxt`の記載がある確認します

```
$ yarn nx grtaph
```

![new-nx-graph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/9021047b-de76-28a3-27e7-e7b7fe07810d.png)

### 終わりに

もっと綺麗な形で追加方法があるはず。。。
CI系統の設定ができればいろいろいけるはず。。。