Introduction
With the introduction of SAP Business Application Studio, developers may face the need to migrate existing projects originally developed in SAP Web IDE. This applies to a variety of possible implementations, yet in this blog post we want to look at one specific use case:
Migrating HTML5 applications developed in SAP Web IDE and deployed to the SAP BTP, Cloud Foundry environment.
In addition, we want to deploy the application(s) to the SAP BTP, ABAP environment as part of the migration, thus changing both the development and the runtime environment.
Before we start, we need to keep in mind that HTML5 applications are deployed to the Cloud Foundry environment as part of MTA projects. Each of these projects will contain one or multiple HTML5 modules, as well as several files related to the MTA configuration.
MTA project structure (your specific project may differ)
In contrast, HTML5 applications are deployed to the ABAP environment individually. As a result, each MTA project may result in multiple individual projects after migration. Additionally, all MTA-related files become obsolete.
Prerequisites
In order to perform the migration, the following prerequisites should be fulfilled:
- You have access to the original project, either via a Git repository or via a local copy.
- You have an active subscription to SAP Business Application Studio and the Business_Application_Studio_Developer role collection is assigned to your user in the SAP BTP cockpit. We recommend that you launch a fresh Dev Space of type SAP Fiori.
- You have an ABAP environment service instance running, and the Developer role is assigned to your user in that system. You will need a development package to deploy your application to, as well as a transport request with the corresponding transport layer.
- In your SAP BTP subaccount’s connectivity settings, you have a suitable destination for the ABAP environment service instance.
- You have set up ABAP Development Tools for Eclipse and established a connection to the ABAP environment service instance. This is needed to integrate the deployed application into the ABAP launchpad. You can also use Eclipse to create a suitable package and transport request.
Once everything is set up, the migration can start. Fortunately for us, SAP Fiori tools offers a migration assistant that takes over most of the work!
Procedure
Migrating the project
First of all, you need to get the project into your SAP Business Application Studio Dev Space. There are two options:
You can drag and drop a local copy from your file explorer directly into your Dev Space. This offers the advantage of simply choosing the relevant HTML5 module, contained in its own folder, and ignoring all MTA-related files.
Drag and drop into your Dev Space
Alternatively, you can clone your project from a Git repository. Choose the Clone from Git option on the welcome page and enter your repository’s URL along with your credentials (if applicable). Although this will import all files, you will also be able to use the integrated Git functionality. Obsolete files such as mta.yaml and xs-security.json can simply be deleted (although you will still be able to perform the next steps even if you don’t).
Clone project from Git repository
Note on project management:
If you plan to use version control, you should think about your project structure. When deploying an MTA project to the Cloud Foundry environment, we consider this to be a single project, regardless of the number of HTML5 applications it contains. The project's root folder is that which contains both the MTA descriptor file and the individual application folders. In contrast, when deploying to the ABAP Environment, each HTML5 application can semantically be considered to be its own project, where the root folder is the application folder itself. With this in mind, we recommend that you create a new repository for each of the applications that you migrate.
Back to the task at hand:
Once you import your files into the Dev Space, you will be prompted to start the migration.
Fiori Tools popup
If you proceed, the migration assistant will open automatically and your application will be added to the list. If you import several applications, they will all be listed, allowing for a convenient simultaneous migration.
Migration assistant
Choose the relevant module from the list and specify a suitable destination from the drop-down list under SAP System. The Hostname field will be filled automatically with the correct value. In this scenario, you can leave the SAP Client field empty.
Once this is done, make sure your application is selected and click 'Start Migration'. A terminal window will open and run through some commands. All relevant configuration files will be modified, and any necessary additional ones will be created. Please note that the migration assistant will not delete any files. Once the process is finished, the terminal will stop outputting information and a (hopefully positive) status message will be shown in the Migration window.
Note: At the time of writing, some warnings are printed to the terminal during the migration process. This does not impact functionality.
You can check your success by using the preview function: Create and start a run configuration (in the Run Configurations tab) or run command
npm run startvia the Terminal in the root folder of your application.
Deployment
Now that we have migrated the HTML5 application to the new development environment, we also want to deploy it to its new runtime environment. The application was previously deployed to the Cloud Foundry environment but shall now be deployed to the ABAP environment. As a result, we must adapt our deployment configuration.
Open a terminal and navigate to the root folder of your application. Run command
npx fiori add deploy-configwhich will start a terminal dialogue. Select ABAP as your deployment target and choose the destination pointing to your target system. Enter a suitable name, as well as your chosen package and transport request.
Since we want to integrate the application into the SAP Fiori launchpad of the ABAP environment, we also need to specify the launchpad configuration, which defines the appearance of the application tile. Use command
npx fiori add flp-configto start the configuration assistant and input values of your choice. Note that this may have already been done for your project in SAP Web IDE, in which case you will receive a message accordingly. You can leave the configuration as is or update it to your liking.
It is now time to deploy the project, which can be done using the same terminal. Run
npm run deployand confirm the displayed deployment information. Once the deployment is finished, the terminal will stop outputting information and you will see a success message.
Deployment success message
You can also check the result by opening the chosen development package in Eclipse. You should see new objects: A BSP application and an SAP Fiori launchpad descriptor item.
Integration into the ABAP Environment
Once your application is deployed, you probably want to integrate it into the ABAP environment’s launchpad. Business users obtain access to applications via business roles, which in turn consist of different business catalogs. As a result, we must make sure to include our application in a suitable catalog.
Open Eclipse and access the backend system. As a first step, you want to assign the previously created BSP application to a suitable IAM app. This is done by opening the IAM app object and choosing the corresponding BSP object for UI5 Application ID. Save and publish the IAM app. Then, you can open a business catalog and add the previous IAM app in the Apps tab. Again, publish the catalog.
IAM App and Business Catalog configuration
If you are exposing backend services, chances are there already is a suitable IAM app and business catalog. In such a case, it might make sense to reuse the existing objects.
Once the steps in the backend are complete, business users with business roles containing the relevant catalog will be able to access the application. It can be found in the navigation menu under the catalog name or in the App Finder, from where it can also be added to the user’s home page.
Finding the deployed application on the launchpad
Conclusion
With relatively small effort, we have been able to migrate an existing HTML5 application (wrapped in an MTA project) from SAP Web IDE to SAP Business Application Studio. We have also successfully deployed the application to the ABAP environment and integrated it into the launchpad.
As a result, business users using the ABAP environment’s Fiori Launchpad can be assigned the corresponding role and then consume the application.
Leave a comment and let me know about your own migration scenarios! Of course, also feel free to post any questions and thoughts you may have regarding this blog post. If this topic interests you, take a look at the community pages for the SAP BTP ABAP Environment and SAP Business Application Studio, where you will also find all the latest articles and Q&A.
For more information regarding the processes described in this blog post, check out the following resources:
- SAP Managed Tags:
