Skip to content

Commit

Permalink
update: update the Get started with Kotlin/Wasm tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
koshachy committed Oct 27, 2023
1 parent 1a8e4b0 commit 4ce07f0
Show file tree
Hide file tree
Showing 12 changed files with 52 additions and 54 deletions.
Binary file added docs/images/wasm/wasm-app-run.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/images/wasm/wasm-browser-app.png
Binary file not shown.
Binary file removed docs/images/wasm/wasm-browser-source-app.png
Binary file not shown.
Binary file removed docs/images/wasm/wasm-browser-updated-app.png
Binary file not shown.
Binary file removed docs/images/wasm/wasm-build-app.png
Binary file not shown.
Binary file added docs/images/wasm/wasm-button-click.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/images/wasm/wasm-enable-in-idea.png
Binary file not shown.
Binary file removed docs/images/wasm/wasm-enable-wizard.png
Binary file not shown.
Binary file added docs/images/wasm/wasm-gradle-task-window.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/images/wasm/wasm-new-project-intellij.png
Binary file not shown.
Binary file added docs/images/wasm/wasm-updated-app-run.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
106 changes: 52 additions & 54 deletions docs/topics/wasm/wasm-get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,66 +4,42 @@
>
{type="warning"}

This tutorial demonstrates how to use IntelliJ IDEA for creating a Kotlin/Wasm application.
This tutorial demonstrates how to work with a Kotlin/Wasm application in IntelliJ IDEA.

To get started, install the latest version of [IntelliJ IDEA](https://www.jetbrains.com/idea/download/index.html). The tutorial is applicable to both IntelliJ IDEA Community Edition and the Ultimate Edition.
## Before you start

## Enable an experimental Kotlin/Wasm Wizard in IntelliJ IDEA
1. Download and install the latest version of [IntelliJ IDEA](https://www.jetbrains.com/idea/).
2. Clone the [Kotlin/Wasm examples](https://github.com/Kotlin/kotlin-wasm-examples/tree/main) repository
by selecting **File** | **New** | **Project from Version Control** in IntelliJ IDEA.

1. Press double **Shift** to open a search, enter **Registry**.
You can also clone it from the command line:

![Open registry in IntelliJ IDEA](wasm-enable-in-idea.png){width=700}

2. Select **Registry** from the list. Registry window opens.
3. Find the `kotlin.wasm.wizard` registry key in the list, and enable it.

![Enable Kotlin/Wasm Wizard](wasm-enable-wizard.png){width=700}

4. Restart IntelliJ IDEA.

## Create a new Kotlin/Wasm project

1. In IntelliJ IDEA, select **File** | **New** | **Project**.
2. In the panel on the left, select **Kotlin Multiplatform**.
3. Enter a project name, select **Browser Application with Kotlin/Wasm** as the project template, and click **Next**.

![Create a Kotlin/Wasm application](wasm-new-project-intellij.png){width=700}
```bash
git clone [email protected]:Kotlin/kotlin-wasm-examples.git
```

By default, your project will use Gradle with Kotlin DSL as the build system.
## Run the application

4. Accept the default configuration on the next screen and click **Finish**. Your project will open.
1. Open the **Gradle** tool window: **View** | **Tool Windows** | **Gradle**.
2. In the **kotlin-wasm-browser-example** | **Tasks** | **kotlin browser**, select and run the **wasmJsBrowserRun** task.

By default, the wizard creates the necessary `Simple.kt` file.
![Run the Gradle task](wasm-gradle-task-window.png){width=650}

5. Open the `build.gradle.kts` file and ensure that the Kotlin Multiplatform plugin version is set to `1.8.20`:
Alternatively, you can run the following command in Terminal from the project directory:

```kotlin
plugins {
kotlin("multiplatform") version "1.8.20"
}
```bash
./gradlew wasmJsBrowserRun -t
```

## Build and run the application

1. Click **Build Project** next to the run configuration at the top of the screen:

![Build the application](wasm-build-app.png){width=600}

2. Run the application by clicking **Run** next to the run configuration at the top of the screen.

3. Once the application starts, open the following URL in your browser:

```text
http://localhost:8080
```bash
http://localhost:8080/
```

You should see the "JS Client" tab in your browser:

![Empty Kotlin/Wasm application in browser](wasm-browser-app.png){width=500}

If you open a page source, you'll find the name of the JavaScript bundle:
You should see "Hello, World!" text:

![Source of Kotlin/Wasm application in browser](wasm-browser-source-app.png){width=500}
![Run the Kotlin/Wasm application](wasm-app-run.png){width=650}

### Troubleshooting

Expand Down Expand Up @@ -110,28 +86,50 @@ Run the application with the `--js-flags=--experimental-wasm-gc` command line ar

```kotlin
import kotlinx.browser.document
import kotlinx.browser.window
import kotlinx.dom.appendElement
import kotlinx.dom.appendText
fun main() {
println("Hello, ${greet()}")
document.body!!.appendText("Hello, you're using Kotlin/Wasm!")
document.body?.appendText("Hello, ${greet()}!")
document.body?.appendElement("button") {
this.textContent = "Click me, I'm a button!"
addEventListener("click") {
window.setTimeout({
window.alert("👋")
null
}, 1000)
}
}
}
fun greet() = "world"
```

2. Run the application by clicking **Run** next to the run configuration at the top of the screen.
This code adds a button to the document and an action.

3. Once the application starts, open the following URL in your browser:
2. Run the application again. Once the application starts, open the following URL in your browser:

```text
http://localhost:8080
```
```text
http://localhost:8080
```

You should see the "Hello, World" text within the button:

You'll see the text "Hello, you're using Kotlin/Wasm!":
![Run Kotlin/Wasm application in browser](wasm-updated-app-run.png){width=650}

![Kotlin/Wasm application in browser](wasm-browser-updated-app.png){width=500}
3. Click the button to see the alert message:

![Alert action](wasm-button-click.png){width=650}

Now you can work with Kotlin/Wasm code that runs in the browser!

## What's next?

[Explore the Kotlin/Wasm interoperability with JavaScript](wasm-js-interop.md)
Try out other Kotlin/Wasm examples from the `kotlin-wasm-examples` repository:

* [Compose image viewer](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-imageviewer)
* [Jetsnack application](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-jetsnack)
* [Node.js example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/nodejs-example)
* [WASI example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/wasi-example)

0 comments on commit 4ce07f0

Please sign in to comment.