DEV Community

Cover image for Day 44 of #100DaysOfCode: Use Electron-packager to generate a Window installer for the Node.js application
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on • Edited on

Day 44 of #100DaysOfCode: Use Electron-packager to generate a Window installer for the Node.js application

#javascript #node #webdev #electron

Introduction

I have use electron-builder to build the installer for Django and React application. This article is the note for generating the Windows installer for Node.js application by electron-packer.

Steps

1. install packages 

npm install -s electron electron-packager is-reachable
Enter fullscreen mode Exit fullscreen mode

2. Modify package.json 

{ ... "main": "main.js", "build": { "extends": null, "win": { "target": "portable" }, "asar": false, "files": [ "./main.js" ] } ... scripts": { "dist_win32": "electron-packager . Win32App --platform=win32 --arch=x64 --overwrite" } }
Enter fullscreen mode Exit fullscreen mode

3. Create preload.js 

const _setImmediate = setImmediate; const _clearImmediate = clearImmediate; process.once('loaded', () => { global.setImmediate = _setImmediate; global.clearImmediate = _clearImmediate; });
Enter fullscreen mode Exit fullscreen mode

4. Create main.js

  • server.js is the entry file Node.js server 
// Modules to control application life and create native browser window const {app, BrowserWindow} = require('electron'); const path = require('path'); const url = require('url'); const cp = require('child_process'); const isReachable = require('is-reachable'); const contants = require('./constants.js'); const logFilePath = contants.logFilePath; const logger = require("pino")(logFilePath); const port = process.env.PORT || 8000; const startAdonis = () => { cp.execFile('node', [`${path.join(__dirname,'server.js')}`]); }; const createWindow = () => { // Create the browser window. const mainWindow = new BrowserWindow({ width: 1200, height: 1000, webPreferences: { preload: path.join(__dirname, 'preload.js') } }); // and load the index.html of the app. mainWindow.loadURL(`http://localhost:${port}/index`); // Open the DevTools. // mainWindow.webContents.openDevTools() }; // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.whenReady().then(async() => { startAdonis(); while(!await isReachable(`http://localhost:${port}`)) { logger.info('wait for the node.js server'); } createWindow(); app.on('activate', function () { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow() }); }); // Quit when all windows are closed, except on macOS. There, it's common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd + Q. app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit(); }); // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.
Enter fullscreen mode Exit fullscreen mode

5. Generate the Windows installer 

npm run dist_win32
Enter fullscreen mode Exit fullscreen mode

That's it!

Articles

There are some of my articles. Feel free to check if you like!

Top comments (0)