Rewriting in KOBI is a term used for different transformations Gluer does, like turning resources into URLs, adding application’s mounting point…
References
Resources
Micro front-end do not take care about final URL because SEO is critical, have a significant complexity and must be very performant as there are many link on each pages. Micro front-end will make link on path managed by other micro front-end, this explain why we must have a centralized point to manage it.
Micro front-end do not reference real URL but point to Resources, Gluer will manage the URL rewriting and will use your own implementation of URL generation if it is implemented.
To create a link to a page, you should use the following syntax <a href="[{resource_type}::{resource_id}]" /> or if you want to refer to an other site managed in the same instance of KOBI <a href="[{site_id}::{resource_type}::{resource_id}]" />
{site_id} is the id of the site used in configuration, {resource_type} may be “PAGE” if you refer to a simple page created in KOBI, in this case the {resource_id} will be the Page Id, or a custom resource type if you refer to a referential in your IT system (PRODUCT, …).
Alias
To make it even easier for you to reference Pages, you can set Alias on Pages with KOBI Designer. By this means, you can easily refer to a Page with a clear named alias in each micro front-end without calling an API or refering a specific id depending on your environment.
Use the following syntax for Gluer to rewrite it <a href="[ALIAS::{my_alias}]" />
Static & dynamic paths
Every reference to paths (static resources or dynamic paths) in your micro front-end will be rewritten by Gluer in order to add the mouting point of your application. The Mouting point is necessary for Gluer to be able to route incoming request to the right micro front-end.
All paths should be referenced by a relative path and start with / and surrounded by simple or double quotes in order to be detected and rewritten by Gluer.
If you want to refer a path to an other micro front-end you should use /app/{app_name} where {app_name} is the name of your micro front-end used in Gluer configuration. Gluer will automaticaly use the mointing point configured for this micro front-end.
- ‘/path/to/my.css’ -> ‘/mounting-point/path/to/my.css’
- “/path/to/my.css” -> “/mounting-point/path/to/my.css”
CSRF
In your application, you may want to add a CSRF protection, in this case you will add a field on your form like <input type="hidden" name="X-CSRF-TOKEN" value="[CSRF]">
Before rendering, Gluer will use a generated CSRF token (or generate one) and replace the instruction [CSRF] with the actual value. This value will be verified when the form is submited.