UI5 Tooling beginners guide

0
4574

Dear SAPLearners, in this blog post we will be learn on how to install UI5 CLI, a new UI5 Tooling.

UI5 Tooling

An open-source and modular tool chain to develop state-of-the-art SAP user interface applications based on the UI5 framework. You can read features about in their documentation here.

UI5 Tooling
UI5 Tooling

Prerequisites

  • You need to have Node.js (version 10 or higher ⚠️) installed.

Installing UI5 CLI

1. Open the command prompt or terminal and run the following command.

npm install -g @ui5/cli

this will install UI5 CLI globally on your laptop.

2. To verify the installation, run the following command

ui5 --version

It should display the version installed on your laptop.

You have successfully installed the UI5 CLI 👏. Next step is to create a sample UI5 application using CLI.

Create a SAPUI5 App

3. Create and navigate to a folder ui5-demo and run following command

ui5 init
UI5 Tooling Setup Step1

5. Now run ui5 init command, we have a error Could not find ‘webapp’ or ‘src’ / ‘test’ folders.

UI5 Tooling Setup Step2

6. As UI5 CLI does not provide us a command to create a folder structure like in SAP Web IDE Full Stack. Lets download the sample project from here.

7. After copying the webapp folder and its files into our folder ui5-demo.

UI5 Tooling Setup Step3

8. Now run the ui5 init command, ui5.yaml file got created as per the setup instructions.

UI5 Tooling Setup Step4

9. Now its time to choose the framework OpenUI5 or SAPUI5. I am going to choose SAPUI5 here but you can choose any of them as per your requirement.

Got confused what to choose the read the documentation here.

10. Run the following command.

ui5 use sapui5@latest
UI5 Tooling Setup Step5

11. Add the SAPUI5 libraries and themes we will be using in the project by using following command.

ui5 add sap.ui.core sap.m sap.f themelib_sap_fiori_3
UI5 Tooling Setup Step6

12. Hooray! 🎉 Now we have completed all necessary setup instructions, you are now using the UI5 Tooling in your project!

13. Execute ui5 serve to start a local development server.

UI5 Tooling Setup Step7

14. UI5 demo application is running at http://localhost:8080/index.html

UI5 Tooling Setup Step8

Conclusion

Congrats!! you have successfully learned to setup UI5 Tooling, a local UI5 development environment.

Please feel free to comment and let us know your feedback. Subscribe for more updates.

If you liked it ❤️, please share it! Thanks! 🙏