Build iModel.JS Windows Apps with electron

In this lesson , you will learn how to build iModel native desktop app with iModel.JS and Electron.JS. You might be curious how easy it is to start building high quality desktop apps for any platform, or even port your existing iModel App to native desktop platform.

This lesson covers the following topics :
1. Configure electron with iModel.JS Simple viewer App.
2. Build a simple viewer app for desktop
3. Package and make an app for install on Windows 10 and Linux.

Initial setup

If you are new to iModel.Js then follow this article http://www.rajgadade.com/start-building-with-imodel-js/ which will help you to development setup for cloned iModel.JS Simple viewer app.

• Create an iModel.JS App

Clone an iModel.JS Simple viewer app from  https://github.com/imodeljs/simple-viewer-app

Git clone https://github.com/imodeljs/simple-viewer-app.git  

• Register your app

Follow the developer app registration process https://imodeljs.github.io/iModelJs-docs-output/getting-started/

• Create a sample iModel & project

Once you are registered your application, login into your iModel.Js developer dashboard and create new sample iModel and a project.https://imodeljs.github.io/iModelJs-docs-output/getting-started/registration-dashboard/?tab=1

• Update configuration

# src\common\config.json

{
  "imjs_test_project": "imodeldemo",
  "imjs_test_imodel": "imodeldemo"
}

• Install package dependencies

npm install

This command will install required packages for frontend and  backend iModel.JS app. The cloned simple viewer app is well configured with all required dependencies and this will install electron as well. The package.json is also well configured with required commands to build and run frontend and backend web server.

• Build your app

npm run build

• Run your app

npm run start:servers

now your iModel.Js react web app is up and running on local machine.

Configure Electron

The next step is to configure the Electron. There are all sorts of possibilities for customization and we’re just scratching the surface

• Update package.json file to set “main” entry point for react electron app and also update the “start” command to run the app as Windows native app

• Creates the “main” electron BrowserWindow with the application’s frontend

# src\backend\electron\main.ts
 mainWindow = new BrowserWindow({
      webPreferences: {
        nodeIntegration: true,
        webSecurity: false,
      },
      autoHideMenuBar: true,
      icon: iconPath,
    });
    mainWindow.on("closed", () => mainWindow = undefined);

• configure chrome devtool to debug window application.

 # src\backend\electron\main.ts 
mainWindow.webContents.openDevTools();

# package.json // Add main entry point for electron app.

{
  "name": "simple-viewer-app",
  "description": "Simple Viewer App",
  "main":"lib/backend/main.js",
   // … omitted.
 }

• Configure custom command to run electron app

# package.json // append electron command to "start"

"scripts": {
    "build": "buildIModelJsModule",
    "start:webserver": "node ./node_modules/@bentley/imodeljs- webserver/lib/webserver.js --port=3000 --resources=./lib/webresources/",
    "start:backend": "node lib/backend/main.js",
    "start:servers": "npm run start:makeconfig && env-cmd ./lib/webresources/config.json run-p \"start:webserver\" \"start:backend\" \"electron\"",
    "start:makeconfig": "strip-json-comments --no-whitespace ./src/common/config.json > ./lib/webresources/config.json",
    "electron": "electron lib/backend/main.js",
   // … omitted.

Build your app for windows

(dev) build your app to run backend, frontend and windows app on your computer.

npm run build

Run your application

You can run your iModel app as a native desktop window app with the following command.

npm run start:servers 

It will run backend, frontend app and it will automatically bring up window on your computer with a simple viewer app.