[feat] Background image needed for DMG distribution file for OSX

[alfreddagenais]

Describe the problem

I search into the documentation for the background image for a .DMG file and I not found it. I need this image when I build for MacOs.

Have a solution now or it will came soon?

Describe the solution you'd like

I just saw examples like this :

Alternatives considered

I saw the file bundle_dmg.sh from the build folder src-tauri/target/release/bundle/dmg/bundle_dmg.sh and into this file i have an option for the background

But I have no idea where I can find this file.

Additional context

No response

[Blatman]

Also looking at this part of the bundling process. The basic DMG bundling works very well but I'm at a loss at how to customise certain parts. I would at least like to use a custom background and a volume icon for the DMG itself. At the moment the first icns file found in the icons folder appears to be used (icon.icns) which is the app icon itself and unable to find a way to link a background image. The bundle_dmg.sh can't be edited as all the files appear to be regenerated on each build (both the Vol_Name and Vol_Icon in the generated .sh file just point to $2). Unable to find where the .sh script is generated from. Unable to find any sample apps with customised DMG's. Hate to think that this rudimentary customisation may involve a GitHub fork of Tauri.

[ahkohd]

I was able to make this work for my Tauri app DMG. I had to do it manually using create-dmg.

Build your Tauri app. Get the path to the YourApp.app.

Install create-dmg:

$ brew install create-dmg

Build the DMG from the YourApp.app, pass the installer background option:

$ create-dmg
    --volname "YourAppName" \
    --volicon "path/to/your/icon.icns" \
    --background "path/to/your/background/image.png" \
    --window-pos 200 120 \
    --window-size 835 600 \
    --icon-size 128 \
    --icon "YourApp.app" 230 295 \
    --hide-extension "YouApp.app" \
    --app-drop-link 593 295 \
    "path/where/your/dmg/will/be/generated.dmg" \
     "path/to/YourApp.app"

You can find the reference on how to use create-dmg here.

An example of how I used the create-dmg for my app:

$ create-dmg \
    --volname "Zap" \
    --volicon "./src-tauri/icons/icon.icns" \
    --background "./src/assets/installer-background.png" \
    --window-pos 200 120 \
    --window-size 835 600 \
    --icon-size 128 \
    --icon "Zap.app" 230 295 \
    --hide-extension "Zap.app" \
    --app-drop-link 593 295 \
    "./src-tauri/target/aarch64-apple-darwin/release/bundle/macos/Zap.dmg" \
    "./src-tauri/target/aarch64-apple-darwin/release/bundle/macos/Zap.app"

Result:

[alfreddagenais]

@ahkohd thank you for the hint! I will try this tool to see it!

[ahkohd]

@ahkohd thank you for the hint! I will try this tool to see it!

You're welcome. Keep in mind that you will have to tweak the icon position and design your installer background to match the configuration you provide to the create-dmg tool.

I can share my app's installer background design on Figma so that you can have a head start.

[muryoh]

fyi, if you only need to set the background, you can get away with setting some env variables because of the way the create-dmg script was written: https://github.com/create-dmg/create-dmg/blob/412e99352bacef0f05f9abe6cc4348a627b7ac56/create-dmg#L139

Setting BACKGROUND_FILE, BACKGROUND_FILE_NAME and BACKGROUND_CLAUSE in the context of the tauri build command will result in your background file being used