UI5 Build and Development Tooling
This is a Pre-Alpha release!
The UI5 Build and Development Tooling described here is not intended for productive use yet. Breaking changes are to be expected.
- ui5-cli: UI5 Command Line Interface, utilizing all of the following modules
- ui5-builder: Modules for building UI5 projects
- ui5-server: Modules for running a UI5 development server
- ui5-fs: UI5 specific file system abstraction
- ui5-project: Modules for building a UI5 projects dependency tree, including configuration
- ui5-logger: Internal logging module
- Node.js (version must be 8.3 or higher
⚠️ ) - Optional: Yarn (yarnpkg.com)
Yarn is currently required when working with the OpenUI5 main repository. See FAQ: What's the thing with Yarn?
Apparently, the modules that make up the UI5 Build and Development Tooling are not yet available on npm. See FAQ: Where are the npm packages?
# Clone the repository
git clone https://github.com/SAP/ui5-cli.git
# Navigate into the repositroy
cd ui5-cli
# Install all dependencies
npm install
# Link the module globally
npm link
# Test
ui5 --help
# This should output something like: Usage: ui5 <command> [options]...Checkout the OpenUI5 Sample App (ui5-tooling branch) featuring a full blown How-to to play around with the UI5 Build and Development Tooling.
You can easily check whether or not a project (application or library) can already be used with the UI5 Build and Development Tooling by looking for a ui5.yaml file in the projects root directory.
This file (with some exceptions) is required for all projects and their dependencies (e.g. reuse libraries) to use them in the UI5 Build and Development Tooling.
If your project is not setup for use with the UI5 Build and Development Tooling yet, follow these steps:
-
If your project does not have a
package.jsonfile yet, let npm generate itnpm init --yes
-
Generate the ui5.yaml file
ui5 init
-
Install npm dependencies required for your project# npm install @openui5/sap.ui.core @openui5/themelib_sap_belize [...]⚠️ Note: This is not yet possible (see FAQ: Where are the npm packages?).
Please follow Linking Projects instead to create local links for your projects dependencies. You still need to add all dependencies to your projectspackage.json. -
If you are using Git or similar version control, commit
package.jsonandui5.yamlto your repository
Questions? Check the FAQ!
You would like to work on an application project and one or more of its dependencies at the same time? We got you covered!
By leaving dependency management up to the tool of your choice (see FAQ: Why package.json? / Why npm?) you have a variety of choices.
Let's have an example with Yarn, an application and a reuse library:
Example: Your directory structure
my-app/
\_ node_modules/
\_ webapp/
\_ ui5.yaml
\_ package.json
my-reuse-library/
\_ node_modules/
\_ src/
\_ test/
\_ ui5.yaml
\_ package.json
In its package.json, my-app should already define a dependency to my-reuse-library. So after running the yarn command, a copy of the "my-reuse-library"-package should be retrieved from the package registry and added to my-app's node_modules/ directory.
Now all you need to do is replacing this copy of my-reuse-library package with a link to the my-reuse-library project located somewhere on your computer. In this example it is right next to my-app, but that doesn't really matter.
First, in the directory of the my-reuse-library project, create a global link:
yarn linkThen, in the my-app direcotry, use that link to replace the registry package:
yarn link my-reuse-libraryNote: "my-reuse-library" is the name defined in the package.json. Not necessarily the directory or ui5.yaml name
That's it. You can check whether the linking worked by executing ui5 tree in the my-app directory and looking for the path attributes in its output:
├─ id: my-app
├─ version: 1.0.0
├─ path: /my-app
└─ dependencies
├─ 0
│ ├─ id: my-reuse-library
│ ├─ version: 1.0.0
│ ├─ path: /my-reuse-library
│ └─ dependencies
[...]
- Clone the OpenUI5 repository and navigate into it
git clone [email protected]:SAP/openui5.git cd openui5/
- Install all dependencies and create links between the OpenUI5 libraries (see FAQ: What's the thing with Yarn?)
yarn
- Run the OpenUI5 testsuite
cd src/testsuite/ ui5 serve -o /index.html
The UI5 Build and Development Tooling contain a webserver to serve the project via HTTP/2 protocol.
ui5 serve --h2This will require an SSL certificate. You will be guided through the automatic generation process.
One of the key features of the UI5 Build and Development Tooling is its modularization. This allows for easy integration into other Node.js based tools and frameworks with a fairly low footprint.
The UI5 Build and Development CLI focuses on providing the best possible workflow for straight forward, best practice UI5 application and library development.
But if your project requires some additional build steps. If you already came up with your own set of tools to build and develop. Or if you want to define custom workflows, maybe with the help of task runners like Grunt or Gulp. Then you can make use of various modules that build up to the UI5 Build and Development Tooling.
Please check our Contribution Guidelines.
Please follow our Contribution Guidelines on how to report an issue.
Currently, the tooling can only resolve dependencies defined in a package.json file. This might change in the future by adding Translators for additional dependency management systems.
To manage your dependencies you can use almost any Node package manager that relies on package.json files. Popular ones are npm, yarn and pnpm.
The UI5 Build and Development Tooling resolve dependencies (almost) the same way Node.js does when executing a require statement.
In a couple of guides we refer to the yarn node package manager. This is because it offers functionality that the otherwise prefered npm package manager is currently lacking of. Namely the workspace setting which is currently used in the OpenUI5 (mono-)repository. Note that npm might add this feature in the future.
If you do not plan to work with OpenUI5 you might as well use npm or any other node package manger (see FAQ: Why package.json? / Why npm?. But keep in mind that linking the same module with npm and Yarn might lead to issues. Also, Yarn can't work with links created by npm and vice versa.
Apparently, the modules of the UI5 Build and Development Tooling as well as the OpenUI5 libraries are not yet available on the public npm registry. We are working on publishing them as soon as possible. Stay tuned!
Please check our Contribution Guidelines.
Please follow our Contribution Guidelines on how to report an issue. Or chat with us in the #tooling channel of the OpenUI5 Community Slack
This project is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.