Learn Vaadin Fusion: Build a Full-Stack Reactive Spring Boot and Lit Web App

In this step-by-step tutorial, you learn to build a full-stack web application using Vaadin Fusion. The tutorial starts from an empty project and covers all the steps to build the application and deploy it to production. Once you have completed the tutorial, you are ready to turn your next application idea into reality.

Vaadin is a full-stack platform for building web apps with Java backends. It simplifies web application development by giving you everything you need in one package: UI components, tooling, frontend, and backend frameworks. With fewer moving parts and less to configure, you can get started fast and stay productive throughout the entire project.

What You Learn From This Tutorial

In this tutorial you learn full-stack web application development by building a Customer Relationship Management (CRM) application. The application features:

  • A view for listing, editing, and creating contacts (CRUD).

  • A dashboard view that shows company and contact statistics in a chart.

  • Responsive layouts that work on desktop and mobile devices.

  • A database for persisting data.

  • Read-only offline support.

The technologies and concepts you learn are:

  • Reactive frontend development with Lit and TypeScript.

  • Backend development with Java and Spring Boot.

  • Application state management with MobX.

  • PWA technologies for installation and offline usage.

  • Cloud deployment to Heroku.

After finishing the tutorial, you’ll have all the skills you need for building and deploying an application of your own.

What You Need to Complete This Tutorial

This tutorial requires approximately 4 hours to complete.

It is intended for developers with a basic understanding of Java, JavaScript, HTML, and CSS. You don’t need to be an expert by any means, but understanding the syntax and basic concepts makes it easier to follow along.

Vaadin Fusion runs on Java and you need the following development tools:

Vaadin supports Java versions 8 and later, but this tutorial assumes you are using version 15. If you wish to use an older Java version, you need to change the project and deployment setups accordingly.

Source Code

You can find the source code for the completed application on GitHub.

Getting Help

The best place to get help if have questions is the Vaadin Discord chat server.

What is Vaadin Fusion?

A Vaadin Fusion application has five main parts:

  1. A Spring Boot backend.

  2. A Lit frontend.

  3. A set of customizable UI components.

  4. A client-server framework that provides endpoint generation and handles client-server communications, view routing, data binding, and more.

  5. Vaadin Maven/Gradle plugin that handles the application build process for development and production mode. The plugin manages a webpack build internally.

Fusion integrates these and provides build tooling and code generation to give you a productive full-stack development experience.

Vaadin UI Components

Vaadin includes over 40 UI components to help you build applications faster. By using ready-made building blocks, you are able to focus more of your time on building end-user functionality.

Vaadin components are custom HTML elements that are registered with the browser. They are based on W3C web component standards. Once loaded, you can use the custom HTML tags like any other HTML.

The components have light and dark themes, and you can further customize them through CSS variables to fit your brand.

Vaadin Fusion is a Full-Stack Alternative to React, Angular, and Vue

Although Vaadin Fusion, React, Angular, and Vue all share the concept of reactive, component-based UI building, only Fusion is a full-stack development platform designed specifically for Java backends.

Unlike the other frameworks, Fusion:

  • Includes a large set of customizable UI components.

  • Handles both frontend and backend.

  • Includes integrated build tooling for both frontend and backend.

  • Automatically generates TypeScript types based on Java types for end-to-end type safety.

If you come from a React, Angular, or Vue background, you can use the Vaadin frontend framework comparison tool to learn how concepts in other frameworks translate in Vaadin Fusion.