Angular 15 Multi Projects Setup Script

angular-15-multi-projects-setup.sh

#!/bin/bash

# プロジェクト名定義
PROJECT_NAME="template-angular-15-multi-projects"

# Angularプロジェクトを空で初期化
ng new $PROJECT_NAME --force --create-application false --inline-style --inline-template --package-manager npm --routing true --strict true --style css

# プロジェクトのディレクトリに移動
cd $PROJECT_NAME

# 管理者向けのadmin、Landing page用のlp、ユーザー向けのwebの3種類のapplication、共通用のsharedを生成
ng generate application admin --force --prefix admin --inline-style --inline-template --routing --strict --style css
ng generate application lp --force --prefix lp --inline-style --inline-template --routing --strict --style css
ng generate application web --force --prefix web --inline-style --inline-template --routing --strict --style css
ng generate application shared --force --prefix web --inline-style --inline-template --routing --strict --style css

# 全projectにenvironmentsを導入
ng generate environments --project admin
ng generate environments --project lp
ng generate environments --project web
ng generate environments --project shared

# Standalone化、脱NgModule
ng generate @angular/core:standalone --mode convert-to-standalone --path ./
ng generate @angular/core:standalone --mode prune-ng-modules --path ./
ng generate @angular/core:standalone --mode standalone-bootstrap --path ./

# ESLint
ng add @angular-eslint/schematics --skip-confirmation
ng generate @angular-eslint/schematics:add-eslint-to-project admin
ng generate @angular-eslint/schematics:add-eslint-to-project lp
ng generate @angular-eslint/schematics:add-eslint-to-project web
ng generate @angular-eslint/schematics:add-eslint-to-project shared

# Prettier
npm install --save-dev prettier eslint-config-prettier @typescript-eslint/eslint-plugin

# JestのセットアップとKarma + Jasmine環境の削除(参考: https://blog.lacolaco.net/2021/06/angular-jest-setup/ )
ng add @briebug/jest-schematic --skip-confirmation

# Angular Testing Libraryの導入
npm i -D @testing-library/angular
npm i -D @testing-library/user-event
npm i -D @testing-library/jest-dom
npm i -D ng-mocks

# Cypressのセットアップ
ng add @cypress/schematic

# Storybookのセットアップ
npx storybook@latest init

# Tailwind CSSのセットアップ(ここでStorybookが起動しなくなった可能性あり)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# daisyUIのセットアップ
npm i daisyui

# environment関連を.gitignore
cat <<EOS
.gitignoreに以下を追加
# environment.ts
environment.ts
environment.development.ts
EOS
read

# environment.example.tsを作成し、keyに関する情報をgitに残しておく
cat <<EOS
environment.tsをコピーしてenvironment.example.tsを作成しておく
EOS
read

# npm scriptsに各プロジェクト毎のコマンドを追加
cat <<EOS
npm scriptsとしてレポジトリルートのpackage.jsonに各プロジェクト毎のコマンドを追加
    ...
    "start:admin": "ng serve admin",
    "start:lp": "ng serve lp",
    "start:web": "ng serve web",
    "start:shared": "ng serve shared",
    ...
    "build:admin": "ng build admin",
    "build:lp": "ng build lp",
    "build:web": "ng build web",
    "build:shared": "ng build shared",
    "build:admin:dev": "ng build admin --configuration development",
    "build:lp:dev": "ng build lp --configuration development",
    "build:web:dev": "ng build web --configuration development",
    "build:shared:dev": "ng build shared --configuration development",
    ...
    "watch:admin": "ng build admin --watch --configuration development",
    "watch:lp": "ng build lp --watch --configuration development",
    "watch:web": "ng build web --watch --configuration development",
    "watch:shared": "ng build shared --watch --configuration development",
    ...
    "test:admin": "ng test admin",
    "test:lp": "ng test lp",
    "test:web": "ng test web",
    "test:shared": "ng test shared",
    ...
    "lint:admin": "eslint --cache --fix projects/admin/src",
    "lint:lp": "eslint --cache --fix projects/lp/src",
    "lint:web": "eslint --cache --fix projects/web/src",
    "lint:shared": "eslint --cache --fix projects/shared/src",
    "lint-fix:admin": "eslint --cache --fix projects/admin/src \&\& prettier --write projects/admin/src",
    "lint-fix:lp": "eslint --cache --fix projects/lp/src \&\& prettier --write projects/lp/src",
    "lint-fix:web": "eslint --cache --fix projects/web/src \&\& prettier --write projects/web/src",
    "lint-fix:shared": "eslint --cache --fix projects/shared/src \&\& prettier --write projects/shared/src"
    ...
    "e2e:ci:admin": "ng run admin:cypress-run:development",
    "e2e:ci:lp": "ng run lp:cypress-run:development",
    "e2e:ci:web": "ng run web:cypress-run:development",
    "e2e:ci:shared": "ng run shared:cypress-run:development",
    ...
    "storybook:admin": "ng run admin:storybook",
    "storybook:lp": "ng run lp:storybook",
    "storybook:web": "ng run web:storybook",
    "storybook:shared": "ng run shared:storybook"
    ...
EOS
read

cat <<EOS
.eslintrc.json の extends に "prettier" を追加
EOS
read

# VSCodeでFormat on Save, tsconfig.jsonのパスの自動検出の設定
cat <<EOS
.vscode/settings.jsonに以下を設定
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.workingDirectories": [{ "mode": "auto" }]
}
EOS
read

# VSCodeでESLint, Prettier, EditorConfig等のプラグインインストール推奨を設定
cat <<EOS
.vscode/extensions.jsonに以下を設定
{
  "recommendations": [
    "angular.ng-template",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "editorconfig.editorconfig"
  ]
}
EOS
read

