Electron App with C++ backend as Native Addon (Napi)

Native addon will be made with Napi and Cmake. Napi makes it independent of node version and Cmake facilitate easy code compilation.
Web worker will be used to call c++ native addon, so we can be sure that our app UI will not get blocked because of c++ processes.

Requirement:

Note:- Remember to check automatically install the necessary tools while installing.
(this will be required to install vs-build tool on windows )

2. install Cmake > 3.15
( required for c++ code compilation )

Overview -

2. make a native addon with c++

3. create web workers which calls c++ native addon

Install Electron quick starter app

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start

Configure electron app to run node.js

webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
nodeIntegrationInWorker: true
}
  • nodeIntegration enable node processes in electron app.
  • nodeIntegrationInWorker enable node processes in web workers.

C++ Native Addon

For the sake of tutorial I have a GitHub repository of basic c++ native addon and we are going to use it.

  1. clone and install GitHub repository in project directory
git clone https://github.com/AtiqGauri/Nodejs-Napi-Addon-Using-Cmake.gitcd Nodejs-Napi-Addon-Using-Cmake
npm install
  • now we have native addon at Nodejs-Napi-Addon-Using-Cmake/build/Release/addon.node
  • this native addon can be called in electron app to run c++ code
  • we will call it in a web worker so UI doesn’t get blocked if our c++ code takes time.

Web Workers

  1. create a worker.js file inside app folder and add below code in it.
//address of native addon 
const {add} = require('./Nodejs-Napi-Addon-Using-Cmake/build/Release/addon.node');
//Calling functions of native addon
var result = add(3,4);
//console.log(result);//communicating with main process of electron app.
postMessage(result);
  • This file import built addon and execute add function.
  • postMessage(result); this is used to message results to app once execution is completed.

2. edit renderer.js file inside app folder to look like this.

var worker = new Worker('./worker.js');worker.onmessage = function(event) { 

//print result on console and h1 tag
console.log("worker : ", event.data);
document.querySelector('h1').innerHTML = "native addon add function(3, 4): " + event.data;
//terminate webworker
worker.terminate();

//set it to undefined
worker = undefined;
}
worker.onerror = function (event) {
console.log(event.message, event);
};
  • This file calls worker.js script inside a web worker.
  • onmessage is used to receive any message from web worker.
  • onerror catches any error from web worker.

Run application

npm install
npm start
  • install electron app
  • start app

Support my work

Additional Possibilities

Full Stack Developer and Concept Designer (https://atiqgauri.github.io/)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store