Cordova
reactjs
React
create-react-app

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

More than 1 year has passed since last update.

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

無事表示がされました!