Electron+React+Typescriptの開発環境を作る・改

はじめに

前にElectron+React+Typescriptの開発環境を作るという記事を書いたのですが，create-react-appがTypescriptをサポートしたことによって，上記のやり方はオススメできなくなってしまったので，推奨される開発環境づくりをここに書いておこうと思います．

アプリ起動まで

アプリ作成

アプリ名は，小文字にしてください．npxを先頭につけるとcreate-react-appがグローバルにインストールされていなくても使用できます．

$ npx create-react-app [アプリ名] --typescript

Electronの設定

electronとelectron-is-devとconcurrently, wait-onをインストールする．

$ yarn add -D electron electron-is-dev concurrently wait-on

publicフォルダ内にelectron.jsを作成する．

public/electron.js

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const isDev = require('electron-is-dev')
let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    resizable: false,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadURL(
    isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`
  )
  if (isDev) {
    // Open the DevTools.
    // BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
    mainWindow.webContents.openDevTools()
  }
  mainWindow.on('closed', () => (mainWindow = null))
}

app.on('ready', createWindow)

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

package.jsonを編集する．
BROWSER=none yarn startを記述することでelectron起動時にブラウザが開かなくなります．
※Windowsの人はset BROWSER=noneとしてください．Macの人は下記の記述のままでOKです．

package.json

{
 .
 .
 "homepage":"./",
 "main":"public/electron.js",
 .
 .
 "scripts":{
  .
  .
  "dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
 }
}

アプリ起動

$ yarn dev

最後に

この業界は目まぐるしい速さでアップデートされていくので，今回のようにバージョンが変わったことによって，今までのやり方が変わることは多々あります．出遅れないようにしていきたいです．

参考

[非推奨][TypeScript] create-react-appで始めるだいたいストレスフリーな開発環境の構築
[TypeScript] create-react-appで始めるだいたいストレスフリーな開発環境の構築2
TypeScript