onedevatlasBeta
Browse the atlas
AllUI5CAPABAPBTP
GeneratorGeneratortypeCreates a project, a component or configuration once, when you run it, rather than taking part in every build.See every one →What this type is →by a community orgby a community orgoriginPublished by a community organisation, so it outlives any one maintainer.See every one →

generator-ui5-project

A Yeoman generator for a UI5 project holding several applications in npm workspaces, with eight subgenerators for recurring tasks and a choice of six deployment targets.

A UI5 project with more than one application needs an npm-workspaces layout, deployment configuration, and somewhere to put the pieces added after the first pass. This generator scaffolds that layout, run through Easy-UI5 as yo easy-ui5 project, and carries eight subgenerators for what recurs afterwards: a uimodule, a flexible programming model page, a data model, an XML view, a custom control, a QUnit test, an OPA5 journey and a CAP server for the Node.js runtime. While prompting it asks which of six deployment targets to configure: a static webserver, an Application Router, Application Frontend Service, the SAP HTML5 Application Repository Service or SAP Build Work Zone standard edition, each deployed to Cloud Foundry, or SAP NetWeaver through the deploy-to-abap task. From version 0.1.0 its README says it strives to share core functionality such as webapp scaffolding with SAP's open-ux-tools.

GitHub52 ★

Facts

Last pushLicenceApache-2.0

Where it sits

Lives in
UI5
Provides
GeneratorsUI5GeneratorscapabilityGetting from nothing to a project that runs, and from a project that runs to one that has the piece you just decided you need. Two different moments: the first is a one-time decision about layout, the second recurs for the life of the project.
Optional
generator-easy-ui5generator-easy-ui5artifactThe host generator that runs this one and its subgenerators as yo easy-ui5 project; the README's debugging section runs them from a local path instead.

Who is behind it

UI5 CommunityUI5 CommunityOrganisationMaintains this
In the atlas: maintains 69@ui5-communitymaintainerAndreas KunzPersonContributes to this
In the atlas: contributes to 19@akudevAlexanderPersonContributes to this
In the atlas: contributes to 2@AlexanderK22Harald GutbrodPersonContributes to this
In the atlas: contributes to 1@dh4rryflx-rscPersonContributes to this
In the atlas: contributes to 1@flx-rscgeorgbischoffPersonContributes to this
In the atlas: contributes to 3@georgbischoffDominik HeimPersonContributes to this
In the atlas: contributes to 25@heimwegeMarius ObertPersonContributes to this
In the atlas: contributes to 3@IObertLukas BöhmPersonContributes to this
In the atlas: contributes to 15@lboehmMarcel SchorkPersonContributes to this
In the atlas: contributes to 12@marcelschorkMarian ZeisPersonContributes to this
In the atlas: maintains 35, contributes to 86, wrote 25@marianfoo20 contributors

Before choosing this

Conditions

PracticalFunctional boundary

Not for a single-application project with no deployment configuration: for that the README points to generator-ui5-app instead.

What it declares

Every artifact

Type
Generator
Origin
By a community org

As a generator

Generates
A new projectA component in an existing projectConfiguration
Run with
Yeoman
Distributed through
does not say

Connections2

Download
generator-ui5-project connectionsgenerator-ui5-projectPROVIDES→ provides1provides stated Scaffolds an npm-workspaces project of one or more UI5 applications, adds uimodules, pages, models, views, custom controls, QUnit and OPA5 tests and a CAP server through its subgenerators, and configures one of six deployment targets. ui5-community/generator-ui5-project — repository: https://github.com/ui5-community/generator-ui5-project generator-ui5-project — README, Subgenerators: https://github.com/ui5-community/generator-ui5-projectGeneratorsNEEDS→ optionally needs1optionally needs stated If: run through Easy-UI5 rather than from a clone, as the README's debugging section does with `yo ./generators/project` The host generator that runs this one and its subgenerators as `yo easy-ui5 project`; the README's debugging section runs them from a local path instead. generator-ui5-project — README: https://github.com/ui5-community/generator-ui5-project generator-ui5-project — README, Usage with easy-ui5: https://github.com/ui5-community/generator-ui5-projectgenerator-easy-ui5if

README

quoted from ui5-community/generator-ui5-project under Apache-2.0, read
ui5-community/generator-ui5-project/README.mdOn GitHub

