💭

DevBoxでexpo実行環境を作成する

2022/12/30に公開

いきさつ

DevBoxの利用事例として、多少ノウハウのあるexpoの環境構築を試してみた

前提

wslを使う
DevBoxを使う

expoのパッケージは以下を使用

前半にexpo単体、そのあとにelectron連携を含めた場合の例を記載

良かった点

スクラッチで構築するよりもテンポよく作業できた
繰り返し初期化作業を行う場合は、キャッシュが利いててかなり時短になった

詰まった点

エラーが出るたび、調べて回避を多少繰り返した（npmが必要等）が、数は少なかった、（一発で通ったわけではない・・・という程度）
そのプロダクトのノウハウがあれば回避は上記の容易だが、先達のガイドがあれば実行環境の干渉が少ない分、結果的には一番簡単に構築できる手順だと思った

expoの起動（expo単体起動）

expo
https://github.com/expo/expo-cli/tree/main/packages/expo-cli#readme

作業ディレクトリに移動

mkdir -p ./expo/v01
cd ./expo/v01

devboxの初期化を行う

devbox init
devbox add nodePackages.npm nodePackages.expo-cli
devbox shell

devboxに入ってから、expoの初期化を実行

expo init

以下を選択

What would you like to name your app? … my-app
Choose a template:
blank               a minimal app as clean as an empty canvas

expoの初期化完了後、以下を実行

cd my-app
expo start

expoの起動を確認

› Metro waiting on exp://127.0.0.1:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

electron連携時の環境設定

手順
作業ディレクトリに移動
```
mkdir -p ./expo/v02
cd ./expo/v02
```
devboxの初期化を行う
```
devbox init
devbox add nodePackages.npm nodePackages.expo-cli
devbox add nodejs yarn electron
devbox shell
```
後は以下の手順に従う
https://zenn.dev/waterz1815/articles/2c3726e83e675c#プロジェクトの新規作成を行う

Discussion