Hilla 1.3: a faster way to build React + Spring Boot apps

It's time to build a new web application. You've decided to use React with a Java back end, so you're good to go right? Not quite.

There's still a lot of work to do to set up a new project, configure your build tools, find good UI components, and create APIs for communication between your front end and back end.

What if you could skip all that work and focus on building your app and delivering features?

The latest version of Hilla now makes it faster to build React apps that connect to Spring Boot backends than with React alone.

• No need for REST, call the backend through automatically generated type-safe methods
• Discover and fix errors earlier thanks to end-to-end type-safety
• Zero-configuration build tooling runs and auto-reloads both frontend and backend code
• Over 45 UI components included

TypeScript generation for easy backend access

Hilla apps use Java and Spring Boot on the backend and TypeScript on the frontend. This means you have type-safety through your entire app.

Here's how it works. In your Spring Boot app, create an endpoint:

ContactsEndpoint.java

// Make public methods callable from TypeScript.
@Endpoint
// Let anyone access them. Default = logged in only.
@AnonymousAllowed
class ContactsEndpoint {
 private ContactRepository repo;

 // Use Spring to autowire needed dependencies
 ContactsEndpoint(ContactRepository repo) {
   this.repo = repo;
 }

 public List<Contact> findAll() {
   return repo.findAll();
 }
}

Hilla generates corresponding TypeScript types and accessor methods automatically.

Any time somebody on your project changes the backend, they'll catch breaking changes to frontend code at build time – not in production.

ContactsList.tsx

import { useEffect, useState } from 'react';
// Hilla-generated TypeScript types and access methods, always in sync with backend
import { ContactsEndpoint } from 'Frontend/generated/endpoints';
import Contact from 'Frontend/generated/com/example/application/data/entity/Contact';

export default function ContactsList() {
 const [contacts, setContacts] = useState<Contact[]>([]);

 // Call the backend as an async method, update the state
 useEffect(() => {
   ContactsEndpoint.findAll().then(setContacts);
 }, []);

 return (
   <div className="contact-list">
     <h2>Contacts:</h2>
     <ul>
       {contacts.map((contact) => (
         <li key={contact.id}>
           {contact.firstName} {contact.lastName}
         </li>
       ))}
     </ul>
   </div>
 );
}

There are no REST endpoint URLs, no Swagger docs you need to read. Your IDE helps you explore APIs through auto-complete, and ensure correct use with type checking.

One project, one build – optimized for productivity

Hilla speeds up development by having the frontend and backend code in the same project. There is only one build tool to run. The Maven build runs both the Spring Boot backend and a Vite dev server for the frontend.

This way, whenever you change code, the browser updates automatically - no matter if it's a backend or frontend change.

But wait, isn't coupling the frontend and backend a bad idea? Hilla is built around the backends for frontends (BFF) pattern because we have found that full-stack teams with control over the API they need for their frontend are more productive. Hilla apps are stateless (and start in a fraction of a second when compiled to native) for efficient scaling.

UI components included

Hilla includes more than 50+ great-looking and accessible UI components by Vaadin. You can customize colors, sizing, roundness, flatness, and other properties through CSS properties to make them fit your brand.

Get started

Learn the basics of Hilla with React through the basics tutorial. Or jump right in and create a project with the CLI:

 npx @hilla/cli init --react hello-react

Read the Hilla React documentation to dig deeper.

Need help? Join us on the Vaadin community forum and post your questions under the "hilla" tag.

Follow @vaadin on X for updates, and be sure to tag us when you share cool stuff you've built with Hilla!

What does this mean for Lit support?

Hilla added React support as an alternative to Lit, not as a replacement to it. We continue to build and support both to give you more options to choose the stack you prefer.