create-react-app と Cordova を使って一発でReactのネイティブアプリ開発環境を作る


React 絶好調ですね。以前はちゃんとした開発環境を整えるには Webpack や Babel などを設定する必要があり面倒でしたが、Facebook の [create-react-app](https://github.com/facebookincubator/create-react-app) の登場により一発で環境構築ができるようになり、大変便利になりました。

create-react-app そのものは
[Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する](http://qiita.com/chibicode/items/8533dd72f1ebaeb4b614)
や、
[Facebook 公式ツール Create React App を使って React 開発の初歩を学ぶチュートリアル](http://qiita.com/kent_ocean/items/d429804b5ad0d7570ece)
などを参照いただければと思いますが、この記事では Cordova と組み合わせてネイティブアプリとしてパッケージする方法を書いています。

環境は OS X Yosemite 10.10.5 です。

## Cordova のインストール

https://cordova.apache.org/docs/en/latest/guide/cli/
の手順通り、Cordova をインストールします。

```bash:
% sudo npm install -g cordova
...
% cordova --version
6.4.0
...
% cordova create myapp de.georepublic.myapp MyApp
% cd myapp
% cordova platform add ios --save  #ios環境の追加
% cordova platform add android --save  #android 環境の追加
```

`cordova requirements` を実行すると、ビルドするのに足りないライブラリなどが出てくるので、インストールします。
私の場合は ios-deploy が足りませんでした。
指示通り`sudo npm install --global ios-deploy`を実行してみた所エラーになったのですが、
https://github.com/phonegap/ios-deploy/issues/109
にあるように
`sudo npm install --global --unsafe-perm ios-deploy`
を実行したらインストールできました。

この時点で、

```bash:
% cordova build
```

を叩いてみて、色々でたあとに
`** BUILD SUCCEEDED **`
と表示されればビルド成功。

```
cordova emulate android
```

で android のエミュレータが、

```
cordova emulate ios
```

でiOSのエミュレータが立ち上がりデフォルトのページが表示されます。


## create-react-app でアプリを作る

では、いよいよ create-react-app をインストールします。

```bash:
% npm install -g create-react-app
...
% create-react-app --version
create-react-app version: 0.6.0

```

React app を作成します。

```bash:
# cordova アプリの root にて
% create-react-app src  # src フォルダに React アプリを作成
```

npm start を実行すると、ブラウザが立ち上がりデフォルトのページが見れるはずです。

```bash:
% cd src
% npm start

Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

```

![Kobito.3yvg5b.png](https://qiita-image-store.s3.amazonaws.com/0/1399/efbbcc5b-8abb-50c7-89b7-a37bcdc16ce5.png "Kobito.3yvg5b.png")


とりあえずビルドしてみますが、 **その前に、"homepage" の設定を package.json に加え、相対パスで js などのファイルを読み込む設定に変更しましょう。** 
これをやっておかないと、後で Cordova から読み込んだ時にページが表示されません。（Cordova で開いたindex.htmlのルートパスは違う場所にあるため）

```javascript:package.json
{
  "name": "src",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",  #この行を追加
  "devDependencies": {
  ....
```


```bash:
% npm run build 

> src@0.1.0 build your_source_path
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  47.15 KB (-1 B)  build/static/js/main.309660ee.js
  289 B            build/static/css/main.9a0fe4f1.css

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
```

うまくビルドできたようです。
次に、cordova.js を読み込む文を index.html に追加しておきましょう。

```
% vi src/public/index.html
```

`<script type="text/javascript" src="cordova.js"></script>`
の行を `</body>`の前に追加する

改めてビルドをしておきます

```bash:
% npm run build 
```

では、cordova から React の build フォルダを読み込むようにしましょう。

```bash:
% cd ..           # cordova のルートに戻る
% mv www www.org  # 既存のファイルを移動
% ln -s src/build/ www  #build フォルダを、www で参照できるようにする
```

Reactアプリの build フォルダにシンボリックリンクを貼っています。
これで、cordova の build を行います。

```
% cordova build
....
** BUILD SUCCEEDED **
```

注：最初に私が実行したときには、 /platforms/android/build/intermediates/assets/debug/www/static/css/ が見つからないといったエラーがでました。そのときは、
mkdir -p ./platforms/android/build/intermediates/assets/debug/www/static/css/ 
を実行して再度実行したらビルドに成功しました。

ビルドに成功したら、emulator を起動してみます。

```
cordova emulate android
```

![Kobito.FDdOdH.png](https://qiita-image-store.s3.amazonaws.com/0/1399/8d6bf3e6-1f33-4ed8-dd55-2ee8aa702878.png "Kobito.FDdOdH.png")

```
cordova emulate ios
```

![Kobito.N6QoNd.png](https://qiita-image-store.s3.amazonaws.com/0/1399/24936fc3-a772-f5e3-ae1f-3fc2f0991689.png "Kobito.N6QoNd.png")

無事表示がされました!