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
- 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
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=
Use:
mvn spring-boot:run
| 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) |
- 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": trueto your tsconfig.jsoncompilerOptionspart (in your project root)
"compilerOptions": {
"allowSyntheticDefaultImports": true,
...
}
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.