# Getting Started With Compose for Web
In this tutorial, we will create a simple web UI application using the Compose UI framework.
## Prerequisites
You need to have the following software installed before you begin:
* JDK 11 or later
* IntelliJ IDEA Community Edition or Ultimate Edition 2020.2 or later (you can use other editors, but for this tutorial we assume you are using IntelliJ IDEA)
## Creating a new project
You can create the project by [downloading the template here ](https://github.com/JetBrains/compose-jb/tree/master/templates/web-template ) or using the Project Wizard in IDEA:
< img alt = "Create new project" src = "wizard.png" height = "500" / >
If you want to create the project manually, perform the following steps:
#### 1. Create a Kotlin Multiplatform project:
- Select `Gradle` on the left menu
- Tick `Kotlin DSL build script`
- Tick `Kotlin/Multiplatform`
< img alt = "" src = "create-mpp.png" height = "500" / >
#### 2. Update `settings.gradle.kts`:
``` kotlin
pluginManagement {
repositories {
gradlePluginPortal()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}
}
```
#### 3. Update `build.gradle.kts`:
``` kotlin
// Add compose gradle plugin
plugins {
kotlin("multiplatform") version "1.7.20"
Release 1.2.2 (#2561)
* Compose 1.2.1-rc01
* Fix Web build for Kotlin 1.7.20
* Use 1.3.2.1-rc02 in Gradle plugin
* Fix Gradle Plugin tests
* Fix Gradle Plugin tests
* Compose 1.2.1-rc03
* Update CHANGELOG.md
* Update CHANGELOG.md
* Compose Compiler 1.3.2.1
* Compose 1.2.1
* Update VERSIONING.md
* Update gradle.properties
* Fix custom JDK tests on Linux
* Remove JVM target version override (#2515)
Previously, we were setting kotlin.jvmTarget version
to 1.8 if it was null or < 1.8.
As an unintended consequence we were also overriding
a version set by the jvmToolchain property.
So while users expected the jvmToolchain property
to set both jdk home & jdk target, we were quietly
overriding jdk target.
At the same time, Kotlin 1.7 sets the minimum
target version to 1.8 anyway, so our override
does not make sense with Kotlin 1.7+.
This commit removes overriding altogether.
Fixes #2511
* Update CHANGELOG.md
* Update CHANGELOG.md
* Update CHANGELOG.md
* Update Compose
* Update default ProGuard rules with changes from main branch
* Test Gradle plugin on relevant PRs (#2509)
* Update Gradle used in tooling subprojects
* Update Kotlin in Compose Gradle plugin
* Decrease verbosity of Gradle plugin tests
* Disable mac sign test
* Add workflow to test Gradle plugin
* Fix custom jdk tests on Linux
* Make Compose Gradle plugin build compatible with Configuration cache
* Print tests summary
* Remove unused code
* Refactor tests configuration
* Turn off parallel execution
* Try adding windows runner
* Turn off fail fast
* Fix Windows test issues
#2368
* Adjust default proguard rules
The following rule is needed to fix tests on Windows:
```
-dontwarn org.graalvm.compiler.core.aarch64.AArch64NodeMatchRules_MatchStatementSet*
```
Other rules are just to make builds less noisy.
Kotlin's `*.internal` packages often contain
bytecode, which triggers ProGuard's notes.
However, these notes are not actionable for
most users, so we can ignore notes by default.
#2393
# Conflicts:
# gradle-plugins/gradle/wrapper/gradle-wrapper.properties
* Improve DSL for setting a custom Compose Plugin (#2527)
* Improve DSL for setting a custom Compose Plugin
Fixes https://github.com/JetBrains/compose-jb/issues/2459
Readme: https://github.com/JetBrains/compose-jb/pull/2526
1. Add `dependencies: Dependencies` extension that is accessible in `compose { }` block
2. Add `Dependencies.compiler` property that can return versions of Compose compiler used by the plugin:
```
compose {
kotlinCompilerPlugin.set(dependencies.compiler.forKotlin("1.7.20"))
//kotlinCompilerPlugin.set(dependencies.compiler.auto) // determined by applied version of Kotlin. It is a default.
}
```
3. Add ability to set arguments for Compose Compiler. Now we can write:
```
compose {
kotlinCompilerPlugin.set(dependencies.compiler.forKotlin("1.7.20"))
kotlinCompilerPluginArgs.add("suppressKotlinVersionCompatibilityCheck=1.7.21")
}
```
4. Remove checks for different targets
We had a separate check for JS, when we released 1.2.0. It doesn't support Kotlin 1.7.20 at that moment.
It is hard to refactor this feature in the new code, so I removed it. It is not needed now and it had an ugly code. When we will need it again, we'll write it again.
5. Remove the `compose.tests.androidx.compiler.version` property from gradle.properties and remove `defaultAndroidxCompilerEnvironment`
Because they are used only in one test, and it seems there is no reason to use it in another place in the future
* Discussions
* Update ComposeCompilerCompatability.kt (#2557)
* Update CHANGELOG.md
* 1.2.2-rc01
* Update Compose
* Update CHANGELOG.md
* Compose 1.2.2
* Remove shared.podspec
* Remove usages of deprecated Intellij APIs
Co-authored-by: Alexey Tsvetkov <alexey.tsvetkov@jetbrains.com>
Co-authored-by: Alexey Tsvetkov <654232+AlexeyTsvetkov@users.noreply.github.com>
2 years ago
id("org.jetbrains.compose") version "1.2.2"
}
// Add maven repositories
repositories {
mavenCentral()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
google()
}
// Enable JS(IR) target and add dependencies
kotlin {
js(IR) {
browser()
binaries.executable()
}
sourceSets {
val jsMain by getting {
dependencies {
implementation(compose.web.core)
implementation(compose.runtime)
}
}
}
}
```
#### 5. Add the following directories to the project:
- src/jsMain/kotlin
- src/jsMain/resources
#### 6. Add the `index.html` file to the `resources`:
```html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Sample< / title >
< / head >
< body >
< div id = "root" > < / div >
< script src = "REPLACE_WITH_YOUR_MODULE_NAME.js" > < / script >
< / body >
< / html >
```
#### 7. Add the `Main.kt` file to the `kotlin`:
```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposable
fun main() {
var count: Int by mutableStateOf(0)
renderComposable(rootElementId = "root") {
Div({ style { padding(25.px) } }) {
Button(attrs = {
onClick { count -= 1 }
}) {
Text("-")
}
Span({ style { padding(15.px) } }) {
Text("$count")
}
Button(attrs = {
onClick { count += 1 }
}) {
Text("+")
}
}
}
}
```
## Running the project
Use the command line to run:
```shell
./gradlew jsBrowserRun
```
Instead of manually compiling and executing a Kotlin/JS project every time you want to see the changes you made, you can use the continuous compilation mode:
```shell
./gradlew jsBrowserRun --continuous
```
Or run it from the IDE:
< img alt = "" src = "run_project.png" height = "500" / >
The browser will open `localhost:8080` :
< img alt = "" src = "run_result.png" height = "500" / >
## Common issues when running the project
#### [webpack-cli] Unable to load '@webpack-cli/serve' command
https://youtrack.jetbrains.com/issue/KT-49124
```
[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
...
```
There is a temporary workaround:
```
In build.gradle.kts:
// a temporary workaround for a bug in jsRun invocation - see https://youtrack.jetbrains.com/issue/KT-48273
afterEvaluate {
rootProject.extensions.configure< org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension > {
versions.webpackDevServer.version = "4.0.0"
versions.webpackCli.version = "4.9.0"
}
}
```
