hot-electron-launcher-plugin v1.3.3

HotElectronLauncherPlugin

🚒Effortlessly launch and reload Electron from Webpack🚒

What?

HotElectronLauncherPlugin (HELP) lets you launch Electron when your build is ready and works with Webpack to keep your app up to date. When you edit part of your main bundle, Electron is relaunched, while renderer bundle changes result in a page reload so your app will always reflect your latest changes.

Why?

• Electron launches automatically when your Webpack build is ready, meaning the only npm script you will need for development is Webpack

• Updates to the main process result in a relauch whereas updates to renderer just refresh your windows to minimize overhead while ensuring your app is up to date

• Zero required config

• Typed and tested

• Generally HELPful 🙃

Installation

npm install hot-electron-launcher-plugin

or

yarn add hot-electron-launcher-plugin

Usage

Your Webpack config should have 'electron-main' and 'electron-renderer' targets. This is a good pattern independent of this tool, and is already used by the most popular Electron+Webpack boilerplates (e.g. electron-react-boilerplate).

For a full working example, see this repo's 'example' directory.

webpack.config.js

const { HotElectronLauncherPlugin } = require("hot-electron-launcher-plugin")
const hotElectronLauncherPlugin = new HotElectronLauncherPlugin()

const mainConfig = {
    target: "electron-main",
    output: {
        filename: "main.js",
        path: __dirname + "/build"
    },
    plugins: [
        hotElectronLauncherPlugin
    ],
    etc...
}

const rendererConfig = {
    target: "electron-renderer",
    output: {
        filename: "renderer.js",
        path: __dirname + "/build"
    },
    plugins: [
        hotElectronLauncherPlugin
    ],
    etc...
}

module.exports = [mainConfig, rendererConfig]

Near the top of your Electron main file, setup HELP's listener:

main.js

import { app } from "electron"
import { listen } from "hot-electron-launcher-plugin"
listen(app)

package.json

"scripts": {
    "start": "NODE_ENV=development webpack-cli --watch",
    etc...
}
etc...

Options

HotElectronLauncherPlugin's constructor can accept an options object with the following shape:

{
    // An array of strings to pass to Electron when launching your app (default is [])
    electronProcessArgs: ["--inspect=9999"],
    // Millis before an Exception is thrown when trying to connect between processes (default is 5000)
    connectionTimeout: 5000,
    // Whether to force Electron to refresh its windows when renderer code is changed (default is true)
    enableLiveReload: false
}

Issues

Submit any bugs or feature requests on Github's default page for doing so and we'll do our best to address them.

Wishlist

HMR

As the tool's name suggests, we'd love to find a way to directly offer options for hot module replacement alongside HELP's existing functionality. However, we want to keep the plugin generic and compatible with a wide variety of ecosystems, and currently that seems like a huge challenge given the nuances of HMR interactions with any given dev environment (see react-hot-loader's README for an example of what I mean). If at some point in the future this becomes feasible to implement in a way that doesn't restrict users too much, I'll try to include it by default.

Currently, existing HMR solutions can work well alongside HELP if you choose to include them. Just make sure you disable HELP's live reloading so you can benefit from it:

{
    const hotElectronLauncherPlugin = new HotElectronLauncherPlugin({enableLiveReloading: false})
}

License

MIT License