Layouts for React Hybrid Vaadin Flow App.

I have a Vaadin Flow application, and I want to try out hybrid React routing.

I am following the steps documented here: https://vaadin.com/docs/latest/integrations/hilla

One immediate problem I’m facing is that the layout for the Vaadin Flow app is Java-based and loosely based on the Business App Starter.

It doesn’t seem to be a way to share the Java-based layouts with React views.

export const routes: RouteObject = [
{
element: ,
children: [

        ...serverSideRoutes // Java views will have Layouts defined in java.
    ],
},

];

I wonder what’s the correct approach to ensure that both React and Vaadin views have the same look and feel.

Should I re implement the Java layouts in TypeScript/React and continue to use separate layouts for Java and React routes?

Or am I missing something and there is a easier way than the above option?

@practical-rat

Layouts for React Hybrid Vaadin Flow App.

We have envisioned that for most Flow-Hilla hybrid apps, it would make sense to have the MainLayout of the application implemented in TypeScript. This TypeScript MainLayout can then be used to link to Flow and Hilla views. This is the approach demonstrated in this example app: https://github.com/vaadin/flow-hilla-hybrid-example.

But I’m curious if you have a strong reason for preferring to have the MainLayout is written in Java (from which you’d link to Flow and Hilla views)?

Thank you for your reply. Using a common TypeScript layout makes sense for hybrid apps.

However, for applications—such as the one I am experimenting with—that are considering adding React views, the existing layout, which is likely in Java, would need to be rewritten in TypeScript. Hence I would prefer if java based layouts can support both types of views and avoid rewriting existing layouts.

As I mentioned my application layout uses ‘business app starter’ layout, so converting that into typescript layout would not be trivial. I see that vaadin now support ‘app layout’ component but in terms of functionality it still lags the one provided by starter app. For example, the Vaadin app layout component lacks features such as the ability to filter navigation items based on search criteria, a functionality that is present in the starter application. This is very useful if there are large number of navigation items.

Edit: I cloned the flow-hilla-hybrid repository and added search functionality to the navigation. The process of converting Java layouts to TypeScript ones may not be as challenging as I had initially thought.

hill-hybrid-ex.png

:+1: good that you are making progress with the TypeScript layout. For now, it’s not possible to use the Java MainLayout with Hilla views. We will consider adding such a support in the future though.

I have encountered a couple of issues with the experimental React support for Vaadin Flow:

1)
The theme does not work after adding in hilla support to flow app. The index.html file is missing the theme color and typography. For instance, with the Lumo theme, lumo-color and lumo-typography are absent.
Difference between normal flow app and hybrid app shows couple of missing styles for color and typography

The Vite configuration produced by the Hilla Maven plugin utilizes plugin-react-swc, which does not appear to function straight out of the box. In contrast, plugin-react is operational.

The error from the vite-plugin-react-swc is as follows:

“Unexpected token (Note that you need plugins to import files that are not JavaScript).”

While the second issue has a workaround, I am unsure of how to fix the first one.

Edit: It was missing theme config theme.json. I did not realize the way themeing works has changed in version 24.
vaadin-styles.png

@tireless-elk, @sanguine-whale: any thoughts on the React plugin issue?

Originally it was added here https://github.com/vaadin/flow/pull/18139, we have to revisit this change as we observed some issues with this plugin during internal tests.

What kind of import do you get "Unexpected token (Note that you need plugins to import files that are not JavaScript)." for ?

This is from plugin-react-swc for any TypeScript files. If I recall correctly, plugin-react-swc is the faster Rust-based compiler for React.