How to Use a NPM Package

This tutorial will show you how to create a Electron app using Cordova with a Monaca template and use a NPM package to get the machine uuid.

The method to get the uuid of a machine using the NPM package is not supported in version 3.0.0 of cordova-electron. Please use the Device plugin.

Step 1: Creating a blank Electron app

First of all, let's create an app with a blank template for an Electron app. From the Monaca dashboard, go to Create New Project → Sample Applications. Then choose Electron Blank from the template list, fill in the Project Name and Description and click Create Project.

Step 2: Enable Node integration in an Electron app

When working with a Cordova project, it is recommended to create an Electron settings file in the project's root directory. Set the relative path in the preference option ElectronSettingsFilePath in the config.xml file. Electron provides many options to manipulate the BrowserWindow object. For a full list of options, please see the Electron docs.

Set the ElectronSettingsFilePath in the preference tag inside the Electron platform tag.

 <platform name="electron">
     ...
     <preference name="ElectronSettingsFilePath" value="res/electron/settings.json"/>
 </platform>

Create a settings file and set nodeIntegration to true

 {
     "browserWindow": {
         ...
         "webPreferences": {
         ...
         "nodeIntegration": true
         }
     }
 }

Step 3: Install NPM packages

Open a new terminal, navigate to your project and install your desired package. In this tutorial, we are going to install node-machine-id to retrieve the machine UUID. To do that, run the following command:

npm install node-machine-id

Terminal feature can be used in a paid plan.

After running successfully, your package.json should have node-machine-id in the dependencies property.

{
    ...
    "dependencies": {
        ...
        "node-machine-id": "^1.1.12"
    }
}

Step 4: Using NPM packages in the project

Once a package is installed, we just need to require or import the module to start using it. In the following code snippet, the getDeviceUUIDForElectronPlatform function gets the machine UUID of an Electron platform by using the node-machine-id package that we just installed in the previous step. Otherwise we will just use the device.uuid property from the cordova-plugin-device Cordova plugin to get the device UUID for ios or android platforms.

The device uuid is not available on the browser platform.

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
        console.log('device ready');
        this.getDeviceUUID();
    },

    getDeviceUUIDForElectronPlatform: function() {
        try {
            const machineIdSync = require('node-machine-id').machineIdSync;
            return machineIdSync({original: true});
        } catch (error) {
            console.error(error);
            return 'Could not get machine id';
        }
    },

    getDeviceUUID: function() {
        const platformId = window.cordova.platformId;
        const deviceInfo = document.getElementById('device-info');
        let uuid = null;
        if (platformId.includes('electron')) {
            // get uuid from npm package for electron platform
            uuid = this.getDeviceUUIDForElectronPlatform();
        } else if (device && device.uuid && ['ios', 'android'].indexOf(platformId) >= 0) {
            // get uuid from cordova-plugin-device
            uuid = device.uuid;
        } else {
            // other platforms such as browser, ...
            uuid = `The ${platformId} platform is not supported.`;
        }
        if (uuid) deviceInfo.innerHTML = `Device UUID: ${uuid}`;
    }
};

app.initialize();