Skip to Content
Technical Articles

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’re 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. 

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 the metadata files.

Check out how easy it is

Feature list

  • Create a simple OpenUI5 project within seconds
  • Leverages the new UI5 tooling
  • Use the built-in scripts
    • To minify the Javascript code
    • To build a .mtar archive
    • To deploy the archive to SAP Cloud Platform Cloud Foundry
  • and more to come

How to get it

You can install the generator via npm (download Node.js first if you haven’t done this before).

  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 Cloud Platform Cloud Foundry:

  3. Create a free SAP Cloud Platform Cloud account
  4. Set your environment up and connect to your Cloud Foundry endpoint
    cf login
  5. Install the MultiApps CF CLI Plugin
  6. Download the Multi-Target Application Archive Builder

How to use it

Basic mode

  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 Cloud Platform (Make sure you set up your environment correctly)
    npm run deploy-to-cf

Add a new view

This sub-generator can be called from your project root to create a new view (if needed also with a new controller)

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

 

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 complimentary 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 Cloud Platform 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). 

2 Comments
You must be Logged on to comment or reply to a post.