How to package a desktop application using Electron with itwin.js.

[jh9636]

I encountered an issue when packaging the project with Electron. The packaged application behaves differently from the development environment, and it fails to load the page.

The example code for the desktop end of the itwin documentation:
https://github.com/iTwin/viewer/tree/master/packages/modules/desktop-viewer-react

My own package.json, I use electron-builder to package the application:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "main": "./lib/backend/main.js",
  "dependencies": {
    "@bentley/icons-generic-webfont": "^1.0.34",
    "@bentley/react-scripts": "^5.0.7",
    "@itwin/appui-abstract": "^4.4.8",
    "@itwin/appui-layout-react": "^4.8.3",
    "@itwin/appui-react": "^4.11.0",
    "@itwin/build-tools": "^4.4.8",
    "@itwin/components-react": "^4.11.0",
    "@itwin/core-backend": "^4.4.8",
    "@itwin/core-bentley": "^4.4.8",
    "@itwin/core-common": "^4.4.8",
    "@itwin/core-electron": "^4.4.8",
    "@itwin/core-frontend": "^4.4.8",
    "@itwin/core-geometry": "^4.4.8",
    "@itwin/core-i18n": "^4.4.8",
    "@itwin/core-markup": "^4.4.8",
    "@itwin/core-orbitgt": "^4.4.8",
    "@itwin/core-quantity": "^4.4.8",
    "@itwin/core-react": "^4.11.0",
    "@itwin/core-telemetry": "^4.4.8",
    "@itwin/desktop-viewer-react": "^4.2.5",
    "@itwin/ecschema-metadata": "^4.4.8",
    "@itwin/electron-authorization": "^0.14.1",
    "@itwin/express-server": "^4.4.8",
    "@itwin/imodel-browser-react": "^1.2.2",
    "@itwin/imodel-components-react": "^4.11.0",
    "@itwin/imodels-access-backend": "^4.1.6",
    "@itwin/imodels-access-frontend": "^4.1.6",
    "@itwin/itwinui-css": "^1.12.10",
    "@itwin/itwinui-icons-react": "^2.8.0",
    "@itwin/itwinui-illustrations-react": "^2.1.0",
    "@itwin/itwinui-layouts-css": "^0.2.0",
    "@itwin/itwinui-layouts-react": "^0.2.0",
    "@itwin/itwinui-react": "^2.12.26",
    "@itwin/itwinui-variables": "^2.1.2",
    "@itwin/measure-tools-react": "^0.13.0",
    "@itwin/presentation-backend": "^4.4.8",
    "@itwin/presentation-common": "^4.4.8",
    "@itwin/presentation-components": "^4.4.0",
    "@itwin/presentation-frontend": "^4.4.8",
    "@itwin/property-grid-react": "^1.6.0",
    "@itwin/tree-widget-react": "^1.2.2",
    "@itwin/webgl-compatibility": "^4.4.8",
    "@types/electron-devtools-installer": "^2.2.5",
    "@types/minimist": "^1.2.5",
    "@types/node": "^18.19.26",
    "@types/react": "^18.2.70",
    "@types/react-dom": "^18.2.22",
    "@types/react-redux": "^7.1.33",
    "cross-env": "^5.2.1",
    "dotenv-flow": "^3.3.0",
    "electron-devtools-installer": "^2.2.4",
    "minimist": "^1.2.8",
    "npm-run-all": "^4.1.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^7.2.9",
    "react-router": "^6.22.3",
    "react-router-dom": "^6.22.3",
    "redux": "^4.2.1",
    "typescript": "~5.0.2"
  },
  "scripts": {
    "start": "npm run build:backend && run-p \"start:frontend\" \"electron:debug\"",
    "build": "npm run build:backend && npm run build:frontend",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:backend": "tsc -p tsconfig.backend.json",
    "build:frontend": "react-scripts build",
    "electron": "electron lib/backend/main.js",
    "electron:debug": "cross-env NODE_ENV=development electron lib/backend/main.js",
    "start:frontend": "react-scripts start",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    "last 1 electron version"
  ],
  "devDependencies": {
    "electron": "^29.1.5",
    "electron-builder": "^24.13.3"
  },
  "build": {
    "productName": "hopePack",
    "appId": "com.ele.eletest",
    "copyright": "cd©20211209",
    "extends": null,
    "directories": {
      "buildResources": "./",
      "output": "pack"
    },
    "files": [
      "src/**/*",
      "build/**/*",
      "lib/**/*",
      "lib/common/**/*",
      "node_modules/**/*",
      "package.json",
      "./lib/backend/main.js"
    ]
  }
}

The status of "npm start" in the development environment.

The status of the program after I have packaged it and opened it.

I noticed that in the source code under the development environment, the main process in main.js determines the developmentServer based on the current mode. When I set it to false in the development environment, the same issue occurs after packaging.

I have reviewed the official documentation of itwin and the encapsulated source code, but I couldn't find the root cause of the issue.
If you could help me identify where the issue lies or provide some documentation links related to using itwin with Electron packaging, I would greatly appreciate it. Thank you very much for your review, and I look forward to your response.