Skip to Content
Technical Articles

Develop SAP UI5 Apps and deploy to ABAP repository using Visual Studio Code

Hello Everyone

This Blogs will helps you to create SAP UI5 Apps using Visual Studio Code.

If you are new to Visual Studio (VS) Code. You can follow my below my blogs and set up and configuration.

Installing Visual Studio Code and Configuring SAP Extensions in Visual Studio Code

 

To create SAP UI5 App, below are some of the pre-requisite.

Step 1: Create a folder, open application folder in Visual Studio Code and click Ctrl+Shift+~ to open Terminal

Step 2: Install Generators.

  npm install -g yo @sapui5/generator-sapui5-templates

 

Step 3: Enter the command yo @sapui5/sapui5-templates to choose the SAP UI5 template

  1. Enter module name
  2. Enter module namespace
  3. Select template – you can navigate and select using up and down arrows and enter
    1. SAP Fiori Worklist Application
    2. SAP Fiori Master-Detail Application
    3. SAP Fiori Worklist Application OData V4

              4. Enter remaining details like Title, Description and other details as shown in below screen

 

 

Step 4: Once the project created install the dependencies using npm install in Terminal

 

Step 5: Now run the application using below command

   npx ui5 serve -o test.html

Click on “test/flpSandbox.html

 

Now application will be launched as shown below and click on the list item to view item detail

 

Now application will be launched as shown below and click on the list item to view item detail

Step 6: Let us build app using ui5 build, and then dist folder will be created in the root, which we can deploy to ABAP repository.

Step 7: We can deploy app to the ABAP repository using nwabap-ui5uploader. Let us install this locally to out project.

npm install nwabap-ui5uploader –save-dev

Step 8: Now create .nwabaprc in the root folder with the below properties

{
    "base": "./dist",
    "conn_usestrictssl" : false,
    "conn_server": "http://<hostname>:<port>/",
    "conn_client" : "client",
    "conn_user": “UserName”,
    "conn_password": “Password”,
    "abap_package": "$TMP",
    "abap_bsp": "ZVSCODE_APP",
    "abap_bsp_text": "UI5 upload through VSCode App"
}

Step 9: Add “deploy”: “npx nwabap upload” in the package.json.

Step 10: Now let us deploy to ABAP repository using npm run upload

 

 

Hope you people like this blog post 🙂

Feel free to comment

 

 

Refer my blogs on VS Code

Developing SAP Fiori App using SAP Fiori Tools in Visual Studio Code

Access SAP HANA records from VS (Visual Studio) Code

 

Regards,

Sai Nithesh Gajula

18 Comments
You must be Logged on to comment or reply to a post.
  • Hey Nitesh,

     

    First and foremost, thank you so much for sharing this information. Very helpful as i am searching to use Visual Studio Code for all my Dev work.

    Quick one: searching for npm modules, there’s quite a few related to SAPUI6 and OpenUii5 development – any further helper modules you would recommend, and perhaps some tutorial on how to use them?

    Thanks!

    Adam

  • Fantastic Blog – Just some feedback for uploading to on-premise – you might want to update the blog?

    • In file  “.nwabaprc”, after copying the lines from the browser, I had to replace the double quotes around the user ID and password
    • I had to execute npx ui5 build -a  before npm run deploy

    Again, many thanks for this !

    • I also have to use command –  ‘npx ui5 build -a’  to build my ‘dist’ folder for the application. Command ‘ui5 build’ did not work for me. I only installed ‘SAP Fiori Tools’ extensions in my local VS code. This question and the entire blog helped me a lot in building my application.

  • Hey Nitesh,

     

    thank you very much for this Blog!

    I have a question and a small problem:

    (1) Is it also possible to use other templates than the predefined ones? I would like to use the normal SAPUI5 template.

    (2) When I run the command npx ui5 serve -o test.html I´am getting the message “The baseUri test is not valid”:

    Can you help me with that?

     

    thanks and regards,

    Maxim

    /
    • Thanks Maxim 🙂

      1. You can use or change the structure as normal UI5 template.
      2. Please check the baseURI provided in ui5.yaml file. Please find sample below.
      server:
        customMiddleware:
        - name: ui5-middleware-simpleproxy
          mountPath: /srv/
          afterMiddleware: compression
          configuration:
            baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/

      Regards,

      Sai Nithesh

    • nwabap-ui5uploader is 3rd party package and is not maintained anymore.

      @sap/abap-deploy is official sap package.

      Every sap official package starts with ‘@sap’.

       

  • Excellent blog Sai Nithesh.

    I was exactly looking for this info and thank you so much for publishing this.

    Keep posting more similar ones!

     

    Regards,

    Subbaiah Choudary Kotha