In this article we are going to see how to migrate a project from SAP Web IDE to Visual Studio Code, how to adapt it to the new environment, how to test it and finally how to deploy it to an on-premises SAP system.

Migration

This can be done simply by exporting and importing the files (Stone Age mode) or through a Git repository. I’m working with GitHub so I use their extension for the Visual Studio. It is a very widespread extension that is already reaching half a million installations.

To clone the repository we access the command panel with Control + Shift + P and look for the command Git: Clone. Remember that by default you will be located in the master branch of the repository. Switch to the corresponding branch if you have to.

Adapt the Web IDE project to VS Code

To adapt the project to the new environment you need the SAP Fiori tools – Extension Pack for VS Code extension.

By the way, this basic Fiori extension in VS Code does not reach 5,000 installations. In other words, only one in 150 GitHub users uses Fiori. So you can see how late SAP is in the web world … but hey, that’s another story.

Let’s continue with the adaptation of the project. Once you have the project in VS Code you have to make some adjustments to be able to use it. And those settings can vary a lot. Basically the difference lies in whether your application is made with Fiori Elements or not.

SAP takes great care of its things and has been boosting this path for some time. If you are not yet familiar with Fiori Elements, you can take a look at the post in which we talked about it:

¿Qué es Fiori Elements?

Vamos a hacer un primer acercamiento al concepto de Fiori Elements, una tecnología fundamental en el desarrollo actual de interfaces de usuario en SAP.

Fiori se presento oficialmente allá por 2013 (para los que dicen que esto es nuevo) con un paquete inicial de 25 aplicaciones que pasaron a ser 81 en 2014…

As I was saying, if your application is based on Fiori Elements, no problem. You open the command palette and look for SAP Fiori tools – Migrate Web IDE project for use Fiori tools. The program will ask you the SAP system destination and the port for the connection and then you will be able to see in the terminal how the modules for node.js are created. In this way the repository is ready to be executed locally. Your .gitignore file will also have been updated by entering this new directory for node_modules here.

It is done! Perfect! All wonderful!!

But, what if your application is Freestyle? Well, basically you have to find a way to get by on. Even if you have built it following all SAP BxPs with your component, manifest, neo-app, etc. If it is not Fiori Elements you have to do the adaptation yourself. By hand. For every application. Yes, that’s it.

Hard, isn’t it? But hey, it doesn’t matter. We have come to play! You’ll see that it doesn’t hurt so much. Basically it is about adjusting or creating by hand the package.json, ui5.yaml files, cleaning up any excess files and then installing the node module.

Come on let’s get to it.

Access the terminal and simply use the npm install command to install node in our repository. If this simple instruction fails you, it may be because you don’t have node installed on your computer. If so, check the Exodus – III: Setting up the environment for VS Code  entry: Setting up the environment for VS Code in this series of posts. If you have done well, the node_modules directory will have been created with the necessary libraries for the repository to act as a local server.

Now you need to adjust the package.json .You may not have this file in your repository. To adjust it depends on how pro you are.

If you don’t want to complicate it, you can do the construction by hand. Your minimal version could be this:

Package.json
{
  “name”“team-calendar-ui”,
  “dependencies”: {
    “@sap/approuter”“^6.0.1”
  },
  “scripts”: {
    “start”“node node_modules/@sap/approuter/approuter.js”
  }
}

But my advice is that you start from a valid package.json file and fit it to your repository.

Tip: If you don’t have a valid file from another repository, you can make a Fiori Elements application in no time with the SAP Fiori tools – Application Generator: Launch. But if you don’t control this well, here are three key links for you:

  1. Set Up and Generate a New SAP Fiori App Project. It is a tutorial that is fine although it is in Business Application Studio, not in VS Code.
  2. Developing SAP Fiori App using SAP Fiori Tools in Visual Studio (VS) Code. A post where they explain everything very well.
  3. Introducing SAP Fiori tools: Application Generato. A very detailed video with all the steps.

Note: one thing they don’t say anywhere is that if it’s the first time you enter the Yeoman application generator, you will not have any generator loaded to choose from. Nothing happens. At the top right you have the link Explore and Install Generators… where you can access a page with literally thousands of possible generators. In the search bar you put Fiori and it filters a few results. Choose the option that says @sap/generator-fiori-elements although it’s okay to explore the other options as well.

The most relevant part of the package.json file that you have to build is where the scripts are specified, starting with the start script “starts”.

 

Package.json
[…]
“scripts”: {
    “postinstall”“npm i @sap/ux-ui5-tooling@\”^1.0.0\” @sap/ux-specification@\”^1.76.12\” –save-dev –save-exact=false”,
    “start”“fiori run –open test/flpSandbox.html?sap-language=ES#masterDetail-display”,
    “start-mock”“fiori run –open test/flpSandboxMockServer.html#masterDetail-display”,
    “start-local”“fiori run –config ./ui5-local.yaml –open test/flpSandboxMockServer.html#masterDetail-display”,
    “deploy”“npx nwabap upload”,
    “dev”“browser-sync start -s \”webapp/\” -f . –no-notify”,
    “prod”“browser-sync start -s \”dist/\” -f . –no-notify”,
    “build”“ui5 build”
  },
