Develop UI5 / Fiori App Using VS code. SAP

In this blog, I would like to spread awareness and share my experience of how we can easily start UI5 / Fiori app development locally using VS Code.

Step 1:

1. Install Node.js  – Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Link

2. Install VS Code – Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications Link.

Step 2:

Create a folder and open it in VS code.

In VS code go to Extensions(cntrl +shift+ X).

Search “Sap Fiori Tools” . and Install the Extension

This Extension for the development of the UI5/ Fiori application.

search ” UI5 Tools” and install

this Extension will create a local launchpad server for your application.

Step 3:

Open Command palette(ctrl +shift+p).

Search and open “Template Wizard”.

Select the generator as per your Requirement and click on Start.

*I will go with the sap Fiori application for the demo.

On the next screen, you can choose the application type from the drop-down and the floor plan for the app.

*I will go with the SAPUI5 freestyle and SAPUI5 Application for this demo.

on the next screen, we can choose Data Source and Service for our application from the drop down.

*  I am using Northwind service for this demo going with the option “Connect with an OData Service”.

and giving the URL of Northwind.

On Next Screen we can give the 1st view Name.

On Next Screen, give the project Details. And click on Finish.

It will Generate the project in our workspace.

Step 4:

We will just Put Some sample Code in Our Application To test.

Sample codes are added to view1.view.xml.

Step 5:

Start the UI5 Tools Server from the left side down Corner.

It will open a new Tab our default browser with the live server.

We can see the application which one is created in our ws.

we can also go to launchpad and launch our application.

we can see our application is running a launchpad with a live server.

Thanks for reading,