search

ui5-community / generator-ui5-project

Generator for UI5-based web-apps which use the official UI5 tooling and support multiple deployment targets such as the SAP Business Technology Platform
Apache License 2.0
44 stars 27 forks source link
easy-ui5 yeoman yeoman-generator

readme

Generator for OpenUI5/SAPUI5 projects

yeoman generator Slack OpenUI5 channel
Build Status License Status useses node >= 16 useses nvm

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
```bash 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
```bash 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
```bash 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
```bash 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
```bash 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
```bash yo easy-ui5 project qunit ``` This subgenerator adds a qunit test (unit test) to one of the existing uimodules.
opa5
```bash yo easy-ui5 project opa5 ``` This subgenerator adds a OPA5 journey (integration test) and page object to one of the existing uimodules.
cap
```bash 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](https://www.npmjs.com/package/cds-plugin-ui5) and a dev dependency). This subgenerator is basically a convenvience wrapper around the [cds init](https://cap.cloud.sap/docs/get-started/in-a-nutshell#jumpstart) 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).

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](https://docs.cloudfoundry.org/buildpacks/staticfile/) 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](https://docs.cloudfoundry.org/buildpacks/node/index.html)) 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](https://www.npmjs.com/package/@sap/ux-ui5-tooling#deployment-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.