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.
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
- 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 build a .mtar archive
- Pre-build configurations for many target platforms
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.
Cloud Foundry HTML5 Application Repository
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.
Fiori Launchpad on Cloud Foundry
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 Cloud Foundry HTML5 Application Repository and, additionally, install a module that adds Fiori Launchpad resources to the HTML5 application 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.
- Install Yeoman and the generator plugin
npm install -g yo generator-easy-ui5
- Verify your installation
Additionally, I would recommend the following steps if you want to deploy the application to SAP Cloud Platform Cloud Foundry:
- Create a free SAP Cloud Platform Cloud account
- Set your environment up and connect to your Cloud Foundry endpoint
- Install the MultiApps CF CLI Plugin
How to use it
Bootstrapping a new UI5 project
- Scaffold your OpenUI5 project
- Answer the prompts to create your OpenUI5 project
- Run it locally
cd <your project name> npm start
- Deploy it to SAP Cloud Platform (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 generation of your project) and a new controller and route.
Create a custom control
Run the following command from your project’s root to scaffold a custom control.
Add a new model
Add a new component usage
This sub-generator will add a new component usage for component reuse to your manifest.
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 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).