Vue Development with SAP Business Application Stud...

yuval_morad · ‎04-12-2021

Overview

With SAP Business Application Studio, you can develop an HTML5 front-end Vue.js application and deploy it to the cloud environment.

In the following blog post, I will show you how to create a simple Vue.js application, based on the Vuetify framework, run it locally, build and deploy it to Cloud Foundry, and then integrate it into your launchpad.

The formal documentation can be found here.

Environment Setup

In your SAP BTP account, ensure that both SAP Business Application Studio and Launchpad Service/Portal are available.

If you are using a trial account, you can skip this step.

If you are using a non-trial account, assign yourself to a developer role:

1. Navigate to Security > Trust Configuration.
2. Click the sap.default link.
3. Enter your email address.
4. Click Assign Role Collection.
5. Select “Business_Application_Studio_Developer” from the dialog box.
6. For managing a Launchpad site, assign the "Launchpad_Admin" role.
7. Click Assign Role Collection to save the changes.

Open SAP Business Application Studio:

1. Click Go to Application from the SAP Business Application Studio tile.
  The SAP Business Application Studio landing page or Dev Space Manager opens.
2. Click Create Dev Space.
3. Enter a name for the dev space.
4. Make sure that these extensions are selected:
  1. MTA Tools
  2. HTML5 Runner
  3. HTML5 Application Template
6. Open the dev space by clicking on the dev space name.

Import your destination in the SAP BTP subaccount:

1. Navigate to Connectivity > Destinations in your new subaccount, click Import Destination, and choose the file with the existing destination that you want to import.
2. Make sure that the following properties are set in the Additional Properties of the destination:
  1. HTML5.DynamicDestination = true
  2. WebIDEEnabled = true
  3. WebIDEUsage = odata_gen for a general URL.
    In addition, WebIDEAdditionalData = full_url if the URL refers to an absolute service URL.
  4. If your service is an ABAP catalog, set the following property value: WebIDEUsage = odata_abap,dev_abap
    Do NOT maintain both odata_abap and odata_gen for WebIDEUsage.
  5. HTML5.Timeout = 60000
3. If the destination refers to an on-premise system, make sure that your subaccount is connected to your on-premise system using a Cloud Connector.
4. See a sample Northwind destination configuration below.

Create a VUE Project

To create a new Vue.js project, you can use the “yo” command from the terminal or you can open the template wizard.

Select the HTML5 Project.

Select the Vue.js Application.

Fill in the application router configuration to use the Managed Approuter.

Select Northwind_full_url as your data source for the application.

Select the entity and the properties to be displayed in your application.

Your application is created and will open in a new workspace after all of its dependencies are installed. (This may take a few seconds).

Test Your Vue.js Application

The application runs on build artifacts. Therefore, using the “watch” command ensures that every change in the source code will be built automatically.

Open the VUE module (one level below the root project) in the terminal and execute “npm run watch”.

Open the run configuration panel and create a run configuration.
- Press the "+" icon and choose your Vue.js module and default name.
- Click the Bind icon of your created configuration and bind the Northwind data source.

Click the Run Module icon to run the application in a separate browser. The run tool installs all dependencies that are missing for run execution and uses a dedicated run port. If you already have a running application using the dedicated port (6004), you must stop the running application first.

The VUE Module UI opens in a new browser.

(Optional) Change your title text and refresh the application browser to see the changes.

(Optional) Open the “manifest.json” file and add inbound navigation for future launchpad integration.

Build and Deploy your Vue.js Application

To deploy your application to Cloud Foundry, perform these steps:

Log in to the target Cloud Foundry space, where you want to deploy the application.
From the menu, click View > Find Command to open the command palette.

Enter “MBT build” in the terminal, which generates your MTA archive file, or right-click on the project’s “mta.yaml” file and click Build MTA Project.

Enter “CF deploy <mtar file name>” in the terminal, which deploys your application to the space that you logged into, or right-click on the mtar file and click Deploy MTA Archive.

From the SAP BTP cockpit, navigate to the HTML5 Applications menu and open your deployed Vue.js application.

Add your Application to a Launchpad

From your SAP BTP account, go to the Launchpad application.
See Set Up the SAP Launchpad Service.

Create a launchpad site (ensure that you have assigned yourself to the Launchpad_Admin role). See Create a Launchpad Site Using the SAP Launchpad Service.

Create an application and enter the URL of the deployed application. (You can copy the URL from the Vue.js application browser). See Add a URL App to Your Launchpad Site.

In the NAVIGATION tab, enter the Semantic Object in accordance with the intent of your “manifest.json” file in the application.

Create a Group and add your application to it.

Assign your application to a role.

Launch your application from your site.

Conclusion

You have developed a Vue.js application using SAP Business Application Studio by performing the following tasks:

Set up your environment

Create a project

Test your application locally

Build and deploy your application to Cloud Foundry

Run your standalone application in Cloud Foundry

Integrate your application to a launchpad

I will be happy to hear your feedback personally or here in the comments.

You can take your first steps using the Trial environment and take a look at all of the SAP Business Application Studio tutorials.

sushant_nath2 · ‎04-12-2021

Hello Yuval,

Thanks, for sharing a valuable, post/blog.

Its really good, to see that SAP gives options to directly build apps using other frameworks/libraries as well.

I am trying to create a vue.js application, in my trial account, however my account doesn't allow me to create/select a HTMl5 application, from the list of available templates.

May i know, if anything is missing, from my account?

Best Regards,

Sushant

yuval_morad · ‎04-12-2021

Hi Sushant,

Please check the setup section in this blog

Enter a name for the dev space.

Make sure that these extensions are selected:
1. MTA Tools
2. HTML5 Runner
3. HTML5 Application Template

Former Member · ‎04-13-2021

Thanks a lot!

former_member276628 · ‎04-13-2021

Great! But how does Vue + Vuetify fit in SAP UI/UX strategy?

yuval_morad · ‎04-13-2021

This is not a statement for a new UX strategy.

SAP BTP is not limited to ONE frontend technology.

BAS as the tool for application development in BTP helps to bridge various frontend technologies to BTP runtimes.

The runtime for example in cloud foundry is managed approuter and HTML5 Repository, which are not bound to SAP UI5, and enables any HTML5 frontend technology such as Vue.js React etc.

As opposed to Web IDE, BAS opens the door for you to the community and it is not a closed IDE.

You can also go to extension panel and install any extension e.g. Vetur

daniel_endres · ‎04-23-2021

That looks great. Is there any plan for a similar integration with ReactJS?

yuval_morad · ‎04-25-2021

Probably yes

yuval_morad · ‎07-06-2021

Now it is

https://blogs.sap.com/2021/07/05/react-development-with-sap-business-application-studio/

kun_yin72 · ‎10-07-2023

I have the same issue. And i useing your suggestion but is not work.It`s not ant options in the selection list