feat: Use RoutesBuilder API

src/main/frontend/routes.tsx

@@ -1,24 +1,49 @@
-import { createBrowserRouter, RouteObject } from 'react-router-dom';
-import { buildRoute } from "Frontend/generated/flow/Flow";
-import Layout from "Frontend/views/$layout";
-import Hilla from "Frontend/views/hilla";
-import About from "Frontend/views/about";
+/******************************************************************************
+ * This file is auto-generated by Vaadin.
+ * It configures React Router automatically by looking for React views files,
+ * located in `src/main/frontend/views/` directory.
+ * A manual configuration can be done as well, you have to:
+ * - copy this file or create your own `routes.tsx` in your frontend directory,
+ *   then modify this copied/created file. By default, the `routes.tsx` file
+ *   should be in `src/main/frontend/` folder;
+ * - use `RouterBuilder` API to configure routes for the application;
+ * - restart the application, so that the imports get re-generated.
+ *
+ * `RouterBuilder` combines a File System-based route configuration or your
+ * explicit routes configuration with the server-side routes.
+ *
+ * It has the following methods:
+ * - `withFileRoutes` enables the File System-based routes autoconfiguration;
+ * - `withReactRoutes` adds manual explicit route hierarchy. Allows also to add
+ * an individual route, which then merged into File System-based routes,
+ * e.g. Log In view;
+ * - `withServerRoutes` adds server-side routes automatically to either
+ * autoconfigured routes, or manually configured routes;
+ * - `protect` adds an authentication later to the routes.
+ *
+ * NOTE:
+ * - You need to restart the dev-server after adding the new `routes.tsx` file.
+ * After that, all modifications to `routes.tsx` are recompiled automatically.
+ * - You may need to change a routes import in `index.tsx`, if `index.tsx`
+ * exists in the frontend folder (not in generated folder) and you copied the file,
+ * as the import isn't updated automatically by Vaadin in this case.
+ ******************************************************************************/
+import  Flow  from 'Frontend/generated/flow/Flow';
+import { serverSideRoutes } from 'Frontend/generated/flow/Flow';
+import fileRoutes from 'Frontend/generated/views';
 import Login from "Frontend/views/login";
-import {protectRoutes} from "@vaadin/hilla-react-auth";
-import Public from "Frontend/views/$index";
+import {RouterBuilder} from "@vaadin/hilla-file-router/runtime.js";
 
-let routing = protectRoutes([
-    {
-        element: <Layout />,
-        handle: { title: 'Main' },
-        children: [
-            { path: '/', element: <Public />, handle: { title: 'Public', requiresLogin: false } },
-            { path: '/about', element: <About />, handle: { title: 'Welcome', requiresLogin: true } },
-            { path: '/hilla', element: <Hilla />, handle: { title: 'Hilla', rolesAllowed: ['ROLE_USER'] } }
-        ],
-    },
-    { path: '/login', element: <Login />, handle: { title: 'Login' } }
-]) as RouteObject[];
-export const routes = buildRoute(routing, routing[0].children);
 
-export default createBrowserRouter(routes);
+const routerBuilder = new RouterBuilder()
+    .withFileRoutes(fileRoutes)
+    .withReactRoutes(
+        { path: '/login', element: <Login />, handle: { title: 'Login' } },
+    )
+    // @ts-ignore
+    .withServerRoutes(Flow())
+    .protect('/login');
+
+export const routes = routerBuilder.routes;
+
+export default routerBuilder.build();