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

  • 38
    いいね
  • 0
    コメント

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

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

環境は OS X Yosemite 10.10.5 です。

Cordova のインストール

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

% 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
を実行したらインストールできました。

この時点で、

% cordova build

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

cordova emulate android

で android のエミュレータが、

cordova emulate ios

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

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

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

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

React app を作成します。

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

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

% 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

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

package.json
{
  "name": "src",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",  #この行を追加
  "devDependencies": {
  ....
% 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>の前に追加する

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

% npm run build 

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

% 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

cordova emulate ios

Kobito.N6QoNd.png

無事表示がされました!