manideeps/hilla-demo

Application demoing some realistic use cases with Hilla framework

Custom project from start.vaadin.com

This project was created from https://start.vaadin.com. It's a fully working Vaadin application that you continue developing locally. It has all the necessary dependencies and files to help you get going.

The project is a standard Maven project, so you can import it to your IDE of choice. You'll need to have Java 11/17 + and Node.js 16.14+ installed.

To run from the command line, use mvn and open http://localhost:8080 in your browser.

You can log in with the following credentials:

• user/user with role USER
• admin/admin with role ADMIN

This application is demoing various aspects of Hilla framework

• Lazy loading data from server
• Using server side filtering of data
• Securing stateless Hilla app using Spring Security
• Demonstrating role based authorities, method level end point security
• Styling using Lumo utility classes
• Handling url parameters of the route
• Navigating with url parameters within the application
• Using renderer function in vaadin-grid
• Creating responsive vaadin-grid using ResizeObserver etc.
• Responsive CSS using media queries
• Setting tooltip formatter using additionalOptions for vaadin-charts
• Using Lumo Badge
• Using custom validator in binder
• Theming with Lumo CSS custom properties
• Date input in multiple formats
• Localization / views
• Localization of the DatePicker
• Localization of the binder error messages using its interpolator callback
• Example of vaadin-confirm-dialog
• Using static resources from serves (see the flags in language-switch)
• Using renderer with vaadin-select (see language-switch)
• Example of class name generator with vaadin-grid
• How to integrate 3rd party library, see currency-field.ts
• Example test story of the list view using TestBench Browser testing
• Using tooltips
• Dense theme variant

Before running

Create file "config/secrets/application.properties"

use this command to generate new random secret for your app:

openssl rand -base64 32

Copy the to property in application.properties file

com.example.application.app.secret=

Running the app

Use:

mvn spring-boot:run

Project structure

Directory	Description
frontend/	Client-side source directory
index.html	HTML template
index.ts	Frontend entrypoint, contains the client-side routing setup using Vaadin Router
main-layout.ts	Main layout Web Component, contains the navigation menu, uses App Layout
views/	UI views Web Components (TypeScript)
stores/	Stores, the business logic (TypeScript)
util/	Custom validator and Localization (TypeScript)
styles/	Styles directory (CSS)
src/	Server-side source directory
Application.java	Server entrypoint
data/	Entities and endpoints directory (Java)

Exception:

• If you have this error:

4 | import { ifDefined } from "lit-html/directives/if-defined.js";
5 | import { customElement, property, query } from "lit/decorators.js";
> 6 | import Cleave from "cleave.js";
|        ^^^^^^
7 | import { CleaveOptions } from "cleave.js/options";

Or here:

import { uiStore } from './stores/app-store';

• Then please add "allowSyntheticDefaultImports": true to your tsconfig.json compilerOptions part (in your project root)

"compilerOptions": {
  "allowSyntheticDefaultImports": true,
  ...
  }

What next?

vaadin.com has lots of material to help you get you started:

• Read the Quick Start Guide to learn the first steps of full stack Vaadin applications development.
• Follow the tutorials in vaadin.com/learn/tutorials. Especially Building Modern Web Apps with Spring Boot and Vaadin is good for getting a grasp of the basic Vaadin concepts.
• Read the documentation in vaadin.com/docs.
• For a bigger Vaadin application example, check out the Full Stack App starter from vaadin.com/start.