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.
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/clithis will install UI5 CLI globally on your laptop.
2. To verify the installation, run the following command
ui5 --versionIt 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
5. Now run ui5 init command, we have a error Could not find ‘webapp’ or ‘src’ / ‘test’ folders.
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.
8. Now run the ui5 init command, ui5.yaml file got created as per the setup instructions.
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
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
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.
14. UI5 demo application is running at “http:localhost:8080/index.html“
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! 🙏
