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

…

Install Electron quick starter app

1. clone electron quick start app

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

…

Configure electron app to run node.js

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.

…

C++ Native Addon

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:

C++ Native Addon independent of Node.js version using Napi/node-addon-api and Cmake

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.git
cd 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

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.

…

…

Run application

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

• You can call any type of c++ code e.g. multi-threaded code, any old code can be called by adding header files in it (exception handling must be handled).
• Napi addon are node.js independent and cmake coupling makes it support any electron version or nw.js.
• I made a complete electronJS app which runs c++ multi-threaded code and multiple node.js process with local database and more.
• Ask any question in comments or find me on twitter.