Technical Articles
Create UI5 Application using npm Commands
Introduction
In this blog post we will see how to create the ui5 application in the vs code through the npm (node package module). Before that need to install node and VS Code (Visual studio code). Below are the links to download node and VS Code
Node – https://nodejs.org/en/download/
VS Code – https://code.visualstudio.com/download
Creating UI5 Application using npm commands
To create the UI5 Application need to install the generator easy ui5. Create a folder in VS Code and open the Terminal and navigate to the current folder. Run the command in the terminal npm i generator-easy-ui5 . In the below image we can see that the easy ui5 got installed.
Installed easy ui5
Now we will install yomen generator globally by using the following command
npm install -g yo
Installed yomen generator
To verify that the yomen generator is installed correctly use the following command
yo
Follow the image for the configurations to create ui5 application.
Configurations
To run the Application Locally, Go to the created ui5 application with the cmd
cd <your project name>
npm start
In the above image we can see that the application is running in the 8080 port.
To create the View we need to run the command
Yo easy-ui5:newview
To create the Controller we need to run the command
Yo easy-ui5:newcontrol
To create the model need to run the command
yo easy-ui5:newmodel
To add new component need to run the command
Yo easy-ui5:newcomponentusage
UIVeri5 tests
This sub-generator will add a basic UIVeri5 test. It will ask you for test configuration and names of the suite and spec. You can add page objects now or later with another sub-generator.
Yo easy-ui5:uiveri5
This sub-generator will create a UIVeri5 page object and a new test that shows how to use the page object:
Yo easy-ui5:newuiveri5po
This sub-generator will create a UIVeri5 spec file:
Yo easy-ui5:newuiveri5spec
OPA5 tests
This sub-generator will add a basic opa5 test setup. You can add page objects now or later with another sub-generator.
Yo easy-ui5:opa5
This sub-generator will create an OPA5 page object and add it to your journeys:
Yo easy-ui5:newopa5po
This sub-generator will create an OPA5 journey and add it to your test page:
Yo easy-ui5:newopa5journey
Conclusion
In this post we have learnt how to create UI5 application and run it locally and we have seen how to create views, controllers, Models, components through the npm commands.