前書き
前回、ReactのプロジェクトにReduxを導入する記事を作成しました。
今回では、そのプロジェクトをElectronを使ってデスクトップアプリ化する方法を記述します。
正直、前々回でやった「ReactのプロジェクトをElectron化する」で紹介した方法とほとんど似ています。
リポジトリ
いつものReactTodoのリポジトリになります。
ブランチで分けていますので、差分等をみても参考になると思います！
react-todo-reduxが前回作成したReactTodoにReduxを導入したブランチ
react-redux-electronが上記をElectron化したブランチになります。
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先が変わっています。
// 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が以下になります。
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として吐き出しますので、それの指定をするぐらいです。
<!-- 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でデスクトップアプリ化してください！