Monorepos development with nx (nxを使ったモノレポ開発)

### Outline (概要)
1. Introduction (はじめに)
2. Precondition (前提条件)
3. Auto-generate source code (ソースコードの自動生成)
4. Define use-case and how to resolve it (ユースケースの定義とその解決方法)
5. Confirmation (確認）

***

### 1. Introduction (はじめに)
In this article, I will generate 2 applications (operator, accounting), 1 shared library, 1 utils library. Each application import a shared library to use almost the same code, it helps us **faster in developing software**, **develops multi-project using the same code base**. With nx use React/Angular/Web-component but this article uses Angular to demo. (この記事では、2つのアプリケーション（Operator、Accounting）、1つの共有ライブラリ、1つのutilsライブラリを生成します。各アプリケーションは、ほぼ同じコードを使用するために共有ライブラリをインポートします。**同じコードベースを複数のプロジェクトで使用することによって、ソフトウェアを速いスピードで開発することができます。** nxはReact/Angular/web-componentで使えますが、この記事ではAngularの例を記載します)

### 2. Precondition (前提条件)
* Install [npx](https://www.npmjs.com/package/npx)


### 3. Auto-generate source code (ソースコードの自動生成)

#### 3.1 Generate workspace (ワークスペースの生成)

`npx create-nx-workspace`

Then answer those questions (以下の質問を回答する)

```
? Workspace name (e.g., org name)     monorepos
? What to create in the new workspace angular           [a workspace with a single Angular application]
? Application name                    operator
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com   ]
? Default linter                      TSLint [ Used by Angular CLI ]
? Use Nx Cloud? (It's free and doesn't require registration.) No
```

It will set up an Nx workspace with an Angular app in it. Now, we can serve **operator** application by running the command below (NxワークスペースにAngularアプリケーションをセットアップします。以下のコマンドを実行することで、**operator**アプリケーションが起動します)

`npx ng serve operator`


#### 3.2 Generate a new application (新しいアプリケーションを生成する)
`npx ng g @nrwl/angular:app accounting`

```
? Which stylesheet format would you like to use? SASS(.scss)  [ http://sass-lang.com   ]
? Would you like to configure routing for this application? Yes
```

You also serve it by the command (以下のコマンドでAccountアプリケーションが起動します)
`npx ng serve accounting`

so far, you created two application: **Operator & Accounting** (ここまででOperatorアプリケーションとAccoutingアプリケーションの二つを作成しました。)

#### 3.3 Generate shared library (shared library生成)
`npx nx generate @nrwl/angular:lib user-management --directory=shared`

`? Which stylesheet format would you like to use? SASS(.scss)  [ http://sass-lang.com   ]`

##### Generate user-list component for shared library (shared libaryによりユーザ一覧コンポーネントを生成)
`npx nx generate @nrwl/angular:component user-list --project=shared-user-management`

#### 3.4 Linking between applications and shared library by setting router for each application (アプリケーションごとにルータを設定して、アプリケーションと共有ライブラリを紐付けます)
commit: [Router setting](https://github.com/namlai-atw/monorepos/commit/eac2663671cf6b1ccaf6a0cde480045d1b9f21ef)


#### 4. Define use-case and how to resolve it (ユースケースの定義とその解決方法)
Let's imagine the case that the operator app has a **delete user button** but the app accounting has not. We can use Injection and Provider to help us resolve this situation
(Operatorアプリケーションには**削除ボタン**があるが、Accountingアプリケーションには**削除ボタン**がない場合を想像してみてください。InjectionとProviderを使って解決します。)

1. Define App const
2. Define Injection token
![Screen Shot 2020-12-23 at 19.13.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975447/d1020288-1bdd-9852-0004-50d54dd7b70a.png)

3. Declare it to each application
![Screen Shot 2020-12-23 at 19.14.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975447/00647672-9d44-4ac0-6454-0a5f31d6c2f8.png)
![Screen Shot 2020-12-23 at 19.15.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975447/ca1ae35f-3336-b35d-a977-75f05ed9f0e7.png)

4. Use it in the shared library
![Screen Shot 2020-12-23 at 19.16.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975447/b28b4800-1ebf-5b45-46a5-cfa0f15fc5f3.png)

5. Create user mock API & hide delete button in the template
![Screen Shot 2020-12-23 at 19.18.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975447/f855a6db-69aa-78c7-cde5-39434fd3389e.png)


Before moving on, let's create a folder inside libs named `utils` by running the command below
`npx nx generate @nrwl/angular:lib utils` (次、以下のコマンドを実行して `utils` という名前の libs の中にフォルダを作成します)

##### Implement 1, 2, 3, 4 (実装 1, 2, 3, 4)
commit: (https://github.com/namlai-atw/monorepos/commit/71506ab94f86f79c9d9147445efc65350d600337)


Implement 5 (実装 5)
commit: [Create user mock API & hide delete button in the template](https://github.com/namlai-atw/monorepos/commit/7e7c209bc91061709939794cde6a19af652c3e05)


### 5. Confirmation (確認)

#### Operator
 The is a list of all users with the delete button included (ユーザ一覧に削除ボタンがある場合)
![operator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975447/e6762277-51ee-356e-bdc8-e59cd0ef88f8.png)

#### Accounting
 The is a list of normal users (not include admin) without the delete button (ユーザ一覧に削除ボタンがない場合)
![accounting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975447/f685fcc6-65f6-1b6d-435d-5615d495e726.png)

***

Thank you for your time. ありがとうございました.