Hilla Documentation

Hilla Project Setup

Make sure you have Java 11 and Maven installed before you begin.

This chapter covers:

  • downloading a Hilla application starter

  • importing a Hilla project in VS Code

  • installing VS Code plugins for productive development

  • running a Hilla application in development mode.

Downloading a Hilla Application Starter

This tutorial uses a pre-configured starter from Hilla Start. 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.

Create an application using the Vaadin CLI:

npx @vaadin/cli init --preset hilla-crm-tutorial hilla-crm

Importing a Hilla project in VS Code

Open the created hilla-crm folder in VS Code. You can open the folder by:

  • navigating to the project folder and running code . (note the period), or

  • choosing File > Open (Folder)…​ in VS Code and selecting the project folder.

Installing VS Code Plugins for Productive Development

When you import the project, VS Code should show a prompt suggesting recommended plugins. Select Install.

If you do not see the prompt, install the following plugins manually through the Extensions view.

Hilla Project Structure

Now that you have the project imported, it is time to get familiar with the structure.

The two main folders to be aware of are:

  • frontend - this is where your views and frontend code live.

  • src - this is where your Java backend code lives.

The key files in a Hilla application are:

  • pom.xml - the project configuration file, which defines backend dependencies

  • frontend/index.html - the bootstrap page

  • frontend/index.ts - the routing definition

  • src/main/java/com/example/application/Application.java - runs the Spring Boot application.

Running a Hilla Application in Development Mode

Start the application by locating Application.java within the src folder, right-clicking on it and selecting Run. You can also select Debug if you wish to debug the server endpoint code.

You can also run the application from the command line with the following command:

./mvnw

The first startup may take a few minutes. Hilla downloads all the needed frontend and backend dependencies and builds the application. Hilla also installs Node and npm, if you do not already have them installed on your computer.

When the build finishes, Hilla opens your default browser at http://localhost:8080.

Hilla reloads your browser automatically when you make changes during development. Try this out by modifying the placeholder content in the render() method in frontend/views/list/list-view.ts and saving the file. Your browser should reflect the change within a second or two.

render() {
 return html`<h1>Hello, world!</h1>`;
}