Deployment de Fiori Elements App en BTP: Del proyecto de desarrollo a la app productiva

Kategorie

BTP

Veröffentlicht

15 feb 2026

Autor

El deployment de una Fiori Elements App en SAP BTP comprende varios pasos: Desde la creacion del proyecto en Business Application Studio pasando por la configuracion correcta hasta la integracion en el SAP Build Work Zone Launchpad. En este articulo te guiamos por el proceso completo.

Vision general: Proceso de deployment

+---------------------------------------------------------------------+
|                  Deployment de Fiori Elements App                     |
+---------------------------------------------------------------------+
|                                                                       |
|  1. Crear App           2. Configurar           3. Build & Deploy    |
|  -----------------      ----------------        -----------------    |
|  +---------------+      +---------------+       +---------------+    |
|  |    BAS        |      | manifest.json |       |   MTA Build   |    |
|  |  Generator    |  ->  |  xs-app.json  |  ->   |   cf deploy   |    |
|  |               |      |  mta.yaml     |       |               |    |
|  +---------------+      +---------------+       +---------------+    |
|                                                         |            |
|                                                         v            |
|                              4. Integracion Launchpad                |
|                              -----------------------                 |
|                              +---------------------+                 |
|                              |  SAP Build Work Zone|                 |
|                              |  * Crear Tile       |                 |
|                              |  * Asignar Space    |                 |
|                              |  * Mantener Roles   |                 |
|                              +---------------------+                 |
|                                                                       |
+---------------------------------------------------------------------+

Requisitos previos

Antes de comenzar con el deployment:

Requisito	Descripcion
RAP Service	Servicio OData V4 funcional en BTP ABAP Environment
BAS Dev Space	SAP Fiori Dev Space en Business Application Studio
Cloud Foundry	Acceso al BTP Subaccount con CF-Space
Build Work Zone	SAP Build Work Zone (Standard o Advanced) Subscription
Destination	Destination al ABAP Environment configurado

1. Creacion de la App en Business Application Studio

Preparar Dev Space

Si aun no existe, crea un Fiori Dev Space:

1. Abrir BAS -> "Create Dev Space"
2. Nombre: "FioriDevelopment"
3. Tipo: Seleccionar "SAP Fiori"
4. Activar Extensions:
   [x] HTML5 Application Template
   [x] Fiori Tools
   [x] MTA Build Tools
5. Click en "Create Dev Space"

Generar Fiori Elements App

Despues de iniciar el Dev Space:

1. View -> Command Palette (F1)
2. Escribir "Fiori: Open Application Generator"
3. Seleccionar Template: "List Report Page"
4. Click en Siguiente

Configurar fuente de datos

Fuente de datos: "Connect to SAP System"

Service Selection:
+-- System: BTP ABAP Environment
+-- ABAP Environment: [Tu Service Key]
+-- System URL: (automatico desde Service Key)
+-- Service: ZUI_FLIGHTBOOK_O4 (tu servicio OData)

Main Entity: FlightBook
Navigation Entity: None (o Child-Entity si existe)

Definir atributos del proyecto

Nombre del proyecto: flightbooking
Application Title: Gestionar reservas de vuelo
Application Namespace: com.mycompany
Description: Fiori Elements App para reservas de vuelo
Minimum SAPUI5 Version: 1.127.0 (o mas reciente)

Project Folder: /home/user/projects
Add deployment configuration: Yes
Add FLP configuration: Yes

Configuracion de Deployment y FLP

Proporcionar directamente durante la generacion:

Deployment Configuration:
+-- Target: Cloud Foundry
+-- Destination Name: BTP_ABAP_ENV (tu Destination)
+-- Add Application to managed App Router: Yes

FLP Configuration:
+-- Semantic Object: FlightBooking
+-- Action: manage
+-- Title: Gestionar reservas de vuelo
+-- Subtitle: Crear y editar reservas

2. Entender la configuracion de Deployment

Despues de la generacion tu proyecto contiene varios archivos de configuracion.

Estructura del proyecto

flightbooking/
+-- webapp/
|   +-- manifest.json          # Configuracion de la App
|   +-- Component.js           # UI5 Component
|   +-- i18n/
|   |   +-- i18n.properties    # Traducciones
|   +-- localService/          # Mock-Data para test local
|   +-- test/                  # OPA5 Tests
+-- xs-app.json                # Routing del App Router
+-- mta.yaml                   # Multi-Target Application Descriptor
+-- package.json               # Node.js Dependencies
+-- ui5.yaml                   # Configuracion UI5 Build
+-- ui5-deploy.yaml            # Configuracion UI5 especifica para Deployment

