Hello, Vaadin 👋

A simple "Hello, World" application in Vaadin 23 and Kotlin.

This project can be used as a starting point to create your own Vaadin application. It has the necessary dependencies and files to get you started. Just clone this repo and start experimenting! Import it to the IDE of your choice as a Gradle project.

MainView.kt:

verticalLayout(classNames = "centered-content") {
    textField("Your name")
    button("Say hello") {
        setPrimary(); addClickShortcut(Key.ENTER)
    }
}

Uses Karibu-DSL Kotlin bindings for the Vaadin framework.

Online Demo of this app running on Heroku.

Note: this example project uses Gradle. For Maven-based example project please visit karibu10-helloworld-application-maven.

For Vaadin 14 project please see the v14 branch.

Preparing Environment

Java 8 (or higher) JDK is required.

Vaadin apps also require nodejs and pnpm, but these tools are installed automatically for you when you build the app for the first time via Gradle. Alternatively, you can install nodejs and npm to your OS:

• Windows: node.js Download site - use the .msi 64-bit installer
• Linux: sudo apt install npm

Getting Started

To quickly start the app, just type this into your terminal:

git clone https://github.com/mvysny/karibu10-helloworld-application
cd karibu10-helloworld-application
./gradlew appRun

Gradle will automatically download an embedded servlet container (Jetty) and will run your app in it. Your app will be running on http://localhost:8080.

Since the build system is a Gradle file written in Kotlin, we suggest you use Intellij IDEA to edit the project files. The Community edition is enough to run the server via Gretty's ./gradlew appRun. The Ultimate edition will allow you to run the project in Tomcat - this is the recommended option for a real development.

This is a port of Skeleton Starter Flow to Kotlin+Gradle.

Supported Modes

Runs in Vaadin npm mode, using the Vaadin Gradle Plugin.

Both the development and production modes are supported. To prepare for development mode, just run:

./gradlew clean vaadinPrepareFrontend

To build in production mode, just run:

./gradlew clean build -Pvaadin.productionMode

Vaadin will download nodejs and npm/pnpm automatically for you (handy for CI).

Workflow

To compile the entire project in production mode, run ./gradlew -Pvaadin.productionMode.

To run the application in development mode, run ./gradlew appRun and open http://localhost:8080/.

To produce a deployable production-mode WAR:

• run ./gradlew -Pvaadin.productionMode
• You will find the WAR file in build/libs/*.war
• To revert your environment back to development mode, just run ./gradlew or ./gradlew vaadinPrepareFrontend (omit the -Pvaadin.productionMode) switch.

This will allow you to quickly start the example app and allow you to do some basic modifications.

Development with Intellij IDEA Ultimate

The easiest way (and the recommended way) to develop Karibu-DSL-based web applications is to use Intellij IDEA Ultimate. It includes support for launching your project in any servlet container (Tomcat is recommended) and allows you to debug the code, modify the code and hot-redeploy the code into the running Tomcat instance, without having to restart Tomcat.

1. First, download Tomcat and register it into your Intellij IDEA properly: https://www.jetbrains.com/help/idea/2017.1/defining-application-servers-in-intellij-idea.html
2. Then just open this project in Intellij, simply by selecting File / Open... and click on the build.gradle file. When asked, select "Open as Project".
3. You can then create a launch configuration which will launch this example app in Tomcat with Intellij: just scroll to the end of this tutorial: https://kotlinlang.org/docs/tutorials/httpservlets.html
4. Start your newly created launch configuration in Debug mode. This way, you can modify the code and press Ctrl+F9 to hot-redeploy the code. This only redeploys java code though, to redeploy resources just press Ctrl+F10 and select "Update classes and resources"

Or watch the Debugging Vaadin Apps With Intellij video.

Dissection of project files

Let's look at all files that this project is composed of, and what are the points where you'll add functionality:

GitPod

A preliminary support for editing the project in GitPod is available. Visit the karibu10-helloworld-app on GitPod to start. Please wait a bit to allow GitPod to compile the project and download all files. The app preview will be started automatically.

Couple of tips:

• Modify src/main/kotlin/com/vaadin/flow/demo/helloworld/MainView.kt to toy with the project.
• The Gretty/Gradle code will hot-reload changes in the MainView.kt automatically after a couple of seconds.
• If the hot-reload fails and you see any nasty java IllegalAccessErrors, or if you start getting ERROR dev-webpack errors, just kill Gretty and start it from scratch:
  • Focus the "/workspace/karibu10-helloworld-application" tab at the bottom, where the :appRun task is running
  • Press Ctrl+C to kill Gradle+Gretty
  • Run ./gradlew appRun to recompile and relaunch your project
  • In the "PREVIEW" window, reload the page.
  • See Issue 63 for more details.

Docker

Use the following Dockerfile to both build the app, and to create a final production container:

# Build stage
FROM openjdk:11 AS BUILD
RUN git clone https://github.com/mvysny/karibu10-helloworld-application /app
WORKDIR app
RUN ./gradlew -Pvaadin.productionMode

# Run stage
FROM tomcat:9.0.35-jdk11-openjdk
COPY --from=BUILD /app/build/libs/app.war /usr/local/tomcat/webapps/ROOT.war

To build the docker image:

docker build -t mvy/karibu10:latest .

To run the app:

docker run --rm -ti -p 8080:8080 mvy/karibu10

Now open http://localhost:8080/.

More Resources

• The DSL technique is used to allow you to nest your components in a structured code. This is provided by the Karibu-DSL library; please visit the Karibu-DSL home page for more information.
• The browserless testing is demonstrated in the MainViewTest.kt file. Please read Browserless Web Testing for more information.
• For more complex example which includes multiple pages, please see the Beverage Buddy Karibu-DSL example-v10 app. It is a port of the Vaadin official Java Beverage Buddy App Starter to Kotlin + Karibu DSL.
• For information on how to connect the UI to the database backend please visit Vaadin-on-Kotlin You can find a complete CRUD example at Vaadin-on-Kotlin vok-example-flow-sql2o.