dynamically set the base URL in index.html returned by Vaadin Frontend Server

vlukashov commented 5 years ago

When serving a single page application with Vaadin Frontend Server I want it to dynamically set the <base href=""> tag in the response to compensate the level of nesting of the requested URL so that relative links like <a href="users/32"></a> would still work regardless of the URL used to load the SPA.

Example: In an SPA the same index.html file is returned for / and /users (and for all routes of the SPA) and the same page content is rendered from the view templates. If a view template contains a link like <a href="users/32">Sam's profile</a>, then when the SPA is loaded via / that link is resolved to /users/32. And when the SPA is loaded via /users, then the origin of the page is /users/, and that same link is resolved to /users/users/32. This complicates creating relative links in SPA view templates: simple relative links are not supported and one needs to use some helper function in the view templates to normalize relative URLs taking into account the page origin.

Browses can do that automatically if the page contains a <base href="..."> tag. In the above example the / request should return <base href="./">, and the /users request would should<base href="../"> in order for simple relative links to work without extra handling.

DoD:

Vaadin Frontend server inspects the index.html page template to see if it has the <base> tag
if the tag is there, the value of the href attribute is overwritten according to the request URL
if the tag is not there, it is added to the top of the <head> section
for each request the value of the base URL is dynamically determined as the relative path from the application deployment root URL to the request URL:
- if the deployment root is / and the request URL is /users, the base URL is ../
- if the deployment root is /admin and the request URL is /admin, the base URL is ./
there Vaadin Frontend Server documentation page contains a section describing the dynamic base URL setting: what is it, why is it there, how does it work

vlukashov commented 5 years ago

add a boolean config option to the frontend server config: enable / disable the base URL rewrite. default: enable

platosha commented 5 years ago

As discussed f2f with the team:

Frontend development JS server would require a separate implementation of this feature. Out of scope of this task.
If the tag in the file contains the origin (<base href="https://example.com/myapp">), the origin should be kept untouched, only the path after the origin should be modified.

vaadin / vaadin-connect

dynamically set the base URL in index.html returned by Vaadin Frontend Server #179