Nxv15でモノレポ環境構築備忘録

初めに

初めまして。フロントエンジニアのもっぴーです。

今回はNxv15の環境構築方法を備忘録として記載します。
後ほどv16の備忘録も書こうと思います。

今回構築する環境は下記の構成にします。

• フロントエンド：React
• バックエンド：Nest.js

Nx v15 環境構築

Nxのワークスペースを作成

下記コマンドでNxのワークスペースを作成します。

npx create-nx-workspace@15.9.4

どの形式でワークスペースを作成するの？と聞かれるので、上から二番目の
Integrated monorepo: Nx configures your favorite frameworks and lets you focus on shipping features.
を選択します。

Package-based monorepo:     Nx makes it fast, but lets you run things your way.
Integrated monorepo:        Nx configures your favorite frameworks and lets you focus on shipping features.
Standalone React app:       Nx configures Vite (or Webpack), ESLint, and Cypress.
Standalone Angular app:     Nx configures Jest, ESLint and Cypress.
Standalone Node Server app: Nx configures a framework (ex. Express), esbuild, ESlint and Jest.

作成したワークスペースに何を追加するの？と聞かれるので、一番上の
apps [an empty monorepo with no plugins with a layout that works best for building apps]
を選択します。

今回は空のappsフォルダから始めます。

What to create in the new workspace   … 
apps              [an empty monorepo with no plugins with a layout that works best for building apps]
ts                [an empty monorepo with the JS/TS plugin preinstalled]
react             [a monorepo with a single React application]
angular           [a monorepo with a single Angular application]
next.js           [a monorepo with a single Next.js application]
nest              [a monorepo with a single Nest application]
react-native      [a monorepo with a single React Native application]

リポジトリ名は何？と聞かれるので、お好きに命名してください。

? Repository name                       › nx-v15-app 

分散キャッシュを有効にしてCI を高速化しちゃう？と聞かれるのでYes

? Enable distributed caching to make your CI faster … 
Yes
No

それぞれの設定を反映して作成してくれるので少し待ちます。

Installing dependencies with npm

以下が表示されれば、ワークスペースの作成は完了です。

✔ Installing dependencies with npm
✔ Nx has successfully created the workspace: nx-v15-app.
✔ NxCloud has been set up successfully

この段階でフォルダ構成は以下のようになります。

Reactプロジェクトを作成

次に作成したワークスペースにReactのプロジェクトを作成します。
まずはReactプロジェクトを作成する為にNxのプラグインをインストールします。

npm i -D @nrwl/react@15.9.4

インストールしたプラグインを使用してReactプロジェクトを作成します。

nx g @nrwl/react:application frontend

スタイルには何を使う？と聞かれるのでお好きなものを選んでください。
今回はstyled-componentsを選択します。

