Kotlin Help

Get started with Kotlin/Wasm in IntelliJ IDEA

This tutorial demonstrates how to run a Compose Multiplatform app with Kotlin/Wasm in IntelliJ IDEA, and generate artifacts to publish as a site on GitHub pages.

Before you start

Create a project using the Kotlin Multiplatform wizard:

  1. Open the Kotlin Multiplatform wizard.

  2. On the New Project tab, change the project name to "WasmDemo" and the project ID to "wasm.project.demo".

  3. Select the Web option.

  4. Click the Download button and unpack the resulting archive.

Kotlin Multiplatform wizard

Open the project in IntelliJ IDEA

  1. Download and install the latest version of IntelliJ IDEA.

  2. On the Welcome screen of IntelliJ IDEA, click Open or select File | Open in the menu bar.

  3. Navigate to the unpacked "WasmDemo" folder and click Open.

Run the application

  1. In IntelliJ IDEA, open the Gradle tool window by selecting View | Tool Windows | Gradle.

  2. In composeApp | Tasks | kotlin browser, select and run the wasmJsBrowserRun task.

    Run the Gradle task

    Alternatively, you can run the following command in the terminal from the composeApp directory:

    ./gradlew wasmJsBrowserRun -t
  3. Once the application starts, open the following URL in your browser:

    http://localhost:8080/

    You can see a "Click me!" button. Click it:

    Click me

    Now you can see the Compose Multiplatform logo:

    Compose app in browser

Generate artifacts

In composeApp | Tasks | kotlin browser, select and run the wasmJsBrowserDistribution task.

Run the Gradle task

Alternatively, you can run the following command in the terminal from the composeApp directory:

./gradlew wasmJsBrowserDistribution

Once the application task completes, you can find the generated artifacts in the composeApp/build/dist/wasmJs/productionExecutable folder:

Artifacts directory

Publish on GitHub pages

  1. Copy all the contents in your productionExecutable directory into the repository where you want to create a site.

  2. Follow GitHub's instructions for creating your site.

  3. In a browser, navigate to your GitHub pages domain.

    Navigate to GitHub pages

    Congratulations! You have published your artifacts on GitHub pages.

What's next?

Join the Kotlin/Wasm community in Kotlin Slack:

Join the Kotlin/Wasm community

Try the Kotlin/Wasm examples from the kotlin-wasm-examples repository:

Last modified: 07 February 2024