React + Redux + Electronのプロジェクトを作成する。

# 前書き
前回、ReactのプロジェクトにReduxを導入する記事を作成しました。
今回では、そのプロジェクトをElectronを使ってデスクトップアプリ化する方法を記述します。
正直、前々回でやった「[ReactのプロジェクトをElectron化する](http://qiita.com/gcmae/items/c34de805101ae489532e)」で紹介した方法とほとんど似ています。

# リポジトリ
いつものReactTodoのリポジトリになります。
ブランチで分けていますので、差分等をみても参考になると思います！

**react-todo-redux**が前回作成したReactTodoにReduxを導入したブランチ
**react-redux-electron**が上記をElectron化したブランチになります。

[ReactTodo](https://github.com/gcmae/react-todo/tree/react-todo-redux)
# 1. ディレクトリ変更
前々回でElectron化した時は、electronフォルダとreactフォルダを作成しました。
今回は、もっと分かりやすくディレクトリを変更します。

* 変更前src直下ディレクトリ

```
├── actions
│   └── AppActions.jsx
├── components
│   ├── App.css
│   ├── App.jsx
│   ├── DeleteDialog.jsx
│   ├── TodoList.jsx
│   └── UpdateDialog.jsx
├── containers
│   └── App.jsx
├── index.css
├── index.js
├── logo.svg
├── reducers
│   └── reducer.jsx
└── utils
    ├── WebStorage.jsx
    └── todoApi.jsx
```


* 変更後src直下ディレクトリ

```
├── MainProcess
│   └── index.js
└── RenderProcess
    ├── actions
    │   └── AppActions.jsx
    ├── components
    │   ├── App.css
    │   ├── App.jsx
    │   ├── DeleteDialog.jsx
    │   ├── TodoList.jsx
    │   └── UpdateDialog.jsx
    ├── containers
    │   └── App.jsx
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reducers
    │   └── reducer.jsx
    └── utils
        ├── WebStorage.jsx
        └── todoApi.jsx
```

元々、src直下にあったActionsやComponents
および、ReactのソースはRenderProcessのディレクトリに移動
Electronの実行ファイル、index.jsを作成しMainProcessのディレクトリへ移動
この方が、前回のReactとかElectronって分け方よりも分かりやすいですね。

# 2. Electronの実行ファイルの作成
基本、前々回とは変わりはありませんが
今回ではビルド後のディレクトリも変更しますので、指定するmainWindowのhtml先が変わっています。

```index.js
// Electron
import {
  app,
  BrowserWindow,
} from 'electron'

// アプリ起動時の処理
app.on('ready', () => {
  const winSetting = { width: 800, height: 600 }
  const mainWindow = new BrowserWindow(winSetting)
  // mainWindow.openDevTools()
  mainWindow.loadURL(`file://${__dirname}/../renderer/index.html`)
})

// アプリ終了時の処理
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
```

メニューとか、ipcを利用しないのであれば、この実行ファイルだけで事足りますね。

# 3. webpack.config.jsの修正
ビルド後のディレクトリは以下を想定します。

```
├── main
│   └── index.js
└── renderer
    ├── bundle.js
    └── index.html
```

前々回のビルド後のディレクトリは以下でした。

```
├── index.html
├── js
│   ├── electron
│   │   └── index.js
│   ├── index.js
│   └── react
│       └── index.js
```

ビルドフォルダ自体はdistというフォルダ名でした。
今回は、buildに変更し
その中は、mainとrendererと、ビルド前のsrc直下と似た感じにしました。

では、変更したwebpack.config.jsが以下になります。

```webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
  entry: {
    'main/index': './src/MainProcess/index.js',
    'renderer/bundle': './src/RenderProcess/index.js',
  },
  output: {
    filename: 'build/[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            'es2015',
            'react',
          ],
        },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  target: 'electron',
  node: {
    __dirname: false,
    __filename: false,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: path.join(__dirname, 'build/renderer', 'index.html'),
      inject: false,
    }),
  ],
}

module.exports = config
```

entryの部分でMainProcessはmainへ
RenderProcessの部分はrendererへビルドするようにします。
以降は前々回と同じですね、HtmlWebpackPluginの吐き出し場所がbuild内のrendererへ移動したぐらいです。

# 4. index.htmlの修正
index.htmlの修正は特にありません。
React部をbundle.jsとして吐き出しますので、それの指定をするぐらいです。

```index.html
<!-- public/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>

    <title>React Todo</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./bundle.js"></script>
  </body>
</html>

```

# 5. package.jsonの修正
package.jsonはmainのところを変えました。
ビルド後のElectron実行ファイルをmainとしています。

```
...
  "main": "./build/main/index.js",
  "babel": {
    "sourceMaps": "inline",
    "presets": [
      "es2015",
      "react"
    ]
  },
...
```

# 6. Electronの起動、パッケージ化
* 起動コマンド

```bash
$ electron.
```

* パッケージコマンド

```bash
$ electron-packager ./ ReduxElectron --platform=darwin --arch=x64 --electron-version --overwrite --icon=app.icns
```

パッケジージコマンドで、**--icons=app.icns**は、アプリのアイコンです。
アイコンがない場合は特にしている必要はありません。

# 後書き
Reduxを導入したReactをElectronにてデスクトップアプリ化してみました。
前書きでも言った通り前と変わらずとても簡単でした！
結局はbundle.jsとhtmlファイルにビルドされますので
それをElectronのmainWindowとして呼べればデスクトップ化は完了になります。

色々と奥の深く、それでいて面白いElectronなので、
みなさんも是非是非、簡単にWebアプリをElectronでデスクトップアプリ化してください！