[…]

The next file that you have to adjust and perhaps create from scratch is ui5.yaml. I also recommend that you start from a file of an application that already exists and works. Probably the only thing you have to adjust is the name of the application.

ui5.yaml
specVersion1.0
metadata:
  nameappname
typeapplication
ui5Themesap_fiori_3
server:
  customMiddleware:
    – namefiori-tools-proxy
      afterMiddlewarecompression
      configuration:
        ignoreCertError: true # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
        backend:
          – path/sap
            urlhttps://yoursystem:44300/
        ui5:
          path:
            – /resources
            – /test-resources
          urlhttps://ui5.sap.com
          version:  # The UI5 version, for instance, 1.78.1. Empty means latest version
    – namefiori-tools-appreload
      afterMiddlewarecompression
      configuration:
        port35729
        path

You may have your app encapsulated in the webapp folder or not. It depends on how you had your Web IDE configured when you created the project. If you don’t have it created, you will have to do it and put all your project files inside. I give you the same advice from before, you need a simple project running to take a look at. There you will see that for example the component, the manifest, the views and the controller have to go inside the webapp folder and other non-essential files for the application such as the .gitignore or the readme.md go outside.

Before testing, you can remove some files that are no longer used like .user.project.json, extensionDocu.properties, neo-app.json, package-lock.json, readme.txt or the entire .che folder.

Now you can test your application and it should work. To test it I advise you to directly right click on the repository name and Preview Application. And here you choose the normal start boot.

If this doesn’t work, you should probably restart VS Code, reinstall the node module with npm install and try again.

A very common error is the one you get when working with systems that have the self-signed security certificate. Which are most SAP systems, at least in development. To solve it, you just have to specify in the ui5.yaml file to ignore that certificate error.

Other more complex options are to take the certificate from the SAP server and install it locally in the directory where VS Studio reads it, or tell your operating system to ignore such errors. These options are complex and I do not recommend them in principle. At least don’t do it without knowing what you’re doing.

If this doesn’t work for you … you’re going to have to deal with it. The reasons can be many depending on how your application is built. Here are some tips:

Take a look at the article Migrating SAP Fiori Applications from SAP Web IDE to SAP Business Application Studio or also this other article Neo to Cloud Foundry Migration. Yes, I know that both are for migration to BAS and not to VS Code. It is what happens if you go to the dark side … You have to investigate and battle more to gain independence and control.

Read well the messages get in your terminal and the log that is generated. Sometimes it’s just a matter of reading what’s wrong.

Local Test

As we said, to run your project locally the best option is to right-click on the repository and Preview Application. If all goes well, a new tab will open in your browser and you will view your application.

Integration with on premise system

To have an integration between VS Code and SAP’s Abap Server (either an ECC or an S/4 HANA or any other product based on Netweaver) you must have the ABAP remote filesystem extension.

This extension has only 5,000 installations, which indicates that very few developers use it in the world.

For the integration to work, you have to edit the installation file as indicated on the extension page. You can get to this file from the extension’s configuration menu or directly by going to the file, which you will have in a path similar to this: C: \ Users \ Admin \ AppData \ Roaming \ Code \ User \ settings.json. The file has to be more or less this:

settings.json
[…]
“NPL”: {
      “url”“http://vhcalnplci:8000”,
      “username”“rrollano”,
      “password”“secret”,
      “client”“001”// client is required for SAPGUI integration. Might need more
      “sapGui”: {
        “server”“127.0.0.1”,
        “systemNumber”“00”
      },
      “language”“EN”,
      “allowSelfSigned”true
    }
[…]

Once you have edited the configuration file you can make the connection. To do this, access the command panel with Control + Shift + P and enter the command AbapFs Connect to an ABAP system.

Establishing the connection for the first time can work at the first try… but it can also give you quite a bit of trouble. Only the first time, then it goes great. It may be necessary to restart the application, clear the browser cache (this goes through HTTP, not RFC like Eclipse). And if that fails reboot the local computer. If it goes well when launching the connection, it does not give any error message. The replicated system simply appears in the VS Code WorkSpace, top left. If there is an error you will see it in the terminal.

Pre-deployment construction

The construction can be done with npm run build in the repository terminal. You can also use npx ui5 build -a.

If the application was initially well built this step should not give any additional problems. And if it does, what you have to do is read the terminal messages carefully.

On-premise system deployment

To do the deployment we need to install the nwabap-ui5uploader package with the npm install nwabap-ui5uploader instruction.

Once it is installed we have to create the configuration file with the information for the deployment. This file will have to be called .nwabaprc and be located in the root of the project.

On the package’s website they ease you the basic configuration that the file should have:

.nwabaprc
{
  “base”“./dist”,
  “conn_server”“http://myserver:8000”,
  “conn_user”“upload”,
  “conn_password”“upl04d”,
  “abap_package”“$TMP”,
  “abap_bsp”“ZZ_UI5_LOCAL”,
  “abap_bsp_text”“UI5 upload local objects”
}

