React Native for WebをElectronで動かす #reactnative

前回（React NativeをExpo無しで始めて、React Native for Webも動かすまで - Qiita）は、React NativeでiOS/Androidが動作し、React Native for Webでブラウザ上での動作まで確認できました。

今回は、それをElectron上で動かし、デスクトップアプリ化してみようと思います。

環境

前回の環境から少しアップデートしています。

macOS 10.13.3
Node.js 8.10.0

react 16.2.0
react-native 0.54.2
react-native-web 0.5.3

そこに今回、書きを追加します。

react-native-electron 0.4.2
electron 1.8.4
webpack-serve 0.2.0

実際には、下記を実行しました。

yarn add react-native-electron
yarn add -D electron
yarn add -D webpack-serve

Electron動作用のファイルを準備する

https://github.com/PaulLeCam/react-native-electron/tree/master/example にあるファイルを参考に、ファイルを配置していきます。

今回は、前回用意した web ディレクトリと並列に electron ディレクトリを作成し、その中に置いていきます。

electron/webpack.config.js

https://github.com/PaulLeCam/react-native-electron/blob/master/example/webpack.config.js をコピーします。

そのままだと、

Module not found: Error: Can't resolve 'react-native'

というエラーが出てしまうので、READMEに記載してあった https://github.com/gh-viewer/client/blob/master/webpack.config.js を参考に、
'react-native': 'react-native-electron' に変更しました。

electron/app/renderer.js

続いて、上記のwebpackの設定で出てきた renderer.js を作成します。

こちらも、 https://github.com/PaulLeCam/react-native-electron/blob/master/example/app/renderer.js をコピーします。

App の位置が違っているので、
2箇所ある ./App を ../../src/App に変更しました。

electron/app/main.js

続いて、Electron実行時のentry pointとなるjsファイルです。

https://github.com/PaulLeCam/react-native-electron/blob/master/example/app/main.js をコピーします。

こちらは、このままでも問題なかったのですが、
https://electronjs.org/docs/tutorial/first-app にある、Electron公式チュートリアルを参考に、

const path = require('path');
const url = require('url');
...
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    })
  );

のように書き換えてみたり、 win.webContents.openDevTools(); を追加してみました。

electron/app/index.html

実際に読み込むhtmlファイルです。

https://github.com/PaulLeCam/react-native-electron/blob/master/example/app/index.html をコピーして、そのまま利用しました。

package.json

ルートにある package.json に、起動用のスクリプトを追加しました。

  "scripts": {
    "start:electron:server": "webpack-serve ./electron/webpack.config.js",
    "start:electron:client": "electron ./electron/app/main.js",
  },

起動してみる

まずは、 bundle.js を配信するためのサーバを立ち上げます。

yarn start:electron:server

この状態で、 http://localhost:7000/bundle.js にアクセスすると、コンパイルされたjsファイルが確認できました。

続いて、Electronアプリを起動します。上記のサーバは立ち上げたまま、別のウインドウを用意して、

yarn start:electron:client

を実行します。
すると、Dev Toolsとともに、作成したアプリが表示されます。

src/App.jsにある文字列を書き換えて保存すると、サーバの方が自動的に再コンパイルを行いました。
ただ、Electronの方をhot reloadさせようとすると、別のパッケージが必要なようなので、今回は見送ります。
現状でも、Electronのアプリにて Cmd+rを押すことで、書き換え後の文字列が表示されました。

これで、React Nativeで作成したアプリを、デスクトップアプリとして動かすこともできそうです。

今回の変更点は、 https://github.com/noboru-i/Memo2GitHub/pull/1/files にあります。

参考

https://github.com/PaulLeCam/react-native-electron のサンプルコード
https://github.com/gh-viewer/client のwebpack.config.jsなどの設定
https://electronjs.org/docs/tutorial/first-app