SAP / open-ux-tools

Open UX Tools The Open UX tools project aims to provide open source modules that make the development of SAP Fiori applications more efficient. The project is maintained by the same team that is responsible for SAP Fiori tools and driven by the SAP community. The main goal of this project is to collaborate with the community to create transparency and therefore increase the adoption of our tools. **Collaboration**: SAP has a great and active development community that is eager to help improve SAP products. With SAP Fiori tools, we have collaborated with stakeholders using roundtables, surveys, and usability testing. We have even collaborated using SAP's incident management systems, connecting with users that did not just report issues but also debugged and identified the root cause. With Open UX tools, we want to take this collaboration to the next level by empowering users to contribute findings, fixes, and improvements to the project. **Transparency**: Anyone can inspect the sources, check for inconsistencies or problems, or get inspired to enhance the tools for the SAP Fiori community. Transparency matters to us. It builds trust in our tools and promotes more open communication. **Adoption**: The first consumer of these modules is SAP Fiori tools but every module is designed to be reusable by anyone building any kind of tools to develop SAP Fiori applications. This may be other open source projects or internal projects with very specific use cases. With our initial set of modules, we want to enable generator/scaffolding projects to use building blocks to create a common project structure across the SAP ecosystem. Modules Our long-term vision is to completely transition our SAP Fiori tools to open source. This is not an easy endeavor due to the size of the code base and dependencies to other not-yet-open-sourced modules. If you would like to better understand how we started and how we are planning to move forward, please have a look at our blog posts History and vision of the Open UX tools and The Open UX Tools Journey Continues. As a starting point, we have extracted the templates for generating SAP Fiori applications. The templates have been dissected into small but easy to use building blocks that are simple to combine. We then continued adding the most important UI5 tooling middlewares. The repository also contains reusable helper modules e.g. to modify UI5 tooling configuration files. The image below gives an overview of the currently included modules and their dependencies. It also shows the known consumers of these modules, the SAP Fiori generator ( ) and the easyUI5 open source project ( ). The repository contains no private modules i.e. all modules are published to npmjs.com under the scope . The name of the published modules (without scope) matches the folder name in e.g. is published as . Additionally, we have the folder containing show case implementations using multiple of our modules together. Requirements Everything is released as node modules requiring node with a version matching . Contributing Please check the Development Conventions and Guidelines document as well as the Development Setup section in this document. Development Setup Local Development To install globally using , run the following: More information on pnpm installation options can be found here. GitHub Codespaces To open and develop using GitHub Codespaces: • Expand the dropdown '<> Code' button on the github repository page • Select 'Codespaces' tab • Press the 'Create codespace on main' button to create a new GitHub Codespace based on the configuration in the file VS Code Development in a Container To use VS Code and develop in a container: • Install docker • Install VS Code or VS Code Insiders edition • Install the Dev Containers VS Code extension or the Remote Development VS Code extension pack Open currently opened workspace in dev container using the command . This will open a new window using the Dev Containers extension and the configuration in the file Alternatively, you can clone the repository in a container using the command and paste the repository URL. More information on VS Code development in a container can be found here Install dependencies To install and , run following command at root of the repository: Build packages To transpile the packages, run the following command at the root of the repository or in the individual package: Format sources using To format sources, run the following command at the root of the repository or in the individual package: Run linting of sources using To run linting of sources, run the following command at the root of the repository or in the individual package: To fix linting errors that can be fixed automatically, run the following command at the root of the repository or in the individual package: Run unit tests in packages To run unit tests using , run the following command at the root of the repository or in the individual package: **Note**: if the test run fails due to dependency issues, run in the root of the repository again to make sure all projects are up-to-date. Debug packages When analyzing a problem, it is helpful to be able to debug the modules. How to debug them depends on the IDE you are using. In this section, it is described how you could debug with VSCode. Each of the packages has an extensive set of unit tests covering as many as possible different scenarios, therefore, as a starting point for debugging, it is a good idea to use the tests. The easiest (but not the only) way to debug a specific test in VSCode is to open a and then go to the package that needs to be debugged. Using the debug terminal, execute all tests with or a specific one, e.g. execute in the directory ( ). When running either of the commands in the debug terminal, breakpoints set in VSCode will be active. Additionally, for the modules it is sometimes helpful to manually inspect the generated output of the unit tests on the f…