Vaadin Flow Project Setup

This chapter covers:

  • Downloading a Vaadin app starter.

  • Importing a Vaadin Maven project in IntelliJ.

  • Configuring IntelliJ for productive development.

Downloading a Vaadin Application Starter

This tutorial uses a preconfigured starter from start.vaadin.com. The starter application includes:

  • A data model consisting of Contact, Company, and Status JPA entities.

  • Spring Data repositories for persisting and retrieving the entities from an embedded H2 database.

  • A data generator that populates the database with test data.

  • A single, empty view.

  • A Dockerfile.

Download the starter application (zip file) below:

Download starter

Importing a Maven Project Into IntelliJ

  1. Unzip the downloaded archive to a file location of your choice. Avoid unzipping to the download folder, as you could unintentionally delete your project when clearing out old downloads.

  2. In IntelliJ, select Open in the Welcome screen or File menu.

    IntelliJ import screen

  3. Find the extracted folder, and select the pom.xml file.

    open pom file

  4. Select Open as Project. This imports a project based on the POM file.

    open as project

  5. IntelliJ imports the project and downloads all necessary dependencies. This can take several minutes, depending on your internet connection speed.

When the import is complete, your project structure looks like this:

  • Java source files are in the src/main/java folder.

project file hierarchy

Running a Spring Boot Project in IntelliJ

Spring Boot makes it easier to run a Java web application, because it takes care of starting and configuring the server.

To run your application, run the Application class that contains the main() method that starts Spring Boot. IntelliJ automatically detects that you have a class with a main() method and displays it in the run configurations dropdown.

To start your application:

  • Open Application.java and click the play button next to the code line containing the main() method.

  • After you have run the application once from the main() method, it shows up in the run configurations dropdown in the main toolbar. On subsequent runs, you can run the application from there.

run button locations

The first time you start a Vaadin application, it downloads frontend dependencies and builds a JavaScript bundle.

Note

After starting the application for the first time, IntelliJ will index all the added dependencies. This can take anywhere from a few seconds to several minutes, depending on your computer. This happens only once.

You’ll know that your application has started when you see the following output in the console:

  1. Started webpack-dev-server. Time: 4047ms

You can now open localhost:8080 in your browser. You’ll see a content placeholder and image.

Running application view

Enabling Auto Import in IntelliJ

You can configure IntelliJ to automatically resolve imports for Java classes. This makes it easier to copy code from this tutorial into your IDE.

To enable auto import in IntelliJ:

  1. Open the Preferences/Settings window and navigate to Editor > General > Auto Import.

  2. Enable the following two options:

    • Add unambiguous imports on the fly.

    • Optimize imports on the fly.

      automatic import settings

      Vaadin shares many class names (like Button) with Swing, AWT, and JavaFX.

  3. If you don’t use Swing, AWT, or JavaFX in other projects, add the following packages to the Exclude from import and completion list to help IntelliJ select the correct classes automatically.

    • com.sun

    • java.awt

    • javafx.scene

    • javax.swing

    • jdk.internal

    • sun.plugin

Now that you have a working development environment, you are ready to start building a web application.

migration assistance

Download free e-book.
The complete guide is also available in an easy-to-follow PDF format.

https://pages.vaadin.com/en/build-a-modern-web-app-with-spring-boot-vaadin-pdf

Open in anew tab

Show code

render-banner.ts

  1. export class RenderBanner extends HTMLElement {
  2. connectedCallback() {
  3. this.renderBanner();
  4. }
  5. renderBanner() {
  6. let bannerWrapper = document.getElementById('tocBanner');
  7. if (bannerWrapper) {
  8. return;
  9. }
  10. let tocEl = document.getElementById('toc');
  11. // Add an empty ToC div in case page doesn't have one.
  12. if (!tocEl) {
  13. const pageTitle = document.querySelector(
  14. 'main > article > header[class^=PageHeader-module--pageHeader]'
  15. );
  16. tocEl = document.createElement('div');
  17. tocEl.classList.add('toc');
  18. pageTitle?.insertAdjacentElement('afterend', tocEl);
  19. }
  20. // Prepare banner container
  21. bannerWrapper = document.createElement('div');
  22. bannerWrapper.id = 'tocBanner';
  23. tocEl?.appendChild(bannerWrapper);
  24. // Banner elements
  25. const text = document.querySelector('.toc-banner-source-text')?.innerHTML;
  26. const link = document.querySelector('.toc-banner-source-link')?.textContent;
  27. const bannerHtml = `<div class='toc-banner'>
  28. <a href='${link}'>
  29. <div class="toc-banner--img"></div>
  30. <div class='toc-banner--content'>${text}</div>
  31. </a>
  32. </div>`;
  33. bannerWrapper.innerHTML = bannerHtml;
  34. // Add banner image
  35. const imgSource = document.querySelector('.toc-banner-source .image');
  36. const imgTarget = bannerWrapper.querySelector('.toc-banner--img');
  37. if (imgSource && imgTarget) {
  38. imgTarget.appendChild(imgSource);
  39. }
  40. }
  41. }