---
parser: v2
auto_validation: true
primary_tag: software-product>sap-btp--abap-environment
tags: [  tutorial>beginner, programming-tool>abap-development, software-product>sap-business-technology-platform ]
time: 15
author_name: Merve Temel
author_profile: https://github.com/mervey45
slug: abap-environment-vs-code
canonical_url: https://developers.sap.com/tutorials/abap-environment-vs-code
---

# Create a SAP Fiori App in Visual Studio Code and Deploy it to SAP BTP, ABAP Environment
<!-- description --> Create a SAP Fiori Elements app for a RAP business object from SAP BTP, ABAP Environment in Visual Studio Code and deploy it to SAP BTP, ABAP Environment.

## Prerequisites
  - You need an SAP BTP, ABAP environment [trial user](abap-environment-trial-onboarding) or a license.
  - You have completed [Develop a Fiori App Using the ABAP RESTful Application Programming Model (Managed Scenario)](group.abap-env-restful-managed).
  - Installation of:
    - [Git](https://git-scm.com/downloads)
    - [Node.js and VS Code](https://help.sap.com/viewer/454b7fb9aacd4e369e5be8f7e909d3ec/Latest/en-US/61383cac9de24b75a4e2b8c9d11e8af0.html)
  - You also need to install [Python](https://www.python.org/downloads/) for **Windows**.
  - Installation of [Extensions](https://help.sap.com/viewer/454b7fb9aacd4e369e5be8f7e909d3ec/Latest/en-US/61383cac9de24b75a4e2b8c9d11e8af0.html)


## You will learn  
  - How to create an SAP Fiori application
  - How to run an SAP Fiori application
  - How to deploy an SAP Fiori application

## Intro
>**HINT**: If you are not able to see the **Fiori Application Generator**, please install the generator again by opening the terminal and adding following: npm `install -g yo`.

---

### Create SAP Fiori application


1. Open Visual Studio Code and select **View** > **Command Palette**.

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app.png)

2. Search **Fiori: Open Application Generator** and select it.

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app2.png)

3. Select **SAP Fiori elements** as application type, **List Report Object Page** as `floorplan` and click **Next >**.

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app3.png)

4. Select **Data Source** and **Service**:

    - Data source: Connect to an SAP System
    - System: New System
    - System type: ABAP Environment on SAP Business Technology Platform
    - ABAP environment definition source: Upload a Service Key File
    - Service key file path: `<your_service_key>`
    - System name: `<your_system_name>`
    - Service: `<your_service_definition>`

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app5.png)

      Click **Next >**.

      You have downloaded the service key earlier in the SAP BTP Trial Cockpit.

5. Select **`TravelProcessor`** and click **Next >**.

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app6.png)

6. Add project attributes:

    - Module name: `ztravel_app_xxx`
    - Application title: Travel App XXX
    - Project folder path: `C:\Users\<your_user>\projects`
    - Add deployment configuration: Yes
    - Add FLP configuration: Yes

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app7.png)

    Click **Next >**.

7. Configure deployment:

     - Target: ABAP
     - Is this an SAP Business Technology Platform system? Yes
     - Target System URL: `<your_abap_system_url>`
     - Name: `ztravel_app_xxx`
     - Package: `ztravel_app_xxx`
     - Transport Request: `<your_transport_request>`
     - Deployment description: deployment xxx

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app9.png)

    Click **Next >**.

    >**HINT: If you want to copy your transport request, please do following:**  Open Eclipse, search your package **`ZTRAVEL_APP_XXX`** and open it. Open your transport organizer to see your transport request. Copy your transport request for later use. You can find your **transport request** underneath the **Modifiable** folder.
    >      ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy31.png)


8. Configure Fiori Launchpad:

     - Semantic Object: `ztravel_app_xxx`
     - Action: display
     - Title: Travel App XXX

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app10.png)

    Click **Finish**.

9. Now all files have been generated.

    ![app](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/app8.png)



### Start SAP Fiori application


1. Right-click **`ztravel_app_xxx`** and select **Open in Integrated Terminal**.

    ![start](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/start.png)

2. Start your application with `npm start` and press enter.

    ![start](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/start2.png)

