FEATURE - Fiori preview middleware

[tobiasqueck]

As a developer,
I want to preview my Fiori applications and adaptation projects locally in an FLP sandbox without having to maintain test files locally,
so that I don't have to worry about changes of these files in the future.

Description

The functionality available in the @sap/ux-ui5-tooling preview middleware (https://www.npmjs.com/package/@sap/ux-ui5-tooling#4-preview) is to be published to open source. It then needs to be extended not only be usable for variant creation but the simple preview with a sandbox FLP. As result, it is not necessary anymore to generate the test/flpSandbox.html, consequently, we can easily update it (through the middleware) with default them or other best practices.
Additionally, the published preview middleware needs to handle adaptation projects, so that a developer used to Fiori app development gets the same experienced when developing a Fiori adaptation project.

Technical Design

axios-extension

• enhance the lrep service to allow generating a merged manifest.json based on an app descriptor variant file

ui5-proxy-middleware

• remove the requirement to have a manifest.json in the project to determine the ui5 version

fiori-preview-middleware (new module)

• preview
  • define ejs template for the flp sandbox
  • enable flexibility to the hosted path
  • use project manifest for configurations
• adp
  • on startup use the axios-extension to fetch the merge manifest
  • generate the preview flp with the information from the merge manifest
  • add proxy to load the required files from the reference application from the backend

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have a Fiori application project with a ui5.yaml configured with the new middleware (and no html files for testing)
when I execute ui5 serve
then a sandboxed FLP opens with my local app running in it.

Given I have a Fiori adaptation project with a ui5.yaml with the new middleware properly configured for adaptation projects (and no html files for testing)
when I execute ui5 serve
then a sandboxed FLP opens with my local adaptation project merged with the reference app running in it.

Given I need to add project specific code to my FLP sandbox
when I execute a command to eject the flpSandbox.html
then an flpSandbox.html file is added to my project and I can modify it for my needs.

Notes

Since the requested feature is quite complex and combines existing functionality from different modules, it needs to be sequentially implemented and released.

Tasks

• Extract only the simple preview functionality from @sap/ux-ui5-tooling and make it better configurable (v0.1) - Initial publication of the preview middleware #1093
• Integrate this version of the new preview middleware back into the @sap/ux-ui5-tooling with preconfigured parameters ensuring the compatibility with existing projects (SAP Internal)
• Add support for adaptation projects to the preview middleware (v0.2)
• Integrate this new functionality back into @sap/ux-ui5-tooling (SAP internal)
• Add support to "eject" the test/flpSandbox.html into the project folder so that developers can also modified it for special use cases (Feature: (1) list virtual preview files and (2) eject virtual files on request #2062)
• Modify the fiori-*-writers in the open-ux-tools to not generate the test/flpSandbox.html anymore and add the preview middleware to the ui5*.yaml files (v0.3)
• Integrate updated writers and preview middleware back into Fiori tools (SAP Internal)
• validate and possibly enhance the cds-plugin-ui5 to handle virtual files served with the preview-middleware ([cds-plugin-ui5] How to show virtual html links? ui5-community/ui5-ecosystem-showcase#785)