Change the default content of routes.tsx to respect FS router

[mshabarov]

Describe your motivation

Vaadin Flow generates a routes.tsx file in frontend with a default codes containing only server-side routes. This default codes should take into account the File System-based routing feature and, in the same time, it should allow easily configure the explicit routing configurataion.

Describe the solution you'd like

Here is the codes that takes into account FS router (should be double checked with the latest Hilla versions):

import views from 'Frontend/generated/views.js';
import { serverSideRoutes } from "Frontend/generated/flow/Flow";
import {createBrowserRouter} from "react-router-dom";

views.children?.push(...serverSideRoutes);

// Or use explicit routes configuration
// export const routes = [
//     { path: 'react-components',  element: <ReactComponents/> },
//     ...serverSideRoutes
// ] as RouteObject[];

export const routes = views;

export default createBrowserRouter(views, {basename: new URL(document.baseURI).pathname });

This file should be generated on adding Hilla views as previously but it should contain a template for explicit routes config if developers want to use this approach, but in the same time it should allow to use FS router without any manual changes.

Additional context

Vaadin 24.4.

[mshabarov]

views.js is generated by @vaadin/hilla-file-router/vite-plugin.js . The plugin should be added manually to the Vite config (for now). Thus, even if the routes.tsx contains views.js, this would not compile unless you add a plugin.

[mshabarov]

The plan is to add the plugin by default. Then we can add views.js usage by default.

Meanwhile, it makes sense to just add a commented code and short instructions how to add a plugin.

[mshabarov]

We need to add the plugin by default and move serverSideRoutes into views.js, see https://github.com/vaadin/flow/pull/18830#discussion_r1507090757.

Then probably we can figure out a unified content of this file that allows easily add a path and work with FS router out-of-the-box.

[mshabarov]

These should be done first https://github.com/vaadin/flow/issues/18832 and https://github.com/vaadin/hilla/issues/2146.

[mshabarov]

Here what we discussed for the next steps https://github.com/vaadin/hilla/issues/2146#issuecomment-1982919750.

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.4.0.alpha14 and is also targeting the upcoming stable 24.4.0 version.