Setting Up an Environment for Developing React Native App on Linux VM with Windows 7 Host

        最近打算將食譜搜搜 App 用 React Native 改寫，因此研究了一下創建一個專門 for React Native 的開發環境。感覺還蠻複雜的，因此記錄下一些心得供日後參考。

1. Preparing a VM

因為沒有 Mac 又不想用 Windows 開發，因此想說建一個 Headless Linux 的 VM 跑在 Windows 7 上。Project files 放在 share folder 裡，同時經由 SSH 進去 VM 以 command line 作啟動 web server 及 build 等相關的操作。這裡用的是 Vagrant + Virtual Box，Linux dist. 則是 Ubuntn Precise64。執行動作是，

      Create 一個 folder，執行 Vagrant init
      編輯 Vagrantfile，設定 VM Box (Guest OS)，如果本機沒有這個 Box，可能要先作 Vagrant box add
      之後 Vagrant up 就可以把 VM 跑起來了
   
以下幾點值得注意:

• VM 跑起來 SSH 進去後先作 apt-get update
• Virtual Box 的 share folder 會有 Symlink 及 Windows 檔案路徑過長的問題，特別是在 npm install node_modules 的時候。花了一些時間試了幾個不同的 Vagrant 及 Virtual Box 版本，發現 Vagrant 1.7.3 + Virtual Box 4.3.x 這樣的 combination 是 ok 的。
• 在 Vagrantfile 裡 VM Network 要設定成 public，這樣手機連上 WiFi 後才看得到這台 VM，後續 load JS bundle 才不會有問題。
• http://stackoverflow.com/questions/31455027/vagrant-and-npm-install-on-shared-folder
• https://github.com/mitchellh/vagrant/issues/4815
• https://github.com/mitchellh/vagrant/issues/5933
• http://www.ahtik.com/blog/fixing-your-virtualbox-shared-folder-symlink-error/

1. Dependencies Installation

按照 React-Native 官網上的' Getting Started 及 Android Setup 步驟把該裝的裝一裝。這裏可能會有問題的有，

• 在 command line 如何安裝 Android SDK tools http://stackoverflow.com/questions/17963508/how-to-install-android-sdk-build-tools-on-the-command-line
• npm 不要升級，用 nodejs 裡含的即可，因為 npm >3 node_modules 裡的結構改了，之後的 react-native init 會 fail。
• 裝 watchman 前要先裝 python-dev。
• 在裝 Android SDK 前上官網看一下，有些東西要先裝 (depends on Ubuntu version)

1. Project init and testing

接下來就可以 react-native init myAwesomeProject 了， 因為電腦不給力所以就捨棄 Emulator 採實機作測試。重點如下，

• 一開始嘗試透過 USB 操作 Adb，結果試半天一直弄不出來，只好透過 WiFi 連。相關操作參考官網。http://developer.android.com/tools/help/adb.html#forwardports
• 第一次 init project 要一段時間，因為有太多 dependencies 要從 npm 抓下來。

一些參考連結

http://my.oschina.net/jackzlz/blog/508210#OSC_h2_1

 
     12/09 Update

• FB 的 Watchman 在 shared folder 不 work https://github.com/facebook/watchman/issues/43，在 development 時無法 live reload 會很不方便，因此只能把 project 建在其他純 Linux file system 的地方。解決方法是 1. 把 project  copy 一份到 shared folder，然後用 Grunt tasks watch file changes 再 sync 到真正的 project folder 去，或是 2. 在 Windows 下的 editor SSH 進 VM 直接作編輯。目前採用方法 1。
• FB Watchman 跟 Grunt Watch task 在 Linux 都靠 inotify implement，要小心 max_user_watches 相關設定，否則 react-native start 或 grunt watch 會有問題。https://facebook.github.io/watchman/docs/install.html#linux-inotify-limits  http://unix.stackexchange.com/questions/13751/kernel-inotify-watch-limit-reached  https://github.com/gruntjs/grunt-contrib-watch/issues/236
• 平常開發會在 Windows 下用 Genymotion emulator 作 testing 及 debug，這樣在 emulator 執行 debug JS 時會因為想要開 localhost:8081/xxxxxxx 而導致問題。目前的解法是 hack Project Folder 下的 \node_modules\react-native\local-cli\server\util\debuggerWorker.js 這個檔，在 messageHandlers 送出 url 前把它改掉。