How to take output for Desktop and Web in Compose Multiplatform?

Question

I am currently working on a Compose Multiplatform project. As a mobile app developer, I am able to build APK file for Android and IPA file for iOS.

Now, I want to generate output for desktop applications (DMG for macOS and EXE for Windows) and web applications.

What I tried?

I created the simple hello world project from official KMP Wizard

https://kmp.jetbrains.com/#newProject

I used Fleet IDE to run the application, my project running on all the platforms. No problem in the code.

I checked the official website but couldn't find detailed instructions on how to create these output files.

Related: Creating app bundles using Compose Multiplatform for Android and Desktop — Mahozad
– Mahozad, Commented Jun 11 at 12:51

Ranjithkumar · Accepted Answer · 2025-06-19 09:09:38Z

7

I found an answer for Desktop applications from Phil Dukhov suggestion,

https://github.com/JetBrains/compose-multiplatform/blob/master/tutorials/Native_distributions_and_local_execution/README.md#basic-usage

Desktop Application Output

Step 1: Add Jetbrains compose plugin

import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat

plugins {
    kotlin("jvm")
    id("org.jetbrains.compose") // this line
}

Step 2: Configure desktop distribution formats

compose.desktop {
    application {
        mainClass = "MainKt"

        nativeDistributions {
            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb,TargetFormat.Exe)
            packageName = "com.twt.ajaja"
            packageVersion = "1.0.0"
        }
    }
}

Step 3: Open the terminal and put your project path

cd /path/to/your/project

Step 4: Execute build generation (I am using mac, so I can take only mac build)

./gradlew packageDmg

Note: As of June 12, 2024, cross-compilation is not supported. This means you can only create the .dmg package on macOS. To create .msi, .deb, or .exe packages, you must run the corresponding tasks on Windows or Linux systems respectively.

Step 5: After a build, output binaries can be found in ${project.buildDir}/compose/binaries.

Example:

YourComposeProject/composeApp/build/compose/binaries/main/dmg/your_app.dmg

Web Application Output

Step 1: Configure the webpack config in your gradle file. If you create the project through KMP Wizard, you can skip this step

@OptIn(ExperimentalWasmDsl::class)
wasmJs {
    moduleName = "composeApp"
    browser {
        commonWebpackConfig {
            outputFileName = "composeApp.js"
            devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
                static = (static ?: mutableListOf()).apply {
                    // Serve sources to debug inside browser
                    add(project.projectDir.path)
                }
            }
        }
    }
    binaries.executable()
}

Step 2: Open the terminal at your project path

./gradlew wasmJsBrowserDistribution

Step 3: You can find the wasm output in following path

~YourProjectPath/composeApp/build/dist/wasmJs/productionExecutable

edited Jun 19 at 9:09

answered Jun 12, 2024 at 12:15

Ranjithkumar

18.6k16 gold badges134 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CodingDevil Over a year ago

I have exported it using the command you mentioned , i got html js files, how to run it without gradle command, i mean what if i want to host it like typical html css js web app? pls help @RanjithKumar

Ranjithkumar Over a year ago

@CodingDevil I am not familiar with web app development. Pls ask a new question, so someone who expert on this will answer you.

CodingDevil Over a year ago

hey, i got the solution : official docs: kotlinlang.org/docs/… youtube video: youtu.be/4IQ726Y0Jfc @Ranjithkumar

Khubaib Khan · Accepted Answer · 2024-06-13 10:58:07Z

For Desktop, we need to create the Native Distributions & for the Web We need to create the Production Webpack.

For Desktop, you can need to write ./gradlew runDistributable to create the distrbutables those will run directly without any installation on Mac, Windows & Linux. But remember Onething, If you want to create .dmg then you need to run above command on the Macbook or iMac. If you want to create Native Distribution .msi for Windows then you need to run above command on Windows & same of linux too.

If you want to add the custom icons then you need to add this inside your build.gradle.kts

compose.desktop {
application {
    nativeDistributions {
        macOS {
            iconFile.set(project.file("icon.icns"))
        }
        windows {
            iconFile.set(project.file("icon.ico"))
        }
        linux {
            iconFile.set(project.file("icon.png"))
        }
    }
}

}

Collectives™ on Stack Overflow

How to take output for Desktop and Web in Compose Multiplatform?

2 Answers 2

Desktop Application Output

Web Application Output

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Desktop Application Output

Web Application Output

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related