We’ll be using Gradle for building the project. There are other build tools out there but Gradle has the best support for Kotlin.
have already got used to:
src/main/kotlin for Kotlin files and
src/test/kotlin for test files.
build.gradle however will need some extra configuration.
First, in the
buildscript next to the usual
kotlin-gradle-plugin we’ll also need the
Next, instead of applying the
kotlin plugin we’ll use the
kotlin-platform-js along with
kotlin-platform-js is used in multiplatform Kotlin projects but it also works for standalone js code like in our example.
kotlin-dce-js is responsible for dead code elimination which will help us create very small js files.
com.moowork.node is for interfacing with node.js.
With all the plugins in place we’ll need some dependencies:
for testing our code.
The rest of the configuration is to wire together the
We’re done with Gradle but we still need to set up Karma, Webpack and a
package.json is also necessary.
“Why are these necessary?” you might ask. The answer is that if we don’t want to rewrite everything in Kotlin
which is not part of our business domain (like testing tools, package management and such), wel’ll need to
Fortunately the plugins we applied above help out with these.
Note that discussing these tools in depth is out of the scope of this article. There are links below so you can read their documentation.
It will pick up the
karma.conf.js automatically when we test our project:
This config will work from our source and test folders, and will use a Chrome headless browser to run our tests.
We’ll need two files. One for development:
and another one for bundling our project:
The example project uses yarn which is an upgrade over npm, but yarn uses the npm package repository in the background.
In our project we’ll need a very simple setup with only some wiring for development and testing tools:
Are we there yet?
Yep, we pretty much wired together all the tools and plugins. I have to note here that there are many ways to set up Kotlin frontend projects like using the kotlin-frontend-plugin or using the gradle-js-plugin.
The reason why I chose this setup is that this way we can exploit all the functionality these tools give us like:
- hot code replace
- browser sync
- creating bundles with Webpack
- Unit and functional testing including async tests
Let’s write some code
Now that we have set up the project we can finally start writing some code! Let’s create a
Main.kt with a
function in our source folder:
Now, if we build the project with
./gradlew assemble we’ll find an
index.html in the
Let’s open it and check the developer console:
This is all well and good but you won’t get far without the means to write proper unit tests. Luckily Kotlin provides us with a testing library with which we can write Kotlin tests and it will be run with Karma under the hood.
Let’s add something to test:
Then add a test for it:
Now if we run
./gradlew test we’ll be presented with a nice output for our test:
While this covers unit testing we’re still not out of the woods yet because we also need to test our program in its native environment: the browser.
Note that technically the unit tests also work in the browser, but they do not touch functionality provided by it like the
windowobject in the following example.
Fortunately we can use the DOM and we also have the option to write asynchronous tests:
Now we have everything at our disposal to start working on real applications which will run in the browser!
While this article is far from exhaustive we touched a lot of important points and I think that
Kotlin development in the browser is definitely doable and since the
1.2 version of Kotlin frontend development with it is also production ready!
We have learned that deploying Kotlin code to the browser is not hard, and it only comes with a fixed amount of boilerplate which we only have to set up once.
The code for this example lives in this repository. Feel free to download it and fiddle around with it.
So go forth and Kode on!
Keep tuned! The next article in this series will be about multiplatform development, with a full stack example!