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.