Docs

Docs

Hilla Project Setup

Learn how to set up a Hilla project, import it in VS Code, and run it with live reload.

Make sure you have Java 17 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 Hilla CLI:

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

Alternatively, you can download the starter as a zip-file and extract it.

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.

VS Code prompt asking you to install recommended extensions

If you don’t see the prompt, install the following plugins manually through the Extensions view.

Hilla Project Structure

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

Hilla project structure containing frontend

The two main folders to be aware of are:

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

  • src - this is where your Java back-end code lives.

The key files in a Hilla application are:

  • pom.xml - the project configuration file, which defines back-end 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.

Run the app by right-clicking the Application class and selecting Run

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 front-end and back-end dependencies and builds the application. Hilla also installs Node and npm, if you don’t 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>`;
}
Running application showing a "Hello world" text.