pnpmでnestjs, typescriptのprojectを作成する

### Motivation

[pnpmでvite, react, typescriptのprojectを作成する](https://qiita.com/Gma_Gama/items/80fd28a2316e2ee4a30d)の続きです。
workspaceを利用するのであれば、Server Sideと絡めてできるかを試してみたいと思った。

### table of contents

0.現行のディレクトリ構成
1.nestjsのprojectを追加する
2.nestjsのアプリケーションを起動する
3.root applicationでclientとserverを起動する

### 0.現行のディレクトリ構成

```terminal
$ tree .  -L 2
├── README.md
├── apps
│   └── react-project
├── node_modules
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
```

から、nestjsのprojectを作成してきます。

### 1.nestjsのprojectを追加する

apps以下にnestjs cliを利用してProjectを作成する。

```terminal
$ cd apps
$ pwd
/apps
$ nest new nestjs-project --skip-install
⚡  We will scaffold your app in a few seconds..

CREATE nestjs-project/.eslintrc.js (665 bytes)
CREATE nestjs-project/.prettierrc (51 bytes)
CREATE nestjs-project/README.md (3340 bytes)
CREATE nestjs-project/nest-cli.json (118 bytes)
CREATE nestjs-project/package.json (1999 bytes)
CREATE nestjs-project/tsconfig.build.json (97 bytes)
CREATE nestjs-project/tsconfig.json (546 bytes)
CREATE nestjs-project/src/app.controller.spec.ts (617 bytes)
CREATE nestjs-project/src/app.controller.ts (274 bytes)
CREATE nestjs-project/src/app.module.ts (249 bytes)
CREATE nestjs-project/src/app.service.ts (142 bytes)
CREATE nestjs-project/src/main.ts (208 bytes)
CREATE nestjs-project/test/app.e2e-spec.ts (630 bytes)
CREATE nestjs-project/test/jest-e2e.json (183 bytes)

                                         
                          Thanks for installing Nest 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.
                                         
                                         
               🍷  Donate: https://opencollective.com/nest
$ cd nestjs-project && pnpm i
Scope: all 3 workspace projects
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
../..                                    | +566 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
../..                                    | Progress: resolved 666, reused 632, downloaded 13, added 566, done

dependencies:
+ @nestjs/common 9.2.1
+ @nestjs/core 9.2.1
+ @nestjs/platform-express 9.2.1
+ reflect-metadata 0.1.13
+ rimraf 3.0.2
+ rxjs 7.8.0

devDependencies:
+ @nestjs/cli 9.1.5
+ @nestjs/schematics 9.0.3
+ @nestjs/testing 9.2.1
+ @types/express 4.17.15
+ @types/jest 28.1.8 (29.2.4 is available)
+ @types/node 16.18.10 (18.11.17 is available)
+ @types/supertest 2.0.12
+ @typescript-eslint/eslint-plugin 5.47.0
+ @typescript-eslint/parser 5.47.0
+ eslint 8.30.0
+ eslint-config-prettier 8.5.0
+ eslint-plugin-prettier 4.2.1
+ jest 28.1.3 (29.3.1 is available)
+ prettier 2.8.1
+ source-map-support 0.5.21
+ supertest 6.3.3
+ ts-jest 28.0.8 (29.0.3 is available)
+ ts-loader 9.4.2
+ ts-node 10.9.1
+ tsconfig-paths 4.1.0 (4.1.1 is available)
+ typescript 4.9.4

 WARN  Issues with peer dependencies found
apps/nestjs-project
└─┬ ts-loader 9.4.2
  └── ✕ missing peer webpack@^5.0.0
Peer dependencies that should be installed:
  webpack@^5.0.0  

The integrity of 1978 files was checked. This might have caused installation to take longer.
Done in 15.8s
```

### 2.nestjsのアプリケーションを起動する

package.jsonに従って、dev serverを起動していきます。

```terminal
$ pnpm start:dev
[0:17:51] Starting compilation in watch mode...

[0:17:53] Found 0 errors. Watching for file changes.

[Nest] 75284  - 2022/12/21 0:17:55     LOG [NestFactory] Starting Nest application...
[Nest] 75284  - 2022/12/21 0:17:55     LOG [InstanceLoader] AppModule dependencies initialized +32ms
[Nest] 75284  - 2022/12/21 0:17:55     LOG [RoutesResolver] AppController {/}: +7ms
[Nest] 75284  - 2022/12/21 0:17:55     LOG [RouterExplorer] Mapped {/, GET} route +2ms
[Nest] 75284  - 2022/12/21 0:17:55     LOG [NestApplication] Nest application successfully started +2ms
```
[localhost:3000](http://localhost:3000/)を起動して確認します。
現状は以下の画面が表示されました。

![localhost-3000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/6b61576e-8f9b-3f24-fe7a-e71e703a4a7b.png)

### 3.root applicationでclientとserverを起動する

開発時に一気にどちらも起動してほしいため、apps/nestjs-projectのpackage.jsonにviteのdev serverと同じコマンドを追記していきます。

```apps/react-project/package.json
"scripts": {
    "dev": "vite", # nestjsの方にも同じコマンドを追記していきます。
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
```

```apps/nestjs-project/package.json
"scripts": {
    "prebuild": "rimraf dist",
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "dev": "nest start --watch", # これを追記
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
```

起動確認を実施。

```terminal
$ pwd
.
$ pnpm dev
> vite-react-typescript@1.0.0 dev vite-react-typescript
> pnpm  --parallel --filter "./**" dev

Scope: 2 of 3 workspace projects
apps/nestjs-project dev$ nest start --watch
apps/react-project dev$ vite
apps/react-project dev:   VITE v4.0.1  ready in 625 ms
apps/react-project dev:   ➜  Local:   http://127.0.0.1:5173/
apps/react-project dev:   ➜  Network: use --host to expose
apps/nestjs-project dev: [0:24:42] Starting compilation in watch mode...
apps/nestjs-project dev: [0:24:45] Found 0 errors. Watching for file changes.
apps/nestjs-project dev: [Nest] 75585  - 2022/12/21 0:24:45     LOG [NestFactory] Starting Nest application...
apps/nestjs-project dev: [Nest] 75585  - 2022/12/21 0:24:45     LOG [InstanceLoader] AppModule dependencies initialized +30ms
apps/nestjs-project dev: [Nest] 75585  - 2022/12/21 0:24:45     LOG [RoutesResolver] AppController {/}: +5ms
apps/nestjs-project dev: [Nest] 75585  - 2022/12/21 0:24:45     LOG [RouterExplorer] Mapped {/, GET} route +2ms
apps/nestjs-project dev: [Nest] 75585  - 2022/12/21 0:24:45     LOG [NestApplication] Nest application successfully started +2ms
```

logに、`apps/nestjs-project`と`apps/react-project`の起動確認ができたので、一応GUI上でも確認を実施する。

[127.0.0.1:5173/](http://127.0.0.1:5173/)と,[localhost:3000/](http://localhost:3000/)の起動を確認して終わり。

![Vite-React-TS (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/42f9a559-f371-276c-0d09-4ae7c39388cf.png)

![localhost-3000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/3bb5f245-e564-b972-a161-535af7d50b04.png)

現行のディレクトリ構成は以下になります。

```
$ tree . -L 3 -I node_module
├── README.md
├── apps
│   ├── nestjs-project
│   │   ├── README.md
│   │   ├── dist
│   │   ├── nest-cli.json
│   │   ├── package.json
│   │   ├── src
│   │   ├── test
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   └── react-project
│       ├── index.html
│       ├── package.json
│       ├── pnpm-lock.yaml
│       ├── public
│       ├── src
│       ├── tsconfig.json
│       ├── tsconfig.node.json
│       └── vite.config.ts
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

8 directories, 15 files
```