manifest.json

El manifest.json es el corazon de la configuracion de la app:

{
  "_version": "1.65.0",
  "sap.app": {
    "id": "com.mycompany.flightbooking",
    "type": "application",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata4/sap/zui_flightbook_o4/srvd/sap/zui_flightbook/0001/",
        "type": "OData",
        "settings": {
          "odataVersion": "4.0"
        }
      }
    },
    "crossNavigation": {
      "inbounds": {
        "FlightBooking-manage": {
          "semanticObject": "FlightBooking",
          "action": "manage",
          "title": "{{flpTitle}}",
          "subTitle": "{{flpSubtitle}}",
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          }
        }
      }
    }
  },
  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.127.0",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.fe.templates": {}
      }
    },
    "routing": {
      "routes": [
        {
          "pattern": ":?query:",
          "name": "FlightBookList",
          "target": "FlightBookList"
        },
        {
          "pattern": "FlightBook({key}):?query:",
          "name": "FlightBookObjectPage",
          "target": "FlightBookObjectPage"
        }
      ],
      "targets": {
        "FlightBookList": {
          "type": "Component",
          "id": "FlightBookList",
          "name": "sap.fe.templates.ListReport",
          "options": {
            "settings": {
              "contextPath": "/FlightBook",
              "variantManagement": "Page",
              "navigation": {
                "FlightBook": {
                  "detail": {
                    "route": "FlightBookObjectPage"
                  }
                }
              },
              "initialLoad": "Enabled"
            }
          }
        },
        "FlightBookObjectPage": {
          "type": "Component",
          "id": "FlightBookObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "contextPath": "/FlightBook",
              "editableHeaderContent": false
            }
          }
        }
      }
    }
  }
}

Configuraciones importantes:

Propiedad	Descripcion
`sap.app.id`	ID unico de la App (Namespace + Nombre)
`dataSources.mainService.uri`	Ruta al servicio OData
`crossNavigation.inbounds`	Integracion Launchpad (Semantic Object + Action)
`variantManagement`	Guardar vistas especificas del usuario
`initialLoad`	Cargar datos directamente al iniciar

xs-app.json

El Application Router usa este archivo para el routing:

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/sap/opu/odata4/(.*)$",
      "target": "/sap/opu/odata4/$1",
      "destination": "BTP_ABAP_ENV",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

Explicacion de rutas:

Ruta	Proposito
`/sap/opu/odata4/(.*)`	Reenviar solicitudes OData a ABAP Environment
`^(.*)$`	Todas las demas solicitudes (HTML, JS, CSS) desde HTML5 Repository

mta.yaml

El Multi-Target Application Descriptor define todos los componentes:

_schema-version: '3.2'
ID: flightbooking
version: 1.0.0
description: Fiori Elements App de reservas de vuelo

parameters:
  enable-parallel-deployments: true
  deploy_mode: html5-repo

build-parameters:
  before-all:
    - builder: custom
      commands:
        - npm ci
        - npx ui5 build --config=ui5-deploy.yaml --clean-dest --dest dist

modules:
  # HTML5 App Deployer
  - name: flightbooking-deployer
    type: com.sap.application.content
    path: dist
    requires:
      - name: flightbooking-html5-repo-host
        parameters:
          content-target: true

  # Destination Content
  - name: flightbooking-destination-content
    type: com.sap.application.content
    requires:
      - name: flightbooking-destination-service
        parameters:
          content-target: true
      - name: flightbooking-html5-repo-host
        parameters:
          service-key:
            name: flightbooking-html5-repo-host-key
      - name: flightbooking-uaa
        parameters:
          service-key:
            name: flightbooking-uaa-key
    parameters:
      content:
        instance:
          destinations:
            - Name: flightbooking_html5_repo_host
              ServiceInstanceName: flightbooking-html5-repo-host
              ServiceKeyName: flightbooking-html5-repo-host-key
              sap.cloud.service: com.mycompany.flightbooking
            - Authentication: OAuth2UserTokenExchange
              Name: flightbooking_uaa
              ServiceInstanceName: flightbooking-uaa
              ServiceKeyName: flightbooking-uaa-key
              sap.cloud.service: com.mycompany.flightbooking
          existing_destinations_policy: update

resources:
  # HTML5 Application Repository
  - name: flightbooking-html5-repo-host
    type: org.cloudfoundry.managed-service
    parameters:
      service: html5-apps-repo
      service-plan: app-host

  # Destination Service
  - name: flightbooking-destination-service
    type: org.cloudfoundry.managed-service
    parameters:
      service: destination
      service-plan: lite
      config:
        HTML5Runtime_enabled: true

  # UAA Service
  - name: flightbooking-uaa
    type: org.cloudfoundry.managed-service
    parameters:
      service: xsuaa
      service-plan: application
      path: ./xs-security.json

