LoginSignup
0

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サーバーの起動に成功。

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

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
What you can do with signing up
0