Use generator-easy-ui5 to quickly create the engineering structure of SAP UI5 applications

The Github repository address of generator-easy-ui5:

https://github.com/SAP/generator-easy-ui5

This tool is designed to simplify the creation of SAP UI5 applications.

Install this tool using the following command line:

npm install -g yo generator-easy-ui5

After the installation is complete, execute the command line yo:

If you see the output of the above figure, the generator installation is successful.

Select Easy Ui5 and press Enter.

Error: unexpected token '.'

You should select @sap/fiori , and then display a creation wizard, answer the wizard's questions one by one, and press to enter the next wizard item.

The list of automatically generated files is as follows:


Make sure you see the message for Application generated successfully at the end:

Let's take a look at which files generator-easy-ui5 has helped us automatically generate.

devDependencies and dependencies in package.json:

"devDependencies": {
        "@ui5/cli": "^2.11.1",
        "@ui5/fs": "^2.0.6",
        "@ui5/logger": "^2.0.1",
        "@sap/ux-ui5-tooling": "1",
        "rimraf": "3.0.2"
    },
    "ui5": {
        "dependencies": [
            "@sap/ux-ui5-tooling"
        ]
    }

The script area has many fiori command lines, from @sap/ux-ui5-tooling :

The difference between script start and start-local is to use ui5.yaml or ui5-local.yaml :

"start": "fiori run --open 'index.html'",
"start-local": "fiori run --config ./ui5-local.yaml --open 'index.html'",

Run npm run start :

Successfully open the SAP UI5 page:


Open the ui5.yaml file and view the proxy server configuration:

specVersion: '1.0'
metadata:
  name: 'project1'
type: application
ui5Theme: sap_fiori_3
server:
  customMiddleware:
  - name: fiori-tools-proxy
    afterMiddleware: compression
    configuration:
      ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
      backend:
      - path: /sap/opu/odata
        url: http://localhost
      ui5:
        path: 
        - /resources
        - /test-resources
        url: https://ui5.sap.com
        version:  # The UI5 version, for instance, 1.78.1. Empty means latest version
  - name: fiori-tools-appreload
    afterMiddleware: compression
    configuration:
     port: 35729
     path: webapp

The meaning of this highlighted area is that if the url of the request initiated by SAP UI5 contains /resources or /test-resources , then the domain is automatically replaced with https://ui5.sap.com .

If we change ui5.sap.com to ui5.sap1.com, we will see the expected getaddrinfo ENOTFOUND ui5.sap1.com error:

Of course, we can't see that the request is from https://ui5.sap.com directly in the Chrome Developer Tools network tab:


https://ui5.sap.com/resources/sap-ui-core.js

With this proxy server, we don't have to introduce the CDN's SAP UI5 library in index.html , we can directly use the relative path resources/sap-ui-core.js :

More Jerry's original articles, all in: "Wang Zixi":