Docs

Docs

In-Depth Tutorial

This in-depth tutorial teaches you how to build a full-stack Spring Boot, Lit, and Hilla web application step by step.

In this step-by-step tutorial, you learn to build a full-stack web application using Hilla. 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.

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

What You’ll Learn

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.

A content management application with a side navigation bar

The technologies and concepts you learn are:

  • reactive front-end development with Lit and TypeScript

  • back-end 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 will have all the skills you need for building and deploying an application of your own.

Requirements

This tutorial requires approximately 4 hours to complete.

It’s 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.

Hilla runs on Java and you need the following development tools:

Hilla 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 you have questions is the Hilla Discord chat server.

Hilla Explained

A Hilla 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. A Hilla Maven/Gradle plugin that handles the application build process for development and production mode. The plugin manages a webpack build internally.

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

UI Components

Hilla 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 they are 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.

A grid of Vaadin components

Full-Stack Alternative

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

Unlike the other frameworks, Hilla:

  • 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 Hilla frontend framework comparison tool to learn how concepts in other frameworks translate into Hilla.