Build iModel.JS Windows Apps with electron
In this

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.