cat <<EOS
Jestのテスト実行時のwarning解消のため tsconfig.json のcompilerOptionsに esModuleInterop: true を設定
EOS
read

cat <<EOS
Jestのjest.config.jsの冒頭const部のESLintの指摘の解消のため、レポジトリルートの.eslintrc.jsonに以下を追加
  "parserOptions": {
    "ecmaVersion": "latest"
  }
EOS
read

cat <<EOS
Jestでのspecファイルのexpectの型推論がESLintで適切にできていない件、(結果的にexpectが意図せずCypressのMochaのexpectとしての型推論となっている件、)
各projectのtsconfig.spec.jsonファイル内のcompilerOptions.typesの配列に、
"@testing-library/jest-dom"
を追加し、

各projectのtsconfig.app.jsonをextendsして、
tsconfig.spec.jsonの設定も追加で加えたtsconfig.jsonを作成することで、
ESLintが適切なTypeScriptの設定を認識できて解決
EOS
read

cat <<EOS
Jasmine+Karma -> Jestの移行ではRouting関連のNgModuleが残るのでそれは手動で脱NgModule化する必要あり
またテストファイルもstandalone化されていないのでそれも手動で対応する必要あり
EOS
read

# Cypressで生成されるファイルが配置されるディレクトリを.gitignore
cat <<EOS
.gitignoreに以下を追加
# Cypress
videos
screenshots
downloads
EOS

cat <<EOS
sharedにもCypressの設定が自動的に加えられるが、今回Cypress設定に使用したschematicsでは、libraryではCypress実行できるようになっていないようなので、shared関連のcypressの設定は削除しておくのがよさそう
EOS

cat <<EOS
Cypressのtsconfig.jsonファイルでのextends元のファイル名がtsconfig.jsonではなくtsconfig.app.jsonが正しいので修正する必要あり
EOS
read

cat <<EOS
Cypressの設定でangular.json内のcypress.config.tsのパスが指定されるべき箇所が、cypress.config.jsになっているので、js -> tsに変更する必要あり
EOS
read

cat <<EOS
angular.json内でのng serveのportがadmin, lp, web, sharedの3つとも4200になっていると同時に実行できないので、同時に実行できるよう、adminを4201, lpを4202, webを4203, sharedを4204に変更しておくとcypress-openが全プロジェクト同時実行できて便利
EOS
read

cat <<EOS
Cypressの設定でproductionモードでの実行のみが設定されているためdevelopmentモードでの実行を追加設定しておくと便利
EOS
read

cat <<EOS
Cypressの設定でprojects/{appName}/cypress.config.tsファイル内の記述を修正
admin
  e2e: {
    baseUrl: 'http://localhost:4201',
    supportFile: 'projects/admin/cypress/support/**/e2e.{js,jsx,ts,tsx}',
    specPattern: 'projects/admin/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
    downloadsFolder: 'projects/admin/cypress/downloads',
    screenshotsFolder: 'projects/admin/cypress/screenshots',
    videosFolder: 'projects/admin/cypress/videos',
  },
lp
  e2e: {
    baseUrl: 'http://localhost:4202',
    supportFile: 'projects/lp/cypress/support/**/e2e.{js,jsx,ts,tsx}',
    specPattern: 'projects/lp/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
    downloadsFolder: 'projects/lp/cypress/downloads',
    screenshotsFolder: 'projects/lp/cypress/screenshots',
    videosFolder: 'projects/lp/cypress/videos',
  },
web
  e2e: {
    baseUrl: 'http://localhost:4203',
    supportFile: 'projects/web/cypress/support/**/e2e.{js,jsx,ts,tsx}',
    specPattern: 'projects/web/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
    downloadsFolder: 'projects/web/cypress/downloads',
    screenshotsFolder: 'projects/web/cypress/screenshots',
    videosFolder: 'projects/web/cypress/videos',
  },
shared
  e2e: {
    baseUrl: 'http://localhost:4204',
    supportFile: 'projects/shared/cypress/support/**/e2e.{js,jsx,ts,tsx}',
    specPattern: 'projects/shared/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
    downloadsFolder: 'projects/shared/cypress/downloads',
    screenshotsFolder: 'projects/shared/cypress/screenshots',
    videosFolder: 'projects/shared/cypress/videos',
  },
EOS
read

cat <<EOS
Storybookでの修正点
angular.jsonでのport番号を変更(admin: 6006, lp: 6007, web: 6008, shared: 6009)
projects/{appName or libName}/src/stories配下に生成される.eslintrc.jsonに"extends": "../../.eslintrc.json",を追加
projects/{appName or libName}/.eslintrc.jsonの"@angular-eslint/component-selector"を配列にして"storybook"を追加(src/storiesを削除した後はこれなくてもいい？)
standaloneコンポーネント化、不足しているCommonModuleのimportsを追加する、standaloneコンポーネントがdeclarationsに入っているのをimportsに移す
EOS
read

cat <<EOS
tailwind.config.jsのcontentの配列に、以下を追記
"./projects/admin/src/**/*.{html,ts}",
"./projects/lp/src/**/*.{html,ts}",
"./projects/web/src/**/*.{html,ts}",
"./projects/shared/src/**/*.{html,ts}",

各プロジェクトのstyles.cssに以下を追記
@tailwind base;
@tailwind components;
@tailwind utilities;
EOS

cat <<EOS
daisyUIの設定
tailwind.config.jsのpluginsの配列に以下を追加
require("daisyui")
EOS