Create a SAP Fiori App and Deploy it to SAP BTP, Cloud Foundry environment

1. Log in to SAP BTP Trial cockpit and click Enter Your Trial Account.

   

2. Select your subaccount trial.

   

3. Select Service Marketplace and search for SAP Business Application Studio and select it.

   

1. Create a new dev space: - Name: Managed_App_Router - Type: SAP Fiori

   Click **Create Dev Space**.
   

   

2. Click Managed_App_Router.

   

3. Select Open Folder.

   

4. Select projects and click Open.

   

1. Select View > Find Command.

   

2. Search for Open CF: Application Router Generator and select it.

   

3. Create MTA project:

   • MTA ID: ztravel_app_xxx
   • MTA description: Travel App XXX
   • Add router module: Managed Approuter

Click **Finish**.

  ![MTA project](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-deploy-cf/mta3.png)

5. Check your result.

   

1. Select View > Find Command.

   

2. Search for Login to Cloud Foundry and select it.

   

3. Press Enter to set your API endpoint.

   

4. Enter your email address and press Enter.

   

5. Enter your password and press Enter.

   

6. Select your global account.

   

7. Select your dev space.

   

8. Now you are logged in and your organization and space have been set.

   

1. Select View > Find Command.

   

2. Search for Open Application Generator and select it.

   

3. Select SAP Fiori elements as application type and List Report Object Page as floorplan.

Click **Next >**.

  ![Fiori application](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-deploy-cf/fiori3.png)

4. Configure data source, system and service:

   • Data source: Connect to a SAP System
   • System: ABAP Environment on SAP Business Technology Platform
   • ABAP Environment: default_abap-trial
   • Service: ZUI_C_TRAVEL_M_XXX(1) - OData V2

   Click Next >.

   

5. Select TravelProcessor and click Next >.

   

6. Configure project attributes:

   • Name: ztravel_app_xxx
   • Title: Travel App XXX
   • Description: A Fiori application.
   • Project folder path: /home/user/projects/ztravel_app_xxx
   • Add deployment configuration: Yes
   • Add FLP configuration: Yes
   • Configure advanced options: No

   Click Next >.

   

>**HINT**: Make sure, you have selected your **MTA project** in the **folder path**.

7. Configure deployment:

   • Target: Cloud Foundry
   • Destination Name: <your_destination_system_url>

   Click Next >.

   

8. Configure SAP Fiori Launchpad:

   • Semantic Object: ztravel_app_xxx
   • Action: maintain
   • Title: Travel App XXX

   Click Finish.

   

Check your result

1. Right-click your SAP Fiori Application ztravel_app_xxx and select Open in Terminal.

   

2. Enter npm run start to run your application.

   

3. Click Go.

   

4. Check your result.

   

1. Right-click your mta.yamlfile inside your SAP Fiori Application ztravel_app_xxx and select Build MTA Project.

   

2. Check your result. A new mta_archives folder has been created.

![build](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-deploy-cf/build2.png)

>**HINT:** You can also create the `mta_archives` by right-click on the **project** > **open terminal**, and **check** where the `mta_archive` is present, and then run the command `npm run build`. The `mta_archives` file will then get generated.

1. Right-click your ztravel_app_xxx_0.0.1.mtarfile inside your mta_archives folder and select Deploy MTA Archive.

   

2. Check your result.

   

>**HINT:** You can also deploy the application from command line by **opening the terminal**, **check** where the **`mta_archive`** is present, and then run the **command `npm run deploy`**.

1. Go back to SAP BTP trial cockpit, select HTML5 Applications on the left menu and select your application ztravelappxxx.

   

2. Click Go.

   

3. Check your result.

   

1. Go back to SAP BTP trial cockpit, select Service Marketplace on the left menu, search for Launchpad Service and select Go to Application.

   

2. Click Content Providers on the left menu. Now you can see your HTML5 application. Click the refresh button.

   

3. Go to your content explorer and select your HTML5 app.

![service](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-deploy-cf/service4.png)

4. Check your result. Your Travel App XXX should appear here.