On April 1st I talked about the “UI5 Tooling – a modern CLI-based development experience” in a SAP Community call. Besides explaining the UI5 Tooling in general, I showed how to grab a UI5 application from SAP Web IDE and how to configure it to run it locally with the UI5 Tooling.
This blog explains the individual steps to you to make the same experience.
Approximately one year ago, the SAP Web IDE switched to use the UI5 Tooling to build UI5 projects. Today, all UI5 projects created with the SAP Web IDE include the proper configuration to use the UI5 Tooling for the build process. As the SAP Web IDE comes with an integrated preview based on the HTML5 runtime, the development server of the UI5 Tooling is not required here. But when grabbing projects from SAP Web IDE and running them locally, the development server is mandatory. Compared to the HTML5 runtime, the UI5 Tooling just provides access to the UI5 resources and doesn’t provide a proxy to access backend services. But without using mockdata, such a proxy is needed.
Last year, at the UI5con at SAP, vobu approached me and asked for a proxy as part of the UI5 Tooling. I asked Volker what kind of proxy he needs: a simple proxy, an AppRouter, a HTML5 runtime router, …? All proxies are somehow specific to their platform, coming with different configurations and IMO the UI5 Tooling team will never satisfy all demands. But I offered Volker to help him to write a proxy and to get started with the extensibility of the UI5 Tooling demonstrating the task and middleware extensibility. This was the kick-start for the UI5 Ecosystem Showcase repository – a repository to demonstrate how easy the UI5 Tooling can be enhanced with own custom tasks and middlewares.
UI5 Ecosystem Showcase
The UI5 Ecosystem Showcase repository contains several ideas to improve the UI5 development experience by leveraging open-source tools. The extensibility concept of the UI5 Tooling allows to integrate those tools easily. So, the repository step by step grow to integrate custom tasks to e.g. transpile ES6 to ES5 code by using Babel or to provide custom middlewares to get a livereload of the browser in case of changes in the project sources as well as a simple HTTP proxy to tunnel backend services. All those features can be combined and used for UI5 development to come to a modern development experience!
A real-life example: Local UI5 development with the UI5 Tooling
Now, let’s start with some hands-on and let’s make our hands dirty. Every UI5 developer should make this experience to feel how good local UI5 development can be already today. Keep in mind, the SAP Web IDE still provides a lot of value and benefits with its wizards, tools and integration into various SAP platforms. But IMO it should be seamlessly possible to either develop a UI5 application in SAP Web IDE and locally in e.g. Visual Studio Code together with the UI5 Tooling.
Before we start, we need to ensure that our computer is setup properly. Node.js 10+ should be installed and configured properly.
In the following steps enter Object Collection: Customers, Object Collection ID: CustomerID, Object Title: CompanyName, the rest leave empty.
Now your UI5 application has been created in your local file system.
Step 2: Updating the project dependencies
After following one of the options of the previous step, we should validate whether we need to update the project dependencies of the created UI5 application. To update the project dependencies, we can use the open-source tool npm-check-updates. This tool can be installed via:
npm install -g npm-check-updates
After the installation of the tool, we can run:
to upgrade the project dependencies in the package.json. Once the project dependencies are upgraded run:
to prepare the project for a first run. The project can be started with the command:
npx ui5 serve -o index.html
Although the development server starts technically, there are a few things missing to make the UI5 application to run properly (e.g. the SAPUI5 resources).
Step 3: Setting up a proxy to access the SAPUI5 resources
To access the SAPUI5 resources in the UI5 application we can simply use the simple proxy middleware from the UI5 Ecosystem Showcase. I can be installed as a dev dependency by running the following command:
npm install ui5-middleware-simpleproxy --save-dev
(if the project has been generated with Yeoman the simple proxy middleware is already installed).
Option A) UI5 application created by SAP Web IDE
For the project created with the SAP Web IDE, we need to add the ui5-middleware-simpleproxy as ui5/dependencies in the package.json:
Option B) UI5 application created by Yeoman generator
If the project has been created with the Yeoman template, we need to add the following configuration to the server/customMiddleware section in the ui5.yaml (just include the first middleware entry and put it before the already existing ui5-middleware-simpleproxy entry):
But be careful with yaml – the indentation is pretty important.
Now the application should start properly and load the SAPUI5 resources via the proxy middleware. But still the UI5 application created with SAP Web IDE will fail to load its data since there is no proxy configured which tunnels the requests to the Northwind OData Service.
Step 4: Setting up a proxy to tunnel the Northwind OData Service
This step is only needed for the project created by SAP Web IDE. The project created with the Yeoman generator already includes the configuration to connect to the Northwind OData Service.
In the project created with SAP Web IDE open the ui5.yaml and add the following configuration (just include the second entry for the OData service into the ui5.yaml):
Now it’s the time to validate that the project starts locally. To ensure that all project dependencies are installed, just run:
in the UI5 application again. Now you can start the development server by running:
npx ui5 serve -o index.html
Now you should see the application running and the data being loaded from the Northwind OData Service.
Step 6: Add the livereload middleware
The livereload middleware is watching to changes of the sources in the file system. Once a source file has been modified the livereload middleware reloads the browser. Add the livereload middleware with the following command:
npm install ui5-middleware-livereload --save-dev
Afterwards in the package.json ensure to list the ui5-middleware-livereload in the ui5/dependencies (just add the last entry):
Now you can start your development server again with the command:
npx ui5 serve -o index.html
When you modify your sources and immediately get an update in your running application (remark: in case you face issues with livereload, maybe your html page was cached before, just ensure to reload the html page properly).
Step 7: Use the UI5 Tooling 2.0 to consume SAPUI5 from NPM
With the availability of SAPUI5 on NPM and the UI5 Tooling 2.0 we finally can consume SAPUI5 as dependencies. Therefore, the UI5 Tooling implemented an own frontend package manager to overcome the versioning issue in the SAPUI5 distribution layer. The details and reasoning behind this decision can be read in the UI5ers Buzz #49: The UI5 Tooling and SAPUI5 – The Next Step.
Let’s experience it live – we now remove the ui5-middleware-simpleproxy and migrate to specVersion: ‘2.0’ in the ui5.yaml:
In case of the project has been created with the Yeoman template, open the index.html and change the bootstrap URL from "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" to "resources/sap-ui-core.js". After starting the development server with:
npx ui5 serve -o index.html
the UI5 resources are loaded from the local framework dependencies configured in the ui5.yaml.
Step 8: Explore the UI5 Ecosystem Showcase repository and add more middlewares or tasks
Get familar with the UI5 Tooling 2.0 and the new capabilities to consume SAPUI5 dependencies from NPM. Play around with the available tasks and middlewares and try to combine them for your local UI5 development.
Help us to spread the word and share with other UI5 developers that you can also have a great and modern development experience for UI5 development.