xs-security.json

Define la configuracion de seguridad:

{
  "xsappname": "flightbooking",
  "tenant-mode": "dedicated",
  "scopes": [],
  "attributes": [],
  "role-templates": [],
  "oauth2-configuration": {
    "redirect-uris": [
      "https://*.cfapps.*.hana.ondemand.com/**"
    ]
  }
}

3. Proceso de Deployment paso a paso

En el terminal de BAS:

# CF CLI Login
cf login -a https://api.cf.eu10.hana.ondemand.com

# Seleccionar Org y Space
cf target -o my-org -s dev

Paso 2: Verificar Destination

En BTP Cockpit bajo Connectivity -> Destinations debe existir un Destination al ABAP Environment:

Destination: BTP_ABAP_ENV
Type: HTTP
URL: https://<abap-env-host>.abap.eu10.hana.ondemand.com
Proxy Type: Internet
Authentication: OAuth2SAMLBearerAssertion

Additional Properties:
+-- sap-client: 100
+-- HTML5.DynamicDestination: true
+-- WebIDEUsage: odata_gen,odata_abap

Paso 3: MTA Build

# En el directorio del proyecto
cd /home/user/projects/flightbooking

# Ejecutar MTA Build
mbt build

# Resultado: mta_archives/flightbooking_1.0.0.mtar

El proceso de build:

+---------------------------------------------------------+
|                    MTA Build                              |
+---------------------------------------------------------+
|                                                           |
|  1. npm ci                                               |
|     +-- Instalar dependencies                            |
|                                                           |
|  2. npx ui5 build                                        |
|     +-- Compilar UI5 App                                |
|     +-- Minificar                                       |
|     +-- Crear directorio dist/                          |
|                                                           |
|  3. mbt build                                            |
|     +-- Unir modulos                                    |
|     +-- Crear archivo .mtar                             |
|                                                           |
|  Output: mta_archives/flightbooking_1.0.0.mtar          |
|                                                           |
+---------------------------------------------------------+

Paso 4: Deployment en Cloud Foundry

# Deploy MTAR
cf deploy mta_archives/flightbooking_1.0.0.mtar

# Alternativa con indicador de progreso
cf deploy mta_archives/flightbooking_1.0.0.mtar --version-rule ALL

Output del deployment:

Deploying multi-target app archive flightbooking_1.0.0.mtar...

Uploading 1 of 1 done
Processing service "flightbooking-html5-repo-host"...
Processing service "flightbooking-destination-service"...
Processing service "flightbooking-uaa"...
Uploading content module "flightbooking-deployer"...
Deploying content module "flightbooking-destination-content"...

Process finished successfully.

Paso 5: Verificar Deployment

# Verificar services
cf services

# Output:
# NAME                              SERVICE           PLAN
# flightbooking-html5-repo-host    html5-apps-repo   app-host
# flightbooking-destination-service destination      lite
# flightbooking-uaa                xsuaa             application

# Listar HTML5 Apps
cf html5-list

# Output:
# name                              version   app-host-id
# com.mycompany.flightbooking       1.0.0     abc123-def456

4. Integracion con Launchpad

Despues del deployment la app debe integrarse en el SAP Build Work Zone Launchpad.

Abrir Site Manager

1. BTP Cockpit -> Instances and Subscriptions
2. SAP Build Work Zone, standard edition -> Go to Application
3. Channel Manager -> Content Provider "HTML5 Apps" -> Refresh

Content Explorer

1. Content Manager -> Content Explorer
2. HTML5 Apps -> Encontrar tu App
3. Click en "Add to My Content"

Definir Role

1. Content Manager -> Create -> Role
2. Nombre: "FlightBookingUser"
3. Descripcion: "Acceso a App de reservas de vuelo"
4. Asignar Apps:
   [x] Gestionar reservas de vuelo (tu app)
5. Save

Crear Group

1. Content Manager -> Create -> Group
2. Title: "Reservas de vuelo"
3. Asignar Apps:
   [x] Gestionar reservas de vuelo
4. Save

Crear o extender Site

1. Site Directory -> Create Site (o abrir existente)
2. Site Settings -> Content Assignment
3. Asignar Role "FlightBookingUser"
4. Save

Asignar usuarios

En BTP Cockpit:

1. Security -> Role Collections
2. Editar "FlightBookingUser_RC" (creado automaticamente)
3. Users -> Add User
4. Ingresar Email o User ID
5. Save

