Skip to Content
Technical Articles
Author's profile photo Marius Obert

Introducing the easy-ui5 generator

Bootstrapping OpenUI5 projects can be very tedious and repetitive and involve tasks such as copying & pasting files/folders from one existing project to another. Many times you probably forget to update the best practices and dependencies to the most recent version, and then you need to edit all files manually… I say: NO MORE

In this blog post, I would like to introduce you to a new scaffolding tool I built during the last couple of months. 

Updates:

29th Jan 2021: Rebranding to SAP BTP

8th Apr 2021: Released version 3 of easy-ui5. Please note that some commands changed. You’ll always be able to find the latest commands and instructions on the GitHub page of the default plugin.

What is easy-ui5?

The aim of this (yeoman-based) generator is to simplify the creation of OpenUI5 prototypes. The tool helps you to 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 metadata files.

Update: 30th October: I just published the latest version of this tool. Now you can deploy your web apps to XSA and the Cloud Foundry HTML5 Application Repository as well.

Update: 11th March: I updated the post according to the latest version (1.3) and the new target platforms and sub generators that come with it. And a special thanks goes out to Jakob Marius Kjær for this pull request and sub-generators!

Check out how easy it is

Feature list

  • Create a simple OpenUI5 project within seconds
  • Leverages the new UI5 tooling
  • Supports the new Fiori 3 themes Quartz Light and Quartz Dark
  • Use the built-in scripts
    • To minify the Javascript code
    • To build a .mtar archive
  • Pre-build configurations for many target platforms

Target platforms

Static webserver

This is the most basic option. Choose this option if you want to deploy the web app in your custom environment or host it on an arbitrary server.

Application Router @ Cloud Foundry

This is the most basic way to deploy the web app in Cloud Foundry-based environments. Besides the basic UI5 project, the generator will add an Approuter node.js-module that serves the web app.

Application Router @ SAP HANA XS Advanced

This is the standard way to deploy the web app in SAP HANA XSA-based environments. Besides the basic UI5 project, the generator will add an Approuter node.js-module that serves the web app.

SAP HTML5 Application Repository service for SAP BTP

This option is a more sophisticate way to serve the web app from Cloud Foundry-based environments. The generator will include all modules that are included in the Application Router @ Cloud Foundry and, additionally, install a module to upload the web app to the HTML5 application repository during deploy-time. You can watch this presentation to learn more about the benefits of using the HTML5 application repository.

SAP Launchpad service

Use this option if you would like to develop a Fiori Launchpad application that should run on Cloud Foundry. The generator will include all modules that are included in the SAP HTML5 Application Repository service for SAP BTP and, additionally, install a module that adds Fiori Launchpad resources to the HTML5 application repository.

SAP NetWeaver

Use this option if you want to deploy your application(s) to the SAP NetWeaver ABAP Repository.

How to install it

You can install the generator via pm. Download Node.js first if you haven’t done this before, or even better: Set up your local dev environment.

  1. Install Yeoman and the generator plugin
    npm install -g yo generator-easy-ui5
  2. Verify your installation
    yo

    Additionally, I would recommend the following steps if you want to deploy the application to SAP BTP, Cloud Foundry environment:

  3. Create a free SAP BTP Trial account
  4. Set your environment up and connect to your Cloud Foundry endpoint
    cf login
  5. Install the MultiApps CF CLI Plugin

How to use it

Bootstrapping a new UI5 project

  1. Scaffold your OpenUI5 project
    yo easy-ui5
  2. Answer the prompts to create your OpenUI5 project
  3. Run it locally
    cd <your project name>
    npm start
  4. Deploy it to SAP BTP, Cloud Foundry runtime (Make sure you set up your environment correctly)
    npm run deploy

Sub-generators to avoid recurring tasks

Add a new view

This sub-generator will create a new view (of the same type you specified during the creating of your project) and a new controller and route. If you have OPA5 tests, you can add a corresponding page object now or later with another sub-generator.

yo easy-ui5:newview

Create a custom control

Run the following command from your project’s root to scaffold a custom control.

yo easy-ui5:newcontrol

Add a new model

This sub-generator will create a new model in your manifest. Currently, JSON and OData v2 models are supported with various configuration options.

yo easy-ui5:newmodel

Add a new component usage

This sub-generator will add a new component usage for component reuse to your manifest.

yo easy-ui5:newcomponentusage

UIVeri5 tests

This sub-generator will add a basic UIVeri5 test. It will ask you for test configuration and names of the suite and spec. You can add page objects now or later with another sub-generator.

yo easy-ui5:uiveri5

This sub-generator will create a UIVeri5 page object and a new test that shows how to use the page object:

yo easy-ui5:newuiveri5po

This sub-generator will create a UIVeri5 spec file:

yo easy-ui5:newuiveri5spec

OPA5 tests

This sub-generator will add a basic OPA5 test setup. You can add page objects now or later with another sub-generator.

yo easy-ui5:opa5

This sub-generator will create an OPA5 page object and add it to your journeys:

yo easy-ui5:newopa5po

This sub-generator will create an OPA5 journey and add it to your test page:

yo easy-ui5:newopa5journey

wdi5 test framework

There’s a sub-generator available to add

  • wdi5 as the test framework
  • a basic wdi5 config and
  • a sample test file

to the UI5 application by easy-ui5.

cd yourEasyUI5-project

yo easy-ui5:wdi5


I hope this tool will save you some time and make your life easier!

I’d be more than happy if you could provide feedback about this generator (either here or on GitHub).

 

Disclaimer: This is NOT a replacement for the Web IDE of any kind. The generator should be seen as a complementary offer for developers who prefer working from the command line and their own editors/IDEs.

The purpose of this generator 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). 

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nabheet Madan
      Nabheet Madan

      Very nice, much needed. Similar kind of CLI based tooling work with Angular, Ionic etc. seamlessly.

      Author's profile photo Michelle Crapo
      Michelle Crapo

      Nice!  Thank you for the blog and the tool to add to my tool belt.

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Hi, Marius.

      Thanks a lot for easy-ui5 generator, he is very suitable.

      I made my own(more simple and smaller) generator based on yours, but i don't understand how to debug generators?

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Aleksandr,

      that sounds great! I'm happy that I could inspire you. Have a look at this guide to learn generator debugging.

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Thanks, Marius.

      I found the command below earlier:

      npx --node-arg=--inspect yo <generator> [arguments] 
      
      
      But i don't understard how it works.
      I get an error "ERROR: --node-arg/-n can only be used on packages with node scripts."
      
      Can you give me example in vscode, maybe i need some argument?
      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      In case you run your generator with

      yo easy-ui5

      You need to execute

      npx --node-arg=--inspect yo easy-ui5
      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Thanks Marius

      Author's profile photo Anil k
      Anil k

      Thank you for the great post. Working on CAP  application, trying to add UI5 app, FLP Launchpad to it, went through various ways to add UI5 code from your post . Have trouble accessing portal site , getting " unauthorized  or 500 " error  accessing UI  . ( tried with assigning all roles required, still getting same error)

      "GET request to /cp.portal/site completed with status 500 401 - {\"error\":\"unauthorized\",\"error_description\":\"Bad credentials\"}"

       

      But it works fine with ui5 code embedded  in standalone approuter .

      Am I missing anything for multitenant apps?

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Easy-ui5 is no longer using the redirect via "cp.portal". I assume the problem you are facing is not related to the generator - sorry.

      Author's profile photo Francesco Sferruggia
      Francesco Sferruggia

      Hello Marius and thanks for this.

      Is there anyway I could just create a project by providing a folder path in my pc?

      Thanks alot