2021-10-31

How to use Electron-Forge Typescript + webpack plugin with Electron-Builder

I have started the application with npx create-electron-app my-new-app --template=typescript-webpack. I want to use electron-builder because of the packaging options.

The application runs in development mode correctly thanks to webpack-dev-server. However, in the packaged application I get a white screen (Not receiving static files?) enter image description here

It's worth noting that when I open the packaged application and have the development server running in the background it WORKS. But when I end the terminal I start to see errors in the packaged app.

enter image description here

Here is my package.json

{
  "name": "@cloudapp",
  "productName": "@cloudapp",
  "version": "1.3.6",
  "author": {
    "name": "cloudapp"
  },
  "description": "cloudapp application description",
  "main": ".webpack/main",
  "scripts": {
    "start:app": "npm start",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts,.tsx .",
    "build-installer": "electron-builder",
  },
  "build": {
    "appId": "cloudapp",
    "win": {
      "target": [
        "nsis"
      ],
      "icon": "./src/images/cloudappLogo Icon.ico",
      "requestedExecutionLevel": "requireAdministrator"
    },
    "nsis": {
      "installerIcon": "./src/images/cloudappIcon.ico",
      "uninstallerIcon": "./src/images/cloudappLogo Icon.ico",
      "uninstallDisplayName": "cloudapp",
      "license": "license.txt",
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },
  "keywords": [],
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {
        "name": "cloudapp"
      },
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "platforms": [
            "win32"
          ],
          "config": {
            "name": "CloudReign",
            "setupIcon": "./src/images/cloudappLogo Icon.ico",
            "icon": "C:/Users/Ibrah/OneDrive/Desktop/cloudapp/solutions/app/src/images/cloudappLogo Icon.ico",
            "loadingGif": "./src/images/Spin-1s-200px.gif"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ],
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack/webpack.main.config.js",
            "devContentSecurityPolicy": "default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;",
            "renderer": {
              "config": "./webpack/webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./public/index.html",
                  "js": "./src/index.tsx",
                  "name": "main_window",
                  "preload": {
                    "js": "./electron/bridge.ts"
                  }
                }
              ]
            }
          }
        ]
      ]
    }
  },

enter image description here



from Recent Questions - Stack Overflow https://ift.tt/2XYFaZS
https://ift.tt/3EsqYbh

No comments:

Post a Comment