3. Press **Go** and check your result.

    ![start](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/start3.png)



### Deploy SAP Fiori application


1. Open your terminal and enter `npm run deploy`. When prompted, check deployment configuration and press **y**.

     ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy6.png)

2. Now your application is deployed.

     ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy7.png)


>**HINT: If you want to update your SAP Fiori Launchpad configuration, then you can do following steps:**

>  1. Open your terminal, enter `npx fiori add flp-config` and press enter.
>     ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy.png)

>  2. Enter following:
     - Semantic object: `ztravel_app_xxx`
     - Action: display
     - Title: Travel App XXX
     - Subtitle: (press enter)  

>      ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy2.png)

>  3. Open `manifest.json` in your `webapp` folder.

>      ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy3.png)

>  4. Check your semantic object. It should be **`ztravel_app_xxx`**.

>      ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy4.png)

>  5.  Open Eclipse, search your package **`ZTRAVEL_APP_XXX`** and open it. Open your transport organizer to see your transport request. Copy your transport request for later use. You can find your **transport request** underneath the **Modifiable** folder.

>      ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy31.png)

>  6. Open your terminal, enter `npx fiori add deploy-config` and press enter.   
     Enter following:
     - Target: ABAP
     - SAP BTP System: Y
     - Target System URL: `<your_target_system_url>`
     - Name: (press enter)
     - Package: `ztravel_app_xxx`
     - Transport Number: `<your_transport_number>`

>    ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy5.png)

>    Your `yaml` file should be written after entering all information.




### Check BSP library and SAP Fiori Launchpad app descriptor item in Eclipse


  1. Open Eclipse and check the **BSP library** and **SAP Fiori Launchpad app descriptor item folder** in your package **`ZTRAVEL_APP_XXX`**. If you are not able to see BSP applications and SAP Fiori Launchpad app description items, refresh your package `ZTRAVEL_APP_XXX` by pressing `F5`.

   ![library](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/library.png)



### Create IAM App and business catalog


  1. In Eclipse right-click your package **`ZTRAVEL_APP_XXX`** and select **New** > **Other Repository Object**.

      ![iam](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/iam.png)

  2. Search for **IAM App**, select it and click **Next >**.

      ![iam](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/iam2.png)

  3. Create a new IAM App:
     - Name: **`ZTRAVEL_IAM_XXX`**
     - Description: IAM App

      ![iam](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/iam3.png)

      Click **Next >**.

  4. Click **Finish**.

      ![iam](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/iam4.png)

  5. Select **Services** and add a new one.

      ![iam](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/iam5.png)

  6. Select following:
      - Service Type: `OData V2`
      - Service Name: `ZUI_C_TRAVEL_M_XXX_0001`    

      ![iam](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/iam6.png)

      Click **OK**.

      **Save** and **activate** your IAM app.

  7. Right-click your package **`ZTRAVEL_APP_XXX`** and select  **New** > **Other Repository Object**.

      ![catalog](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/catalog.png)

  8. Search for **Business Catalog**, select it and click **Next >**.

      ![catalog](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/catalog2.png)

  9. Create a new business catalog:
     - Name: **`ZTRAVEL_BC_XXX`**
     - Description: Business catalog

      ![catalog](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/catalog3.png)

      Click **Next >**.

 10. Click **Finish**.

      ![catalog](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/catalog4.png)

 11. Select **Apps** and add a new one.

      ![catalog](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/catalog5.png)

 12. Create a new business catalog:
     - IAM App: `ZTRAVEL_IAM_XXX_EXT`
     - Name: `ZTRAVEL_BC_XXX_0001`

      ![catalog](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/catalog6.png)

      Click **Next >**.

 13. Click **Finish**.

       ![catalog](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/catalog7.png)

 14. Click **Publish Locally** to publish your business catalog.

       ![catalog](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/catalog8.png)



### Run SAP Fiori application


 1. Switch to Visual Studio Code and open the integrated terminal. Enter `npm run deploy`. When prompted, check deployment configuration and press **y**.

     ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy6.png)

 2. Press **CTRL** and click the following link to open the URL in a browser.

      ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy7.png)

 3. Log in to your system and press go to see your result.

      ![deploy](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-vs-code/deploy8.png)



### Test yourself


---