Generator for OpenUI5/SAPUI5 projects

A project generator for projects that contain one or more UI5 applications ("uimodules") and manage them via npm workspaces. The uimodules itself use the official UI5 tooling. The generator contains multiple subgenerators to help with recurring tasks. It also supports multiple deployment targets on the SAP Business Technology Platform. This generator was build as a plug-in for the community project easy-ui5 by SAP.

If you are looking to create a simple UI5 project with no deployment configuration and don't plan to add multiple uimodules, check out the generator-ui5-app.

As of version 0.1.0, we strive to share core functionality (such as webapp scaffolding) with SAP's open-ux-tools effort, which is "a set of tools and libraries that makes it faster and easier to develop SAP Fiori applications".

Usage with easy-ui5

npm i -g yo
yo easy-ui5 project

     _-----_
    |       |    ╭──────────────────────────╮
    |--(o)--|    │  Welcome to the easy-ui5 │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Subgenerators

This generator is split up into multiple subgenerators to help with recurring tasks even after the initial project generation. See the following list for all available subgenerators:

uimodule

yo easy-ui5 project uimodule

This subgenerator adds a new uimodule to an existing project. It reuses the config of the existing project and uimodule(s).

fpmpage

yo easy-ui5 project fpmpage

This subgenerator adds a new flexible programming model (fpm) page to one of the existing uimodules. This subgenerator only works for projects that enabled the flexible programming model during project creation.

model

yo easy-ui5 project model

This subgenerator adds a new data model to one of the existing uimodules. Supported model types are OData v4, OData v2, and JSON. The subgenerator can optionally set-up a proxy to the respective data source via the ui5.yaml.

view

yo easy-ui5 project view

This subgenerator adds a new XML view to one of the existing uimodules. Only XML views are supported. The subgenerator can optionally set-up the corresponding route and target in the manifest.json.

customcontrol

yo easy-ui5 project customcontrol

This subgenerator adds a new custom control (which extends an existing UI5 control) to one of the existing uimodules.

qunit

yo easy-ui5 project qunit

This subgenerator adds a qunit test (unit test) to one of the existing uimodules.

opa5

yo easy-ui5 project opa5

This subgenerator adds a OPA5 journey (integration test) and page object to one of the existing uimodules.

cap

yo easy-ui5 project cap

This subgenerator adds an SAP Cloud Application Programming Model (CAP) server for the Node.js runtime to the project and connects one of the existing uimodules to it (via the cds-plugin-ui5 and a dev dependency). This subgenerator is basically a convenvience wrapper around the cds init command - with the added benefit of constructing a deployment-ready mta.yaml file on root level of the project, that includes all necessary artifacts in line with the selected deployment target.

Deployment

Projects created with this generator use the Multitarget Application approach and can be built and deployed out of the box:

Make sure you have the Cloud Foundry CLI installed and are logged in to your Cloud Foundry environment via the cf login command.

npm run build
npm run deploy

During the prompting phase, the generator will ask on which target platform you want to deploy your project. See the following list for all available deployment targets:

Static webserver

With this option the project gets deployed to Cloud Foundry via the Staticfile buildpack to run on a static webserver without authentication or proxys in place.

Application Router

With this option the project gets deployed to Cloud Foundry in the form of an Application Router, which is a Node.js application (Node.js buildpack) that acts as a reverse proxy and can handle authentication as well different routes within your project. The uimodules of your project are served via the local dist/ directory of the Application Router.

SAP HTML5 Application Repository Service

With this option the project gets deployed to Cloud Foundry via the SAP HTML5 Application Repository Service. This makes the application visible in the "HTML5 Applications" section in your SAP BTP subaccount and is the foundation for accessing with other apps and services on SAP BTP.

SAP Build Work Zone, standard edition

With this option the project gets deployed to Cloud Foundry via the SAP HTML5 Application Repository Service and is also accessible via SAP Build Work Zone, standard edition, which provides a Fiori Launchpad for your applications.

SAP NetWeaver

With this option the uimodules gets deployed to SAP NetWeaver using the deploy-to-abap task.

Note: You have to run npm run deploy for the uimodules individually (in their respective directories) to deploy them, which is different to the other deployment scenarios.

Debugging

Follow these steps to debug this generator (or run it in standalone mode for that matter):

1. Clone this repository.
2. Install the local repository globally via the following command: npm link
3. Start one of the subgenerators in a JavaScript Debug Terminal within VS Code: yo ui5-project:<subgenerator>

If you are feeling really fancy, you can also start a subgenerator via the native Node.js debugger and connect an editor of your choice (any Neovim users here? 👋🏻) via the Debug Adapter Protocol: node --inspect node_modules/yo/lib/cli.js ui5-project:<subgenerator>

Happy coding!

Support

Please use the GitHub bug tracking system to post questions, bug reports or to create pull requests.

Contributing

We welcome any type of contribution (code contributions, pull requests, issues) to this generator equally. Check out the debugging section to learn how to set this generator up for development on your machine.