But this is very basic, in a real scenario you will need to pass a real development package and therefore also a transport order. And by the way, it must be said that it don’t have to be strict with SSL because if you don’t do this, it’s not going to connect. It’s something like this:

.nwabaprc
{
  “base”“./dist”,
  “conn_usestrictssl”false,
  “conn_server”“https://yoursystem:44300/”,
  “conn_client”“100”,
  “conn_user”“rrollano”,
  “conn_password”“secret”,
  “abap_package”“ZDEV”,
  “abap_transport”“XXXXXXXXXX”,
  “abap_bsp”“ZAPPSAPUI5”,
  “abap_bsp_text”“UI5 upload local objects”
}

With this and the instruction npx nwabap upload you can deploy the system.

This may work directly but if you are working against a self-signed server you need to sync the certificate locally. That is, take the server certificate and install it where your VS Code sees it. This part is complicated and not at all polished yet. The easy alternative, although not very orthodox, is to tell your operating system to support these types of connections. We can do this by setting the global system variable NODE_TLS_REJECT_UNAUTHORIZED with the value 0.

And it does indeed deploy … but it’s not enough … Your SAPUI5 application deploys correctly. You can see it in the BSP repository in your SAP on premise. But one thing is missing, the code in the Fiori Launchpad is not updated!

In this point the truth is that I suffered a lot. At first I thought “well nothing happens, I run the report / UI5 / APP_INDEX_CALCULATE to update the index of the apps and that’s it”.

Nope. It didn’t work either.

“Well, I don’t care about anything anymore. Heavy artillery fire. Cleared browser cache, log out, invalid global cache in the system …”.

I tryied everything and… nothing… it didn’t work.

And just before tearing my skin to shreds, I decided to look at the code of the nwabap-ui5uploader package, which being open source you can find it on GitHub.

And here I find by chance the hidden parameter calcappindex!

So I advise you to include this new parameter in your configuration file:

.nwabaprc
{
  “base”“./dist”,
  “conn_usestrictssl”false,
  “conn_server”“https://yoursystem:44300/”,
  “conn_client”“100”,
  “conn_user”“rrollano”,
  “conn_password”“secret”,
  “abap_package”“ZDEV”,
  “abap_transport”“XXXXXXXXXX”,
  “abap_bsp”“ZAPPSAPUI5”,
  “abap_bsp_text”“UI5 upload local objects”,
  “calcappindex”: true
}

And now finally yes. Again with the npx nwabap upload instruction, our application not only displays but the index is automatically updated in the Fiori Launchpad and we can test it there directly.

Difference between Business Application Studio and Visual Studio Code

Finally, I tell you one more related thing. The hot package now is @sap/abap-deploy, which is much more current than the nwabap-ui5uploader we are using.

The point is that the new one, although it is compatible with VS Code, is intended for Business Application Studio, the new Cloud Foundry IDE.

If you can get it to work on your local machine, I would appreciate that you share it with me. I have not succeeded. SAP is not supported and there seems to be no rush about it.

The main problem you will find is the security and the transmission of certificates. You have to take the certificate of the destination SAP and have it installed locally on your PC. And it has to be a certificate of type .crt, etc, etc.

I’ll go back to it but for now you can live without it.

Conclusions

What did you think of the migration process? In my opinion it’s too complex and I am surprised by how little information is there about it. Well, in BAS there is a little, in VS Code I would say none.

Possibly things will improve as the weeks go by, but for now it is what we have.

My motivation for making this long and heavy entry is to first learn the process well, share it with my colleagues and also have some good notes for the future. And if I have also managed to help someone with it, then I’m glad.

This ends this 4-chapter Exodus series. Or so I hope.

Exodus – IV: From SAP Web IDE to Visual Studio Code

This post is part of the Exodus series created after the announced closure of the SAP Cloud Platform trial service, in the NEO environment: Exodus - I: The End of SCP NEO and SAP WebIDE Full-Stack Exodus - II: Is there an alternative to Cloud Foundry's Business Application Studio? Exodus - III:...

Exodus – III: Setting up the environment for VS Code

This post is part of the Exodus series created after the announced closure of the SAP Cloud Platform trial service, in the NEO environment: Exodus - I: The End of SCP NEO and SAP WebIDE Full-Stack Exodus - II: Is there an alternative to Cloud Foundry's Business Application Studio? Exodus - III:...

Exodus – II: Is there an alternative to Cloud Foundry’s Business Application Studio?

This post is part of the Exodus series created after the announced closure of the SAP Cloud Platform trial service, in the NEO environment: Exodus - I: The End of SCP NEO and SAP WebIDE Full-Stack Exodus - II: Is there an alternative to Cloud Foundry's Business Application Studio? Exodus - III:...

Exodus – I: The End of SCP NEO and SAP WebIDE Full-Stack

You probably already know that on November 13 the SAP Cloud Platform trial service will close in the NEO environment. And with it all its associated services. SAP will continue maintenance for customers who have contracted it. They will be super happy to stay in that siding... What happened to...

Si quieres navegar por esta web tienes que aceptar nuestra política de cookies y sus términos de uso

ACEPTAR
Aviso de cookies