This post is older than 2 years and might not be relevant anymore
More Info: Consider searching for newer posts

Making NRF Connect Desktop app as standalone Electron App

Hello fellow developers,

I'm developing the Bluetooth Low Energy (BLE) app with my own functions. Now I would like to pack it as a standalone Electron App, which can be started without running the nRF Connect Launcher app first. I have created the boilerplate for Electron to recognize the BLE App. I have created a index.html page to host the dist/bundle.js, a electron.js file to host Electron, then run electron using the terminal script "

concurrently \"SET BROWSER=none && npm run build\" \"electron .\"

". 

This is to build the app using nrfconnect script, then run with electron.

After firing up electron, I encountered this error:

[1] App threw an error during load
[1] ReferenceError: window is not defined
[1]     at Object.<anonymous> (E:\MovX\ble-modified\dist\bundle.js:1:856)
[1]     at Module._compile (internal/modules/cjs/loader.js:1145:30)
[1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1166:10)
[1]     at Module.load (internal/modules/cjs/loader.js:981:32)
[1]     at Module._load (internal/modules/cjs/loader.js:881:14)
[1]     at Function.Module._load (electron/js2c/asar.js:769:28)
[1]     at loadApplicationPackage (E:\MovX\ble-modified\node_modules\electron\dist\resources\default_app.asar\main.js:109:16)
[1]     at Object.<anonymous> (E:\MovX\ble-modified\node_modules\electron\dist\resources\default_app.asar\main.js:155:9)
[1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1166:10)

The error points to bundle.js file, which makes me wonder if this has to do with how the side apps are run. I'm thinking maybe there must be nRF Connect Launcher backend running first, and then to host the side app (the BLE App). If that's the case, is there a way to bundle the connect app into the side app so that the side app can run as standalone?

Thank you very much.

  • Here is my code for the html and electron.js

    index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='UTF-8'/>
        <!-- <link rel='stylesheet' type='text/scss' href='resources/css/styles.scss'> -->
    </head>
    <body>
    <div id='webapp'></div>
    <script src="dist/bundle.js"></script>
    </body>
    </html>
    

    electron.js

    const electron = require('electron');
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;
    
    const path = require('path');
    const url = require('url');
    const isDev = require('electron-is-dev');
    
    let mainWindow;
    
    function createWindow() {
      mainWindow = new BrowserWindow({width: 900, height: 680});
    //   mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, 'index.html')}`);
      mainWindow.loadFile(`file://${path.join(__dirname, 'index.html')}`);
      mainWindow.on('closed', () => mainWindow = null);
    }
    
    app.on('ready', createWindow);
    
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });
    
    app.on('activate', () => {
      if (mainWindow === null) {
        createWindow();
      }
    });

  • Hi ThienVu,

    I am no electron expert but i have a couple of questions before i can help you properly, so first to clarify does your electron BLE app run/work successfully when the nrf connect for desktop (the launcher) app is running first?

    Have you seen this: https://github.com/NordicSemiconductor/pc-nrfconnect-ble and this https://github.com/NordicSemiconductor/pc-nrfconnect-launcher 

    Regards,
    Jonathan

  • Hi Jonathan

    Thanks for replying. 

    Yes. I can confirm that my custom BLE app runs perfectly when launched from the nrf connect for desktop (launcher) app, both the launcher installed from binary and the one built from github source.

    Edit:
    I have figured out what to do. I am going to default the launcher app to run the BLE app that I am bundling with the launcher. However, while I was able to launch the BLE app bundled in the custom nrf connect launcher app during development, after packing the launcher app for release by running "npm run release" in the terminal, I cannot launch the BLE app anymore.

    What I did was to copy the packaged BLE App (tgz form) to the launcher app folder, get the path, and launch the app from that path, and was successfully done during development.

  • Hi ThienVu,

    I am a bit uncertain what you mean, could you clarify?

    ThienVu said:
    I have figured out what to do.
    ThienVu said:
    and was successfully done during development.

    Do these two statements mean you found a solution to the problem? 

    Or

    ThienVu said:
    I cannot launch the BLE app anymore

    In this you reference that it will not work when packing the launcher app in and running npm run release. Was this the intended way you planed on providing the full application or something you tried to see if it worked.


    We at Nordic try to help but some cases are a bit to specific for us to be able to provide good support.
    If you are struggling with expanding or implementing features to the nrf connect for desktop apps we can be of more assistance then when building a custom stand alone app. But perhaps other in the community are able to help out.

    Regards,
    Jonathan

Related