Hello Kunafa
Welcome to Kunafa!
It is easy to get started with Kunafa and start front-end web development with Kotlin. Here’s a summary of the steps to get started:
- Create a Kotlin-js project.
- Add Kunafa dependencies.
- Write your first Hello World Application
Create a Kotlin-js project
There are a lot of options to create a Kotlin-Js project. You can use IntelliJ, Gradle Or Maven to configure the project. Here are some useful links:
- Getting Started with Kotlin and JavaScript with Gradle
- Getting Started with Kotlin and JavaScript with IntelliJ IDEA
- Getting Started with Kotlin and JavaScript with Maven
Here, I am using Gradle. The project name is Kunemo and my build.gradle looks like this:
buildscript {
ext.kotlin_version = '1.2.10'
repositories {
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
group 'com.narbse'
version '1.0-SNAPSHOT'
apply plugin: 'kotlin2js'
repositories {
mavenCentral()
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
}
task assembleWeb(type: Sync) {
configurations.compile.each { File file ->
from(zipTree(file.absolutePath), {
includeEmptyDirs = false
include { fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/") ||
!path.startsWith("META-INF/"))
}
})
}
from compileKotlin2Js.destinationDir
into "${projectDir}/web"
dependsOn classes
}
assemble.dependsOn assembleWeb
compileKotlin2Js {
kotlinOptions.outputFile = "${projectDir}/web/output.js"
kotlinOptions.moduleKind = "plain"
kotlinOptions.sourceMap = true
}
The generated js files will be located at {projectDir}/web. Now, create a index.html at the project root directory containing the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kunemo demo</title>
</head>
<body>
<script type="text/javascript" src="web/kotlin.js"></script>
<script type="text/javascript" src="web/output.js"></script>
</body>
</html>
web/kotlin.js is kotlin standard library js file that will be generated, and web/output.js is your project js file.
Add Kunafa dependencies
To add Kunafa to your project, first you need to add it to your build.gradle file as a dependecy. Under compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" Add the following line.
compile 'com.narbase:kunafa:0.1.4'
Then you need to add Kunafa js file to your index.html. Add the following line to index.html right after kotlin.js but before output.js
<script type="text/javascript" src="web/kunafa.js"></script>
Now your html should look like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kunemo demo</title>
</head>
<body>
<script type="text/javascript" src="web/kotlin.js"></script>
<script type="text/javascript" src="web/kunafa.js"></script>
<script type="text/javascript" src="web/output.js"></script>
</body>
</html>
And that’s it. Now you can start playing with Kunafa.
Write your first Hello World Application
After you sync your gradle project, create a new Kotlin file named App.kt. Then create the main function.
fun main(args: Array<String>) {
}
Kunafa provides a simple DSL to create UI components . The root component should always be page. The page component corresponds to a web page; thus, there should be only one page component. Add a page component to your main function
import com.narbase.kunafa.core.components.page
fun main(args: Array<String>) {
page {
}
}
Next, add a textView with text of Hello world!.
import com.narbase.kunafa.core.components.page
import com.narbase.kunafa.core.components.textView
fun main(args: Array<String>) {
page {
textView {
text = "Hello world!"
}
}
}
And we are done. Build the project, and open index.html in the browser. You should see Hello world! on the page. Next guide will go deeper into Kunafa to create interactive page.
One thought on “Hello Kunafa!”