skills.rest
vaadin
vaadinOFFICIAL
Explore all skills by this author →
Website𝕏@vaadinGitHub

client-side-views

Build client-side React/Hilla views with file-based routing and type-safe Java endpoints.

11|3|Updated Feb 26, 2026
Search Tags:#react#signals#endpoints#file-based-routing#vaadin#hilla#browsercallable
One-click install
npx skills add https://github.com/vaadin/claude-plugin --skill client-side-views
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: client-side-views
Source: https://github.com/vaadin/claude-plugin/tree/main/skills/client-side-views
Command: npx skills add https://github.com/vaadin/claude-plugin --skill client-side-views

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building client-side React/Hilla views in Vaadin 25 requires coordinating file-based routing, type-safe backend communication, client-side state, and secure server endpoints; this Skill consolidates conventions, patterns, and safety practices so developers can implement interactive browser UIs reliably and consistently.

Core Features & Use Cases

  • File-based routing conventions and ViewConfig metadata to map .tsx files to application routes and menus.
  • Guidance for @BrowserCallable Java endpoints and the generated TypeScript clients so frontend code can call backend services securely and with proper error handling.
  • Reactive endpoints and subscription patterns for server push using Flux and EndpointSubscription, including subscribe/unsubscribe and reconnection handling.
  • Signal-based state management with useSignal/useComputed for efficient DOM updates and examples for common patterns like product lists, detail pages, and dashboards.
  • Security and best practices: recommended annotations, endpoint statelessness, error handling templates, and anti-patterns to avoid common mistakes.

Quick Start

Create a React view at src/main/frontend/views/products/@index.tsx that calls ProductService.findAll() from Frontend/generated/endpoints, stores the results with useSignal, and renders them in a grid.

Frequently Asked Questions about client-side-views

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build type-safe React views with Hilla in Vaadin 25?▼

To build type-safe React views in Vaadin 25, create .tsx files in the frontend views directory using file-based routing conventions. These views communicate securely with Java backend endpoints via generated TypeScript clients, ensuring type-safe data exchange.

What is the best way to manage local state in React Hilla client views?▼

The best way to manage local state in React Hilla client views is using Signal-based state management. By applying useSignal and useComputed hooks, you achieve efficient DOM updates for interactive pages like dashboards and product catalogs.

How do I secure Java endpoints for browser calls in a Hilla React app?▼

Secure Java endpoints for browser calls by applying the @BrowserCallable security annotation. This ensures generated TypeScript clients in Frontend/generated/endpoints can access backend services safely, maintaining endpoint statelessness and proper error handling.

Can I use server push with Flux subscriptions in Hilla React views?▼

Yes, you can use server push in Hilla React views through reactive endpoints. Implement subscription patterns using Flux and EndpointSubscription to handle real-time data feeds, including proper subscribe, unsubscribe, and reconnection handling.

Does file-based routing in Vaadin 25 automatically generate application menus?▼

Yes, file-based routing in Vaadin 25 automatically maps .tsx files to application routes. By utilizing ViewConfig metadata within these React views, you can simultaneously configure and generate the corresponding application menus.

When should I choose client-side Hilla React views over server-side UI?▼

Choose client-side Hilla React views when building applications requiring offline capability or handling high-traffic browser UIs. They are specifically suited for rich interactive pages such as real-time feeds, product catalogs, and dashboards.

Related Skills

Explore More Software Engineering Skills→
marcushellbergmarcushellberg
6

client-side-views

Build client-side Vaadin 25 views with React or Hilla.

Community
Intermediate
nakafaainakafaai
78

convex-realtime

Synchronize React data with Convex subscriptions, optimistic updates, and caching.

Official
Advanced
davidrrowleydavidrrowley

azure-messaging-webpubsub-java

Send WebSocket messages and manage connections with Azure Web PubSub in Java.

Community
Intermediate
PetriLahdelmaPetriLahdelma
2

frontend-development

Guide React 18 and Next.js 15 frontend development with TypeScript.

Community
Advanced