LoginSignup
26

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-05-12

前書き

前回、ReactのプロジェクトにReduxを導入する記事を作成しました。
今回では、そのプロジェクトをElectronを使ってデスクトップアプリ化する方法を記述します。
正直、前々回でやった「ReactのプロジェクトをElectron化する」で紹介した方法とほとんど似ています。

リポジトリ

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

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

ReactTodo

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の起動、パッケージ化

  • 起動コマンド
$ electron.
  • パッケージコマンド
$ 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でデスクトップアプリ化してください!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26