How to Use NPM Package

In this tutorial, we will show you how to create Cordova’s electron app with Monaca template and use NPM package to get the machine uuid.

Step 1: Creating Electron Blank App

First of all, let’s create a blank template for electron app. From the Monaca Dashboard, you can 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 Electron App

Working with a Cordova project, it is recommended to create an Electron settings file within the project’s root directory, and 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's Docs - BrowserWindow Options.

  1. Create ElectronSettingsFilePath Preference tag in Electron Platform tag

        <platform name="electron">
            ...
            <preference name="ElectronSettingsFilePath" value="res/electron/settings.json"/>
        </platform>
        
  2. Create the setting 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. Therefore, let’s run npm install node-machine-id in the terminal.

Terminal feature can be used from pay 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 the package is installed, we just need to require or import the module and use it right away. In the following code snippet, the getDeviceUUIDForElectronPlatform function get the machine UUID for electron platform by using the node-machine-id package that we just installed in the previous step. Otherwise we will just use device.uuid property from the cordova-plugin-device cordova plugin to get 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();

See Also: