Motivation
pnpmでvite, react, typescriptのprojectを作成するの続きです。
workspaceを利用するのであれば、Server Sideと絡めてできるかを試してみたいと思った。
table of contents
0.現行のディレクトリ構成
1.nestjsのprojectを追加する
2.nestjsのアプリケーションを起動する
3.root applicationでclientとserverを起動する
0.現行のディレクトリ構成
$ 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を作成する。
$ 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を起動していきます。
$ 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を起動して確認します。
現状は以下の画面が表示されました。
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"
},
起動確認を実施。
$ 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/と,localhost:3000/の起動を確認して終わり。
現行のディレクトリ構成は以下になります。
$ 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