In this tutorial we'll see how to
The next step is going to prompt us on the Kotlin runtime library. By default the plugin selects the one that is associated to the currently installed version. Unless we want to create a different one, we can click Finish at this point after entering the project name and location.
Once the IDE has finished creating the new project, we should be left with the following layout
At this point we can start writing Kotlin code. For this sample, we're going to write some code that will print a string out to the console window.
We now need an HTML page to load the code, so we'll create a file called
A couple of important points:
kotlin.jsfile should be referenced first as it is used by our application
- The path refers to the default output location that IntelliJ IDEA uses when we compile the application. Below we'll see how to change this.
index.html file in the browser and see the result
in the console debug window.
Debugging the application
This feature is only supported in the Ultimate edition.
In order to debug the application using IntelliJ IDEA, we need to perform two steps:
Install the JetBrains Chrome Extension which allows debugging inside IntelliJ IDEA via Chrome. This is useful for any type of web application developed with IntelliJ IDEA, not just Kotlin.
Configure the Kotlin Compiler to generate source maps, accessible via
Once that's done, we simply right-click on our
index.html file and select the Debug option. This launches Chrome and then stops at the breakpoint defined in our code inside IntelliJ IDEA, from where
we can evaluate expressions, step through code, etc.
It is also possible to debug Kotlin applications using the standard Chrome debugger. Just make sure that you do generate source maps.
Configuring Compiler Options
Kotlin provides a series of compiler options that are accessible in IntelliJ IDEA also. In addition to the one we've just seen for generating source maps, we also have the ability to set
- Output file postfix. Same as above, but in this case the compiler will append the contents of the selected file to the output.
- Copy runtime library files. Indicates in what subfolder we want the
kotlin.jslibrary to be output to. By default it is
libwhich is why in the HTML we are referencing this path.
- Module Kind. Indicates what module standard to follow. This is covered in the Working with Modules tutorial in more depth.