How to start developing a UI5 app?
There are a few opportunities to start with talking about setting up a UI5 application.
We like the template ideas from SAP and their way to provide templates via the “Template Wizard“. That’s a good starting point and SAP is taking care about maintaining always newest stuff inside their templates.
We also do share our CIT template for UI5 apps and some thoughts on why we do recommend our template for beginners:
- It has “our” own approuter inside
- There is a gitlab and a github pipeline as example existing
- The webapp folder contains a simple ui5 webapp as dummy, showing us a list with entries from our (local) model
- It’s using ui5-tooling. The best way to start for new (and experienced) UI5 developers! Check out this great post to get more background knowledge about it.
Some first words about this template app
There are tons of blog out there on the web and on the SAP Community, telling and coaching you through UI5 and beginner guides or tutorials exist too. So I can recommend to click on these hyperlinks checking out what’s already there and how to get more UI5 knowledge. But I want to highlight one thing:
Do not waste your time yet and do not check out the approuter (this module is routing requests from your app to different targets – it routes. That’s it for now!) details and npm behaviours at this initial time of your first app.
- Check out the Model-View-Controller (MVC) principles and how the template app is using this approach
- Subscribe to Business Application Studio (BAS) and provide access to your developers
- Create a new space and add all developers as space-members, please.
Get your hands dirty - Start with BAS
It’s good to start with Business Application Studio (BAS) as your IDE as it has a lot of features and tools already on board preinstalled. You can select the different tools on your own within a space setup.
Create your dev space with Fiori capabilities and give it a name before you click “Create Dev Space”
Press the button “Clone Repository” and enter the URL of your fresh created repository.
Type into your terminal “npm install”.
Your BAS IDE is now loading necessary dependencies of ui5-tooling (and other modules) for you and stores them inside the (new) folder “node_modules”. This folder will stick on your IDE and will not be (up-)loaded into the repository. This is “configured” in the “.gitignore” file (just if you’re interested open this file, it’s distraction again).
Okay, it’s running locally on your IDE. Nice! Good job!
Your next step could be setting up a CI/CD pipeline to check on your own devOps strategy. Therefore we provide some cool out-of-the-box pipelines for you. Check them out here.