5. Troubleshooting

Problemas frecuentes de Deployment

Problema	Causa	Solucion
”Service not found”	HTML5 Repo Service no disponible	Verificar entitlement en Subaccount
”Destination not found”	Nombre de Destination incorrecto en xs-app.json	Verificar nombre en configuracion de Destination
”CSRF token validation failed”	csrfProtection activado	Establecer a `false` en xs-app.json
”Unauthorized”	Permiso faltante	Verificar UAA Service Key y roles
”Cannot read property…”	Error de sintaxis en manifest.json	Usar validador JSON

Errores de Build

# Error: Module not found
# Solucion: Actualizar dependencies
npm ci
npm update

# Error: UI5 build failed
# Solucion: Actualizar UI5 Tooling
npm install -g @ui5/cli

# Limpiar cache
rm -rf node_modules
npm ci

Problemas de conexion OData

Problema: "Failed to load metadata"

Verificar:
1. Destination accesible?
   -> BTP Cockpit -> Connectivity -> Destinations -> "Check Connection"

2. Service Binding activo?
   -> ADT -> Abrir Service Binding -> Presionado "Publish"?

3. CORS configurado?
   -> Destination: Property sap-client establecida?

4. Usuario autorizado?
   -> IAM Business Catalog asignado al usuario?

Problemas de Launchpad

Problema: App no aparece en Launchpad

Verificar:
1. Content Explorer -> App visible?
   -> Si no: Channel Manager -> Refresh

2. Role asignado?
   -> Content Manager -> Role -> App incluida?

3. Role Collection creado?
   -> Security -> Role Collections -> _RC presente?

4. Usuario en Role Collection?
   -> Abrir Role Collection -> Tab Users

Activar modo Debug

Para mensajes de error detallados:

URL-Parameter: ?sap-ui-debug=true

Ejemplo:
https://mysite.launchpad.cfapps.eu10.hana.ondemand.com/site#Shell-home?sap-ui-debug=true

Evaluar Logs

# App Router Logs (si managed approuter)
cf logs flightbooking-approuter --recent

# HTML5 Deployer Logs
cf logs flightbooking-deployer --recent

# Service Instance Logs
cf service flightbooking-html5-repo-host

Mejores practicas

Area	Recomendacion
Versionado	Incrementar version en mta.yaml en cada deployment
Convenciones de nombres	Estructura de namespace uniforme (com.company.app)
Destination	`HTML5.DynamicDestination: true` para flexibilidad
Testing	Testing local con Mock-Data antes del deployment
CI/CD	Automatizar MTA Build en pipeline
Caching	Activar cache-busting via version
Monitoring	Usar Application Logging en BTP Cockpit

Deployment automatizado con CI/CD

Para deployments automatizados en un pipeline:

# Ejemplo GitHub Actions
name: Deploy Fiori App

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install MTA Build Tool
        run: npm install -g mbt

      - name: Install CF CLI
        run: |
          wget -q -O cf-cli.deb "https://packages.cloudfoundry.org/stable?release=debian64"
          sudo dpkg -i cf-cli.deb
          cf install-plugin multiapps -f

      - name: Build MTA
        run: |
          npm ci
          mbt build

      - name: Deploy to Cloud Foundry
        env:
          CF_API: ${{ secrets.CF_API }}
          CF_USER: ${{ secrets.CF_USER }}
          CF_PASSWORD: ${{ secrets.CF_PASSWORD }}
          CF_ORG: ${{ secrets.CF_ORG }}
          CF_SPACE: ${{ secrets.CF_SPACE }}
        run: |
          cf login -a $CF_API -u $CF_USER -p $CF_PASSWORD -o $CF_ORG -s $CF_SPACE
          cf deploy mta_archives/*.mtar -f

Conclusion

El deployment de una Fiori Elements App en SAP BTP requiere varios pasos de configuracion que sin embargo estan bien soportados por el Fiori Generator. La clave esta en entender los componentes individuales:

manifest.json define los metadatos de la app y la conexion OData
xs-app.json configura el routing a traves del App Router
mta.yaml orquesta todos los services y modules
Integracion Launchpad hace la app accesible para usuarios finales

Con este conocimiento puedes desplegar Fiori Elements Apps de forma fiable en BTP y proporcionarlas en el Launchpad.

Articulos relacionados

Business Application Studio - Configurar y usar BAS
SAP Build Work Zone Integration - Configuracion detallada del Launchpad
Generacion de codigo RAP - Generar backend y frontend
CI/CD para ABAP Cloud - Deployments automatizados