How to use vaadin.url-mapping with Hilla frontend?

Hilla
1

Is there a correct example how to move Vaadin part on a sub path?
Is it enough just set vaadin.url-mapping=/ui/* ?

If I just set vaadin.url-mapping=/ui/* then all the requests to UI for path /ui/viewName shows 404.

2

The main purpose is to allow the application to accept requests to another servlets.

3

I’m not sure if I understood the question properly, could you please expand a bit on what you’re trying to achieve?

Since the introduction of the FileBased Router in Hilla, the underlying React Router is configured in a way that whatever route that has no view mapping in Hilla, falls back to Flow, and if there’s no Flow views for that route either, then the 404 page is rendered. This behavior is implemented by defining wildcard routes for the React Router, and I suspect that in your case, setting the vaadin.url-mapping to something containing the * might be messing with the wildcard routes that is configured for the React Router.

4

I am triyng to inject Vaadin Hilla 24.7 project into legacy Vaadin6 project to migrate view by view for latest one and remove legacy code forever.
So, now legacy UI is served at /*, what is why I want to locate all new UI at /ui/*

5

OK, in this case, have you tried to move everything Hilla related in the frontend/views directory to the frontend/views/ui (except for the index.html)? As the file-router is based on the directory structure, a ui/ prefix will automatically be included in all Hilla view routes.

Don’t forget to remove the vaadin.url-mapping, vaadin.endpoint.prefix, and server.servlet.context-path properties, if they were added solely for the sake of working around this.

When you’re done with the migration, then you can get rid of that extra ui directory if you want.

6

Thanks a lot for the answer!
I use const router = createBrowserRouter([...routes]); for routing, I guess I can try
const router = createBrowserRouter([...routes],{basename:'ui'});

7

There is another problem. Both vaadin6 and vaadin hilla 24.7 use /VAADIN/* path for sources. Is it possible to separate these requests on vaadin 24.7 side?

8

Mapping legacy request to “/VAADIN/themes/reindeer/", "/VAADIN/widgetsets/” helped.
Vaadin6 and Vaadin24.7 Hilla works together.

1 Like
9

Nice work! Happy to see you figured it out!

I was about to suggest this tutorial video about having V8 and V14 side by side for migration purposes. It might still worth watching it as it offers tips and tricks about the practicalities for migration cases generally.

1 Like