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.
Now we will install yomen generator globally by using the following command
npm install -g yo
To verify that the yomen generator is installed correctly use the following command
Follow the image for the configurations to create ui5 application.
To run the Application Locally, Go to the created ui5 application with the cmd
cd <your project name>
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
To create the Controller we need to run the command
To create the model need to run the command
To add new component need to run the command
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.
This sub-generator will create a UIVeri5 page object and a new test that shows how to use the page object:
This sub-generator will create a UIVeri5 spec file:
This sub-generator will add a basic opa5 test setup. You can add page objects now or later with another sub-generator.
This sub-generator will create an OPA5 page object and add it to your journeys:
This sub-generator will create an OPA5 journey and add it to your test page:
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.