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

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.

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

JetBrains uses their GitHub account to save costs because their official website doesn't have enough storage space :)

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