Skip to Content
Technical Articles
Author's profile photo Beyhan MEYRALI

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

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.

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Beyhan MEYRALI
      Beyhan MEYRALI
      Blog Post Author

      All Codes and related links.

      npm install -g @vue/cli
      
      restart vscode
      
      vue create vue-abap-app
      
      	* on Error -> vue : File C:\Users\xxx\AppData\Roaming\npm\vue.ps1 cannot be loaded 
      			because running scripts is disabled on this system. For more information, see 
      			https://stackoverflow.com/questions/57673913/vsc-powershell-after-npm-updating-packages-ps1-cannot-be-loaded-because-runnin
      		* Solution -> Set-ExecutionPolicy RemoteSigned 
      	
      cd .\vue-abap-app\
      npm run serve
      
      	  - Local:   http://localhost:8080/
      	  - Network: http://192.168.93.237:8080/
      
      
      For syntax highlight install Vue Language Features(Volar) Extension
      
      ctrl+c to terminate running server
      
      
      npm install -g nwabap-ui5uploader 
      
      npm run build
      
      go to project root folder and create .nwabaprc file
      
      { 
          "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" 
      } 
      
      npx nwabap upload
      
      Open page from Sap BSP Stack
      http://vhcalnplci:8000/sap/bc/ui5_ui5/sap/zvueabapapp/index.html?sap-client=001
      http://127.0.0.1:8000/sap/bc/ui5_ui5/sap/zvueabapapp/index.html?sap-client=001
      	-> Error on browser
      	* DevTools failed to load source map: Could not load content for chrome-extension://hnmpcagpplmpfojmgmnngilcnanddlhb/browser-polyfill.min.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
      
      vue.config.js
      
        publicPath: process.env.NODE_ENV === 'production'
          ? '/sap/bc/ui5_ui5/sap/zvueabapapp/'
          : '/'
      	
      const { defineConfig } = require('@vue/cli-service')
      module.exports = defineConfig({
        transpileDependencies: true,
        publicPath: process.env.NODE_ENV === 'production'
          ? '/sap/bc/ui5_ui5/sap/zvueabapapp/'
          : '/'
      })
      
      Author's profile photo Ali Jibran
      Ali Jibran

      Hi,

      Is there a specific reason to use vue-cli?

      cause recommended is

      npm init vue@latest

      EDIT:

      I just created a project with

      npm init vue@latest

      Only difference is that this installation use vite.config.js instead of vue.config.js and uses base instead of publicPath

      import { fileURLToPath, URL } from 'node:url'
      
      import { defineConfig } from 'vite'
      import vue from '@vitejs/plugin-vue'
      
      // https://vitejs.dev/config/
      export default defineConfig({
        plugins: [vue()],
        resolve: {
          alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
          }
        },
        base: process.env.NODE_ENV === 'production'
          ? '/sap/bc/ui5_ui5/sap/zvueabapapp'
          : '/'
      })

      Hope this helps 🙂

      Author's profile photo Beyhan MEYRALI
      Beyhan MEYRALI
      Blog Post Author

      Hi Ali,

      You are free to use any tool you want. SAP BSP is basically running on J2EE server. Therefore you can publish anything that you would publish on Tomcat server.