Elektroniker ([elɛkˈtʁoːnɪkɐ]; german for electronics technician) is a development tool for electron. It restarts application and frontend separately on changes. A change in your main process code will always trigger a restart of your electron application. If you configure a path to your render code. A change will only reload your BrowserWindow. You also can define hooks on different change events.
Install with npm:
npm install --save-dev elektroniker
To use elektroniker in your development you have to call startElektroniker both in your main and your frontend code. This starts a websocket connection between elektroniker and your frontend to emit to relaod event.
Call startElektroniker
in your main process:
const isElektronikerRunning = require("elektroniker").startElektroniker(process.argv);
To make startElektroniker
available in your frontend you need a preload script for your BrowserWindow that requires "elektroniker/src/preload".
require( "elektroniker/src/preload" );
You can use isElektronikerRunning
to exclude it on production or if you already use a preload script you can distinguish between a production and a development preload script. See the following snippets:
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
preload: path.join( __dirname, isElektroniker ? "preload.dev.js" : "preload.js" )
}
});
And in your preload.dev.js you can simply require your preload script
require( "elektroniker/src/preload" );
require( "./preload" );
Finaly you have to call startElektroniker in your frontend code.
if( typeof startElektroniker !== "undefined" ) {
startElektroniker();
}
Create a simple run srcipt in your package.json file.
{
"name": "test",
"version": "0.1.0",
"description": "",
"main": "./src/main/index.js",
"scripts": {
"start": "electron ./src/main/index.js",
"dev": "elektroniker ./src/main/index.js"
}
Now you can run elektroniker by running the dev script:
npm run dev
You can configure elektroniker by creating a elektroniker.config.js
file that exports a config object.
name | type | default | description |
---|---|---|---|
entry | string | "./src/index.js" | Entry point to electron. Can also be set as first command line argument (see Run). |
args | array | [] | Command line arguments that will be passed to electron. |
watchPath | string or object | "./src" | Ether a string to the path to be watched for changes or an object with a main and a render property. Both have to be strings of paths to your main and your render code. If watchPath is a string then a change in the watched path will always trigger a restart of the electron application. If you pass an object, a change on the main path will also restart the application. A change of the render code will only result in a reload of your BrowserWindow. |
onBeforeStart | function | null | Hook that is called once before your main process is started. |
onMainChange | function | null | Hook that is called on a change in the main process code, but before the application is restarted. |
onRenderChange | function | null | Hook that is called on a change in the render process code, but before the window is relaoded. |
All hooks can return promises. In that case a restart or reload is only triggered if the promise resolves.
Here is sample elektroniker.config.js file that runs a webpack build before the application start and before each reload of the frontend code.
const path = require( "path" );
module.exports = {
watchPath: {
main: path.join( __dirname, "src", "main" ),
render: path.join( __dirname, "src", "render" )
},
onBeforeStart: () => {
return runWebpack();
},
onMainChange: () => {
console.log( "foo" );
},
onRenderChange: () => {
return runWebpack();
}
}
function runWebpack() {
const webpack = require("webpack");
const { promisify } = require("util");
const config = require("./webpack.config");
const webpackAsync = promisify( webpack );
return webpackAsync( config );
}