LoginSignup
0
0

More than 1 year has passed since last update.

NxでReact製のwebアプリとReact Native製のmobileアプリをモノレポ管理するメモ(開発サーバーの起動まで)

Posted at

これは

初めてNxを使ってモノレポ管理を実践した時の雑な作業メモ。

バージョンは以下の通り。

"nx": "15.8.7"
"react": "18.2.0",
"react-native": "0.71.2",
"typescript": "^5.0.2"

基本的にはnxの公式の手順に従って進める。

メモ

まずはnxのワークスペースを作成。名前は仮。
npx create-nx-workspace nx-sample

オプションはPackage-based monorepoを選択。

作成完了後、nx-sampleに移動して
typescriptを入れてtsconfig.json作成。

次にnxのreactとreact native用のパッケージを入れる。

npm i -D @nrwl/react @nrwl/react-native

オプションは以下の通り選択。

  • ✔ Which stylesheet format would you like to use? · css
  • ✔ Would you like to add React Router to this application? (y/N) · false
  • ✔ Which bundler do you want to use to build the application? · vite

rootのpackage.jsonのscriptsに追加。

"dev:web" : "nx serve web"

npm run dev:webで開発サーバーの起動に成功。

次にmobile版のアプリケーション作成。
nx g @nrwl/react-native:app mobile

下記エラーが発生。

 >  NX   Command failed: pod install
/bin/sh: pod: command not found
Pass --verbose to see the stacktrace.

cocoapodsがなかったので手動で入れる。

sudo gem install cocoapods

再度nx gコマンド実行。
ここでかなり時間がかかる。
結果別のエラーが発生。

 >  NX   Command failed: pod install

   
   [!] Do not use "pod install" from inside Rosetta2 (x86_64 emulation on arm64).
   
   [!]  - Emulated x86_64 is slower than native arm64
   
   [!]  - May result in mixed architectures in rubygems (eg: ffi_c.bundle files may be x86_64 with an arm64 interpreter)
   
   [!] Run "env /usr/bin/arch -arm64 /bin/bash --login" then try again.
   
   Pass --verbose to see the stacktrace.

一旦削除してbrewで再度インストール。

sudo gem uninstall cocoapods

arch -arm64 brew install cocoapods

そしてnpx nx start mobileでmetroサーバーの起動に成功。

簡単すぎるが一旦今回はここまで。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0