Skip to content

SAP/generator-easy-ui5

Easy UI5 Generator

NPM version Build Status Dependency Status License Status REUSE status

Description

Easy UI5 (easy-ui5) 💙 is a Yeoman generator which enables you to create simple SAPUI5/OpenUI5-based web-apps and other UI5-related projects within seconds.

This generator has been created to simplify the creation of your UI5 prototypes. Now you can scaffold simple UI5 projects from the shell/terminal of your choice. The current best practices (such as async) are already baked into our templates so you don't have to worry about the definition of the metadata files.

The purpose of the project subgenerator is to guide you on your first steps with SAPUI5 and SAP BTP deployments. Once you are familiar with those technologies, you might want to tweak the projects to adapt them for productive use-cases (such as continuous deployment pipelines and full i18n).

⚠️ Starting with Easy UI5 v3, all templates will be outsource to repositories in the UI5 Community. This project is from now on a shell that will offer all generators hosted on that GitHub org. Easy UI5 will download and install these repositories when needed.

By default, it will download the repository generator-ui5-project which contains the templates that were previously integrated in Easy UI5 < 3.

Requirements

  • Get Node.js (:warning: version 18 or higher)

Download and Installation

  1. Install the generator
    npm install -g yo generator-easy-ui5
  2. Verify your installation to see if Yeoman has been installed correctly
    yo
    Make sure you see the easy-ui5 generator listed.

Bootstrapping a new UI5 project

Create your first UI5 App within a few seconds!

  1. Scaffold your UI5 project
    yo easy-ui5 project
    
  2. Answer the prompts to create your new project
  3. Run it locally
    cd <your project directory>
    npm start # or "yarn start"
    

Target platforms

During the prompting phase, the generator will ask on which target platform your app should run. Currently, the following options are available:

  • Static webserver
  • SAP BTP
  • SAP HANA XS Advanced
  • SAP NetWeaver

Have a look at this plugin project for more usage instruction and information about the available subcommands.

More generators

And this is just the start!

We made Easy UI5 extensible, so that the entire UI5 Community can build additional plugins to scaffold any UI5-related development activity.

By default, this generator comes with the project-creation-plugin but there are many others as well:

To download and use any of the plugins above, run the following command

yo easy-ui5 [project|library] # this is the name of the repositorty without the "generator-ui5-" prefix

Calling generators

Run the following command to see all subgenerators of a given plugin

yo easy-ui5 [project|library] --list

Once you decided on the subgenerator, run:

Run the following command to see all subgenerators of a given plugin

yo easy-ui5 [project|library] <sub-generator-id>

Proxy settings

If you are running Easy UI5 behind a coporate proxy, just use the default proxy environment variables for Node.js to configure your corporate proxy:

  • HTTP_PROXY: Specify the value to use as the HTTP proxy for all connections, e.g., HTTP_PROXY="http://proxy.mycompany.com:8080/".
  • HTTPS_PROXY: Specify the value to use as the HTTPS proxy for all connections, e.g., HTTPS_PROXY="http://proxy.mycompany.com:8080/".
  • NO_PROXY: Define the hosts that should bypass the proxy, e.g., NO_PROXY="localhost,.mycompany.com,192.168.6.254:80".

In addition, Easy UI5 also supports proxy configuration from the .npmrc configuration:

http-proxy=http://proxy.mycompany.com:8080/
https-proxy=http://proxy.mycompany.com:8080/
proxy=http://proxy.mycompany.com:8080/
no-proxy=localhost,.mycompany.com,192.168.6.254:80

This configuration is shared with npm itself since this proxy configuration is used to download the packages from npm.

Proxies can be passed as env variables or as npm config options. The highest precedence have the GLOBAL_AGENT_* env variables before the regular env variables followed by the npm configuration options, e.g.:

  1. env: GLOBAL_AGENT_HTTP_PROXY
  2. env: HTTP_PROXY
  3. npm: http-proxy
  4. npm: proxy

How to obtain 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 easy-ui5 generator equally.

Please follow our instructions if you would like to contribute.