Flow-Hilla Hybrid Applications

Create hybrid applications by combining Hilla or React views with Flow views.

Add Hilla to Flow Applications
Add Flow to Hilla Applications

Hilla is part of the Vaadin Platform used for building reactive web applications on Java backends. It integrates seamlessly a React TypeScript frontend with a Spring Boot backend.

You can develop hybrid applications that leverage Vaadin Flow and Hilla. This allows you to combine Vaadin Flow routes written in pure Java, with the Hilla ones written in React, into one application.

This page shows how to add Hilla to an existing Vaadin Flow application, or add Vaadin Flow to an existing Hilla application.

See the source code of a complete Vaadin Flow-Hilla application.

Add Hilla to Flow Applications

To add Hilla to a Vaadin Flow application, you could start with a Spring Boot-based Vaadin Flow application (e.g., skeleton-starter-flow-spring). You can add Hilla to the project using the steps described in the sub-sections here.

Project dependencies adjustments aren’t needed since Hilla is included in the Vaadin platform.

Add React Views

Add a view file, counter.tsx into the src/main/frontend/views sub-directory. It will be accessible under /counter path in a browser. Here’s an example of how that might look:

import React, { useState } from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';

export default function counter() {
  const [counter, setCounter] = useState(0);

  return (
    <HorizontalLayout theme="spacing" style={{ alignItems: 'baseline' }}>
      <Button onClick={() => setCounter(counter + 1)}>Button</Button>
      <p>Clicked {counter} times</p>
    </HorizontalLayout>
  );
}

The directory, src/main/frontend/views is a default location where Vaadin looks for frontend views and automatically configures React Router, based on the file’s structure.

Use Side Navigation or Anchor components to navigate from a Flow view to a Hilla view:

Anchor navigateToHilla = new Anchor("counter", "Navigate to a Hilla view");

Run the Application

Run the application using mvn spring-boot:run. Then open http://localhost:8080 in your browser.

Once you add a frontend view, Vaadin starts the Vite development server on the next application run, enabling frontend hot-deployment.

Add Flow to Hilla Applications

If you already have a Hilla application, you can add Vaadin Flow to it. For example, starting from the Hilla project starter), you can add Vaadin Flow to the project using the steps in the sub-sections that follow.

Vaadin Platform includes Hilla dependencies; no dependencies adjustment is needed.

Add Server-Side Routes

Add a view file HelloView.java into the src/main/java/org/vaadin/example/HelloView.java sub-directory. It will be accessible under /hello path in a browser. Here’s an example of that:

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("hello")
public class HelloView extends VerticalLayout {
    public HelloView() {
        TextField textField = new TextField("Your name");
        Button button = new Button("Say hello", e ->
                add(new Paragraph("Hello, " + textField.getValue())));
        add(textField, button);
    }
}

Use Vaadin’s Side Navigation or React’s NavLink / Link components to navigate from a Hilla view to a Flow view:

import { NavLink } from 'react-router-dom';

<NavLink to="/flow-route">Navigate to a Flow View</NavLink>

9da82521-5074-42b6-82a5-88fc207987d0

Documentation