? Which stylesheet format would you like to use? … 
CSS
SASS(.scss)       [ http://sass-lang.com                     ]
Stylus(.styl)     [ http://stylus-lang.com                   ]
LESS              [ http://lesscss.org                       ]
styled-components [ https://styled-components.com            ]
emotion           [ https://emotion.sh                       ]
styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]
None

React Router追加できるけどどうする？と聞かれるのでy

Would you like to add React Router to this application? (y/N) · true

バンドラーはどうする？と聞かれるのでお好きな方を選んでください。
今回はviteを選択します。

Which bundler do you want to use to build the application? … 
vite
webpack

作ってくれました。

CREATE tsconfig.base.json
UPDATE .vscode/extensions.json
UPDATE package.json
UPDATE nx.json
CREATE apps/frontend/index.html
CREATE apps/frontend/public/favicon.ico
CREATE apps/frontend/src/app/app.spec.tsx
CREATE apps/frontend/src/assets/.gitkeep
CREATE apps/frontend/src/main.tsx
CREATE apps/frontend/tsconfig.app.json
CREATE apps/frontend/src/app/nx-welcome.tsx
CREATE apps/frontend/src/app/app.tsx
CREATE apps/frontend/tsconfig.json
CREATE apps/frontend/project.json
CREATE apps/frontend/vite.config.ts
CREATE apps/frontend/tsconfig.spec.json
CREATE .eslintrc.json
CREATE .eslintignore
CREATE apps/frontend/.eslintrc.json

この段階でappsフォルダ配下は以下のようになります。
これでReactプロジェクトの作成は完了です。

e2eプロジェクトは自動生成ですが、上記コマンドでオプション--e2eTestRunner none
を追加すると作成しないようにもできます。

Nest.jsプロジェクトを作成

次に作成したワークスペースにNest.jsのプロジェクトを作成します。
まずはNest.jsプロジェクトを作成する為にNxのプラグインをインストールします。

npm i -D @nrwl/nest@15.9.4

インストールしたプラグインを使用してNest.jsプロジェクトを作成します。

nx g @nrwl/nest:application backend --frontendProject frontend

作ってくれました。

CREATE jest.preset.js
UPDATE nx.json
CREATE jest.config.ts
UPDATE package.json
UPDATE .vscode/extensions.json
CREATE apps/backend/src/assets/.gitkeep
CREATE apps/backend/src/main.ts
CREATE apps/backend/tsconfig.app.json
CREATE apps/backend/tsconfig.json
CREATE apps/backend/webpack.config.js
CREATE apps/backend/project.json
CREATE apps/backend/.eslintrc.json
CREATE apps/backend/jest.config.ts
CREATE apps/backend/tsconfig.spec.json
CREATE apps/backend-e2e/project.json
CREATE apps/backend-e2e/jest.config.ts
CREATE apps/backend-e2e/src/backend/backend.spec.ts
CREATE apps/backend-e2e/src/support/global-setup.ts
CREATE apps/backend-e2e/src/support/global-teardown.ts
CREATE apps/backend-e2e/src/support/test-setup.ts
CREATE apps/backend-e2e/tsconfig.json
CREATE apps/backend-e2e/tsconfig.spec.json
CREATE apps/backend-e2e/.eslintrc.json
CREATE apps/frontend/proxy.conf.json
UPDATE apps/frontend/project.json
CREATE apps/backend/src/app/app.controller.spec.ts
CREATE apps/backend/src/app/app.controller.ts
CREATE apps/backend/src/app/app.module.ts
CREATE apps/backend/src/app/app.service.spec.ts
CREATE apps/backend/src/app/app.service.ts

この段階でappsフォルダ配下は以下のようになります。
これでNest.jsプロジェクトの作成も完了です。

e2eプロジェクトは自動生成ですが、上記コマンドでオプション--unitTestRunner none
を追加すると作成しないようにもできます。

作成したプロジェクトを一括起動

最後に作成したReact、Nest.jsのプロジェクトを同時に起動してみましょう。
package.jsonのscriptに以下を追記します。

"start": "nx run-many --target serve --all --parallel"

コマンドを実行します

npm run start

ターミナルの内容

> nx-v15-app@0.0.0 start
> nx run-many --target serve --all --parallel


 >  NX   Running target serve for 2 projects:

    - frontend
    - backend

 —————————————————————————————————————————————————————————————————————————————————————————

> nx run frontend:serve:development


> nx run backend:serve:development

Loading proxy configuration from: /Users/〇〇/Desktop/work/Nx-v15-Template/nx-v15-app/apps/frontend/proxy.conf.json
  ➜  Local:   http://localhost:4200/
chunk (runtime: main) main.js (main) 2.77 KiB [entry] [rendered]
webpack compiled successfully (67baf8e30669221e)
Debugger listening on ws://localhost:9229/59511579-063c-40c1-a6f5-579f3e66369b
Debugger listening on ws://localhost:9229/59511579-063c-40c1-a6f5-579f3e66369b
For help, see: https://nodejs.org/en/docs/inspector
Type-checking in progress...
[Nest] 18559  - 2023/08/06 0:09:54     LOG [NestFactory] Starting Nest application...
[Nest] 18559  - 2023/08/06 0:09:54     LOG [InstanceLoader] AppModule dependencies initialized +6ms
[Nest] 18559  - 2023/08/06 0:09:54     LOG [RoutesResolver] AppController {/api}: +11ms
[Nest] 18559  - 2023/08/06 0:09:54     LOG [RouterExplorer] Mapped {/api, GET} route +2ms
[Nest] 18559  - 2023/08/06 0:09:54     LOG [NestApplication] Nest application successfully started +1ms
[Nest] 18559  - 2023/08/06 0:09:54     LOG 🚀 Application is running on: http://localhost:3000/api
No errors found.

Reactの内容

Nest.jsの内容

起動できました！簡単！！さすがモノレポ！！！