React&Electronでホットリロードができるソフト開発の環境構築をする

はじめに

Reactを用いてElectron開発をしようとして記事を漁ったがうまく動かない参考記事もあったのでここに自分のメモも兼ねて記事を書こうと思う。

Reactの構築はめんどくさそうだったので(そもそもreact初心者)create-react-appを使用して構築することにする。主に次のことを備えた環境にする。
・create-react-appを用いReactを使えるようにする
・Electronの使用
・HotReloadができるようにする
(typescriptは書き方勉強してないので今回はパスで)

エディタにJetbrainsの神エディタWebstormを使用しているので新しいプロジェクトを作成から簡単にcreate-react-appを使用してreactの環境を構築することができる。が、webstromを使わなくてもcreate-react-appを実行できる環境があれば十分である。

構築

node.jsは入っているものとして考え今回はnpmを使用していくことにする。

各種ライブラリのインストール

以下のライブラリを入れる。
・Electron(ソフト開発の中心)
・create-react-app(React関係のものを自動で入れてくれてサンプルコードまで書いてくれる)
・electron-is-dev(開発中かどうかを判断してくれるもの)
・electron-reload(HotReloadをできるようにする)
・electron-builder(Electronのビルド)
・concurrently(コマンドを複数実行できるようにする)
・wait-on(なんか次のコマンド実行を待機してくれるやつ)

すでにプロジェクトは作成されcreate-react-appは実行されたものとする。

npm install electron-is-dev electron-reload
npm install -D concurrently electron electron-builder wait-on

メインプロセスの作成

任意の名前のディレクトリを作る。今回はelectronという名前で作成する。この中にElectronのメインプロセスを書いていく。

mkdir electron

作ったディレクトリ内にmain.jsという名前でJSファイルを作る。

main.js

const {app,BrowserWindow,Menu} = require("electron");
const path = require("path");
const isDev = require("electron-is-dev");

let mainwindow;

function createmainwindow(){
    mainwindow=new BrowserWindow({
        width:800,
        height:600,
        webPreferences:{
            nodeIntegration:true,
            contextIsolation:false
        }
    });
    if(isDev){
        mainwindow.loadURL("http://localhost:3000/index.html");
    }
    else{
        mainwindow.loadURL(`file://${__dirname}/..index.html`);
    }
    mainwindow.on("closed",()=>{
        mainwindow=null;
    });
    if(isDev){
        require("electron-reload")(__dirname,{
            electron:require(`${__dirname}/../node_modules/electron`)
        })
    }
}

app.on("ready",()=>{
    createmainwindow();
});

app.on("window-all-closed",()=>{
    if(process.platform!=="darwin"){
        app.quit();
    }
});

app.on("activate",()=>{
   if(mainwindow===null){
       createmainwindow();
   }
});

package.jsonの編集

以下をpackage.jsonに加える。

package.json

"homepage":".",
"main":"electron/main.js"

mainにはElectronのメインプロセスのエントリポイントを指定する。また以下も追加する。

package.json

  "scripts": {
    "postinstall": "electron-builder install-app-deps",
    "electron:dev": "concurrently \"npm start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron:build": "まだ書いてない",

electron:devは開発時に実行するスクリプトである。Reactをまず最初に実行しhttp://localhost:3000 が起動できてからElectronを起動する。

おわりに

まだビルド設定やRender processについて書いてないので随時更新していく。
今回の記事のサンプルソースをgithubに上げたので詳しくはそちらを参照。
https://github.com/Sosupe/electron_react_test

参考記事
・https://qiita.com/yhirose/items/22b0621f0d36d983d8b0
・https://qiita.com/ganyariya/items/982803466e22dc53eaeb