Generator for OpenUI5/SAPUI5 projects

yeoman generator Slack OpenUI5 channel
Build Status License Status useses node >= 24 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 generator-easy-ui5
yo easy-ui5 project

  ███████╗ █████╗ ███████╗██╗   ██╗   ██╗   ██╗██╗███████╗     ▄▄ ▄▄ 
  ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝   ██║   ██║██║██╔════╝     █████ 
  █████╗  ███████║███████╗ ╚████╔╝    ██║   ██║██║███████╗      ███  
  ██╔══╝  ██╔══██║╚════██║  ╚██╔╝     ██║   ██║██║╚════██║       █   
  ███████╗██║  ██║███████║   ██║      ╚██████╔╝██║███████║
  ╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝       ╚═════╝ ╚═╝╚══════╝

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.

Application Frontend Service

With this option the project gets deployed to Cloud Foundry via the Application Frontend Service using the MTA-based approach (Multi-Target Application).

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. Start one of the subgenerators in a JavaScript debug terminal within VS Code: yo ./generators/<subgenerator>, e.g. yo ./generators/project (adjust the path accordingly if running from within an existing application directory)

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 ./generators/project

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.

Apache-2.0, read

Others providing22

Compare all 23 on the Generators page →
Generators
  1. abap2UI5 Layout EditorDrag-and-drop UI5 view editor that writes an abap2UI5 app class
  2. generator-ui5-react-nestYeoman generator for a UI5 app that loads a React app
  3. SAP Build CodeDevelopment environment on BTP for UI5, Fiori, mobile and CAP
  4. ui5-control-generatorCommand line generator of UI5 custom controls from html
  5. Joule in SAP Build CodeJoule's generative AI inside SAP Build Code
  6. @sap-ux/cap-config-writerWriter module for changing a CAP project's configuration from code
  7. @sap-ux/createCommand line for changing features of an existing Fiori project
  8. @sap-ux/fe-fpm-writerWriter of flexible programming model elements into Fiori elements apps
  9. @sap-ux/odata-service-writerWriter that adds an OData service to an existing UI5 project
  10. @sap-ux/ui5-application-writerWriter of the base structure of a UI5 project from Node code
  11. create-easy-ui5npm-init wrapper for the Easy-UI5 Yeoman generator
  12. create-wdi5npm initializer adding wdi5 testing to an existing UI5 app
  13. generator-easy-ui5Yeoman meta-generator for scaffolding UI5 projects
  14. generator-ui5-addYeoman generator for UI5 tooling-extension projects
  15. generator-ui5-appEasy-UI5 generator scaffolding a new UI5 application
  16. generator-ui5-controlYeoman generator for UI5 custom controls distributed via npm
  17. generator-ui5-library-webcYeoman generator for UI5 libraries wrapping UI5 Web Components
  18. generator-ui5-libraryEasy-UI5 generator scaffolding a new UI5 library
  19. generator-ui5-ts-app-fclGenerator for a TypeScript UI5 FlexibleColumnLayout app on OData
  20. generator-ui5-ts-appEasy-UI5 generator scaffolding a TypeScript UI5 application
  21. generator-ui5-ts-libraryEasy-UI5 generator scaffolding a TypeScript UI5 library
  22. generator-ui5-wdi5Yeoman generator scaffolding wdi5 test configuration into a UI5 app

Details

Sources3
Added by handdiscovered herechecked
github.com/ui5-community/generator-ui5-projecttree, pushes, contributors, CIchecked
README.mdquoted, and what the entry declareschecked

Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.

Compatibility and provenance
discovered viaAdded by hand
first seen in the atlas
ecosystem and domainui5, developer-experience
Contributors20
Andreas KunzAlexanderHarald Gutbrodflx-rscgeorgbischoffDominik HeimMarius ObertLukas BöhmMarcel SchorkMarian ZeisMarius FreitagmatseNico SchoenteichLena HammererPeter MuessigTobias QueckTsvetelina PetrovaVolker BuzekMarco BeierZiyang Li

From the repository’s contributor list, .

History in the atlas1
  1. First seen.
For your agent
Ref
artifact:ui5-community-generator-ui5-project
JSON
/artifacts/ui5-community-generator-ui5-project.json
MCP
Connecting an agent