How to Create a Vue.Js App with VS Code and Deploy to Sap Netweaver BSP Stack

[beyhan_meyrali]

Hi,

In this post I would like to show you how create a Vue.js app with VS Code and how to deploy it SAP Netweaver.

As you probably already know, you can do Fiori development with Visual Studio Code and you can easily deploy it to SAP. So instead of Web IDE you can use VS Code. Here is a blog post for VSCode Fiori development.



SAP lets you use any javascript framework for your developments. It suggests to use Fiori but you are definitely not limited to Fiori. And in this short post, I will show you how to create a Vue.js app and how to run it from SAP, as same as you would do with Fiori.

And I will create another blog post to show you, how you can create a rest web api with abap and consume it with vue app. So instead of oData and Fiori, you can use faster approach for creating backend services and Vue to create interface.

Okay, lets start.

We need to install VSCode and NPM.

Download VSCode – link.

Download NodeJS – link.

Open VS Code and open a terminal window and run

npm install -g @vue/cli

restart vscode.

Open a terminal window again and go to your workspace folder to create the app and app folder with following command. And choose V3.

vue create vue-abap-app

if you get following error -> File C:\Users\xxx\AppData\Roaming\npm\vue.ps1 cannot be loaded
because running scripts is disabled on this system. For more information, see 

Run Set-ExecutionPolicy RemoteSigned  and re-try vue create vue-abap-app

This time you should see new folder and files in your workspace.

Now you can run Vue app. Go to vue-abap-app folder and run.

cd .\vue-abap-app\

npm run serve

You can open a browser and enter following URLS to reach Vue app.

- Local: http://localhost:8080/
- Network: http://192.168.93.237:8080/

You should see screen below.

Our app is ready and running. To stop npm server go to vscode terminal and pres ctrl + c and yes ro stop server.

Now we need to install another tool, ui5uploader, to deploy any js app to SAP Netweaver.

npm install -g nwabap-ui5uploader 

go to root folder of your app and create a '.nwabaprc' file.

Content can be like below, details of SAP connection and publication.

I will be publishing it to my SAP server which runs on Ubuntu virtualbox. That is developer edition. Here is a link with video tutorial if you want to install SAP at home 🙂

{ 

    "base": "./dist", 

    "conn_usestrictssl": false, 

    "conn_server": "http://127.0.0.1:8000/", 

    "conn_client": "001", 

    "conn_user": "developer", 

    "conn_password": "Down1oad", 

    "abap_package": "$TMP", 

    "abap_bsp": "ZVueAbapApp", 

    "abap_bsp_text": "Vue App for SAP" 

} 

Before we build and deploy we need to make sure, we provide production path for source files. Our app will be running on SAP with URL address of 'http://127.0.0.1:8000/sap/bc/ui5_ui5/sap/zvueabapapp/index.html?sap-client=001'. We need to tell vue to look sources under '/sap/bc/ui5_ui5/sap/zvueabapapp/'. Open vue config.js and add following code.

  publicPath: process.env.NODE_ENV === 'production'

    ? '/sap/bc/ui5_ui5/sap/zvueabapapp/'

    : '/'

It should look like below.

Note: that app name is determined in '.nwabaprc' file. If you change app name please change that part too.

 

Now time to build again and deploy to SAP.

npm run build

And deploy to SAP

npx nwabap upload

 

Now, we can see our app in BSPs on SAP.

And also in SICF and test it from there.

Browser will open and should like exactly same as as the page served from local server.

http://vhcalnplci:8000/sap/bc/ui5_ui5/sap/zvueabapapp/index.html?sap-client=001

That is it.

Very simply you can do Vue development and publish it to SAP Netweaver.

In next post, I will show how to create a rest api with abap and use it with vue. I personally don't like oData. I think rest is much more practical and easier to develop and extend. Read my blog on MVC1 applied rest api.  And unfortunately same is true for Fiori. Vue is much more elegant and easier to understand and develop compare to Fiori. Therefore if I can choose one, I will choose Rest + Vue combination.

Here is the final blog of series -> Vue.js & Rest Api on Sap Abap Netweaver

Hope that is helpful for you.

Feel free to comment.

Regards.