背景
Windows環境でReact Nativeの開発をやってみようと環境構築をしてみた。
普段の開発はローカルのvirtualboxに入ったlinuxでやっているので、
Powershellをつかったwindows環境構築は行わずに、
当初は
- WSL (Ubuntu)
- VSCode
を利用した環境を構築した。
しかし、
- expo start したあとにネットワークが切断される
- サービスから LxssManagerを再起動すれば一応復帰する
- hot reloadが効かない
- windows上のvscodeで、WLSのファイルを直接弄っているからinotify通知が来ない
- そもそも更新した内容が反映されない
- androidのアプリ側でキャッシュ削除したり expo start -c などで治るときもある
という3つの不安定さがあった。
対応
まず、linux(centos7利用)上ではexpoの動作は問題ない。
また、VSCodeには remote development機能が存在している。
→ remote developmentの設定はこちら参照
これらを利用した。
ゴール
- virtualboxのcentos7でexpoは動かす
- 開発はwindows側のvscodeで実施する
ゴールへの要点
- virtualboxのポートフォワーディング機能で 19000, 19001 をフォワードする
こちらの記事に設定方法は記載あり。
- expoを動かす際に、ホストwindows側のIPアドレスを指定する
REACT_NATIVE_PACKAGER_HOSTNAME={your windows IPaddr} expo start
windows IPaddrはipconfigコマンドなどで調べる。
上記2点がつまづきポイント。
あとは同じネットワーク内にスマホとPCが繋がっていれば、
スマホのexpoアプリからチェックできる。
vscodeのremote development機能で、ソースコードをいじったら、
hot reloadも動く。
素晴らしい！
remote debug機能とexpoの REACT_NATIVE_PACKAGER_HOSTNAME を応用すれば、リモートサーバでの開発もできそう。
macと違ってwindowsだと開発にひと手間掛かっちゃう世界が、
WSLの発展で解消されればいいなぁ。