CODEWITHSUNDEEP
macoselectron
Brian Knoblauch
Brian Knoblauch

Reputation: 21409

How do I add an Electron DMG background image?

I have an Electron app which is not displaying the background image in the DMG build. My package.json (top level) contains:

"pack": "build --dir",
"dist": "build"

My "build" directory does have a valid "background.png" as well. What else needs to be configured?

Upvotes: 2

Views: 2676

Answers (2)

Sabunkar Tejas Sahailesh
Sabunkar Tejas Sahailesh

Reputation: 4926

Update for PKG build in electron-builder

package.json 

  "build": {
    "appId": "com.audio.application",
    "productName": "Audio-App",
    "artifactName": "${productName}-Setup-${version}.${ext}",
    "copyright": "Copyright © 2020 Audio Corp",
    "mac": {
      "category": "com.audio.application",
      "target": [
        "pkg"
      ],
      "icon": "dist",
      "identity": "identity",
      "darkModeSupport": true,
      "hardenedRuntime": true,
      "gatekeeperAssess": false,
      "artifactName": "${productName}.${ext}"
    },
    "pkg": {
      "scripts": "../build/pkg-scripts",
      "installLocation": "/Applications",
      "background": {
        "file": "build/icon/background.png",
        "alignment": "bottomleft"
      },
      "allowAnywhere": true,
      "allowCurrentUserHome": true,
      "allowRootDirectory": true,
      "license": "build/license.html",
      "welcome": "build/resources/welcome.txt",
      "conclusion": "build/resources/conclusion.txt",
      "isVersionChecked": true,
      "isRelocatable": false,
      "overwriteAction": "upgrade"
    },
    "directories": {
      "buildResources": "release",
      "output": "release"
    }
    },

folder structure of build directory -
(which at root level of project)

enter image description here

background ( data-type : PkgBackgroundOptions )

PkgBackgroundOptions

  • file ( data-type : string )
  • alignment ( data-type : BackgroundAlignment | null )
  • scaling ( data-type : BackgroundScaling | null )

BackgroundAlignment

  • "center" | "left" | "right" | "top" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright"

BackgroundScaling

  • "tofit" | "none" | "proportional"

Reference: pkgOptions

Upvotes: 2

Brian Knoblauch
Brian Knoblauch

Reputation: 21409

The configuration above is correct. There was a bug at one point in electron-builder that caused the background to not appear if a non-default OS X install folder was configured.

Upvotes: 0

Related Questions