Nxで、Ionic(React)アプリを開発する方法

この記事は、「Ionic Framework / Capacitor / Stencil Advent Calendar 2022」21日目として書かれた記事です。

Ionic(React)アプリをNxで管理する

NxはJavaScript / TypeScriptアプリをモノレポで管理するツールの１つです。

APIなどのバックエンドと、フロントエンドを１リポジトリで管理したい場合に利用することがあります。

これを利用して、ExpressやNestで構築したAPIとIonicアプリを１リポジトリで管理します。

NxでIonic Reactを開発する方法

ここからは対応する手順を簡単に紹介します。

Step1: IonicコマンドでReactアプリを立ち上げる

まずはIonic CLIでアプリを立ち上げます。

% ionic start
? Use the app creation wizard? No

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for
the --type option.

? Framework: React

Every great app needs a name! 😍

Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply
name, the first argument to ionic start.

? Project name: ff14-wondrous-tails

Let's pick the perfect starter template! 💪

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass
this prompt next time, supply template, the second argument to ionic start.

? Starter template: blank
✔ Preparing directory ./ff14-wondrous-tails in 1.25ms
✔ Downloading and extracting blank starter in 674.24ms
> ionic integrations enable capacitor --quiet -- ff14-wondrous-tails io.ionic.starter
> npm i --save -E @capacitor/core@latest

Step2: NxコマンドでNxにマイグレーションする

IonicコマンドでReactアプリを立ち上げた場合、2022/12時点では内部的にCreate React Appが使用されています。

そしてNxでは、Create React Appからのマイグレーション機能を提供しています。

Create-React-App (CRA) is one of the most widely used tool for creating, building and testing a React app. This guide will show you how move an app generated with CRA into an Nx workspace. Once the migration process is complete, you’ll be able to take advantage of all of Nx’s features without needing to completely recreate your build process.

Migrating a Create-React-App project into an Nx Workspace

そのため、プロジェクトのディレクトリにて以下のコマンドを実行すれば、マイグレーションが完了します。

% npx nx init

initする際、Create React Appでセットアップされたプロジェクト内にいることを検知すると、自動的にファイルの移動などを行います。

そのため、git statusで差分を見ると大変なことになります。

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   .gitignore
        modified:   .vscode/extensions.json
        modified:   package-lock.json
        modified:   package.json
        modified:   tsconfig.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .editorconfig
        .eslintrc.json
        .prettierignore
        .prettierrc
        README.md
        index.html
        nx.json
        project.json
        tsconfig.app.json
        tsconfig.base.json
        tsconfig.spec.json
        vite.config.js

Step3: ライブラリを入れ直す

コマンド１つでマイグレーション完了・・・とはいかない点に要注意です。

npx nx initでマイグレーションすると、@ionic/coreなどのライブラリがpackage.jsonから消えてしまいます。

diff --git a/package.json b/package.json
index ded22d6..ca9cfab 100644
--- a/package.json
+++ b/package.json
@@ -1,72 +1,62 @@
 {
-  "name": "ff14-wondrous-tails",
-  "version": "0.0.1",
-  "private": true,
-  "dependencies": {
-    "@capacitor/app": "4.1.1",
-    "@capacitor/core": "4.6.1",
-    "@capacitor/haptics": "4.1.0",
-    "@capacitor/keyboard": "4.1.0",
-    "@capacitor/status-bar": "4.1.1",
-    "@ionic/react": "^6.0.0",
-    "@ionic/react-router": "^6.0.0",

少し手間ですが、ライブラリを再インストールしましょう。

% npm i -D @types/react-router @types/react-router-dom @testing-library/user-event
% npm i @capacitor/app @capacitor/core @capacitor/haptics @capacitor/keyboard @capacitor/status-bar @ionic/react @ionic/react-router history ionicons react-router react-router-dom workbox-background-sync workbox-broadcast-update workbox-cacheable-response workbox-core workbox-expiration workbox-google-analytics workbox-navigation-preload workbox-precaching workbox-range-requests workbox-routing workbox-strategies workbox-streams

Step3: NxコマンドでIonic Reactアプリを起動する

最後にNxでアプリを起動させましょう。

% npm start

> temp-workspace@0.0.0 start
> nx exec -- vite


> nx run ff14-wondrous-tails:start

> temp-workspace@0.0.0 start
> nx exec -- vite
  VITE v4.0.3  ready in 1442 ms
  ➜  Local:   http://127.0.0.1:4200/
  ➜  Network: use --host to expose
  ➜  press h to show help

Ionicアプリが表示されればOKです。

Nestなど、別のプロジェクトを追加する

Nxで他のプロジェクトも管理してみましょう。

% npm i -D @nrwl/nest
% npx nx g @nrwl/nest:app first-api

>  NX  Generating @nrwl/nest:application

CREATE jest.preset.js
UPDATE nx.json
CREATE jest.config.ts
UPDATE package.json
CREATE first-api/src/app/.gitkeep
CREATE first-api/src/assets/.gitkeep
CREATE first-api/src/environments/environment.prod.ts
CREATE first-api/src/environments/environment.ts
CREATE first-api/src/main.ts
CREATE first-api/tsconfig.app.json
CREATE first-api/tsconfig.json
CREATE first-api/project.json
CREATE first-api/.eslintrc.json
CREATE first-api/jest.config.ts
CREATE first-api/tsconfig.spec.json
CREATE first-api/src/app/app.controller.spec.ts
CREATE first-api/src/app/app.controller.ts
CREATE first-api/src/app/app.module.ts
CREATE first-api/src/app/app.service.spec.ts
CREATE first-api/src/app/app.service.ts

appsディレクトリがないなど、少しディレクトリ構成が変わっている点に注意しましょう。

 % git status
On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   nx.json
        modified:   package-lock.json
        modified:   package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        first-api/
        jest.config.ts
        jest.preset.js

ビルドなども問題なく実行できます。

nx run-many --target build
yarn run v1.22.15
$ /Users/sandbox/ionic/example-app/node_modules/.bin/nx run-many --target build

    ✔  nx run ff14-wondrous-tails:build  [existing outputs match the cache, left as is]
    ✔  nx run first-api:build (7s)

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

 >  NX   Successfully ran target build for 2 projects (7s)
 
   Nx read the output from the cache instead of running the command for 1 out of 2 tasks.
 
   View logs and investigate cache misses at https://nx.app/runs/82p4GsritO

✨  Done in 7.71s.

Capacitorを併用する場合は要注意

今回はwebアプリを作る前提で試しましたが、IonicではCapacitorを利用したネイティブアプリ開発も含まれることがあります。

その場合は、NxtendのCapacitorプラグインが必要ですので、ご注意ください。