CapacitorとCreate React AppでiOSアプリを作り実機実行するまで

CapacitorとCreate React AppでiOSアプリを作り実機実行するまでの手順。

環境

• MacBook Pro (16-inch 2019)
• macOS Monterey 12.3.1
• Xcode 13.3.1
• Node.js v14.17.1

手順

準備

まずcocoapodsをインストールする。

sudo gem install cocoapods

プロジェクトの作成

npx create-react-app my-app --template typescript # TypeScriptを使うかどうかは好みで
cd my-app
npm install @capacitor/core
npm install @capacitor/cli --save-dev
npx cap init # アプリ名等をここで質問されるので決める。後から変更もできる
npm install @capacitor/ios
npx cap add ios

実行

npm run build # まずHTMLをビルドしておく

npx cap run ios # 実行。

# 上記で実行できない場合は、以下でワークスペースを開き、そこから実行を試みる。
open ios/App/App.xcworkspace

この手順を実行していると、Xcodeを開いた時にCommand Line Toolのインストールが始まることがあるが、それはインストールして、その後手順をやり直すとよい。

参考

• Installing Capacitor
  • https://capacitorjs.com/docs/v3/getting-started
• Capacitor iOS Documentation
  • https://capacitorjs.com/docs/ios