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:

  1. install Node.js > 10.x

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 -

  1. get a quick electron app

2. make a native addon with c++

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

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

  1. open main.js and edit webPreferences
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.

If you have c++ code and you want to use that code then use below article to make a native addon (.node file). Which is pretty lengthy and require it own article, So I wrote one:

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.

A web worker is a JavaScript running in the background, without affecting the performance of the page.

  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.

  1. Execute these command from project directory
npm install
npm start
  • install electron app
  • start app

Support my work

Buy Me A Coffee

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