Small SAP Talk. VSCode and SAPUI5

Small SAP Talk. VSCode and SAPUI5

💡
Версия на русском: Small SAP Talk. VSCode и SAPUI5

With this note, I wanted to leave a bit of information on using VSCode when working with the SAPUI5 framework. There is probably no need to say much about VSCode itself — it’s excellent.

To begin with

It should be mentioned that the vendor, apparently, is constantly working on plugins for VSCode which, in particular, help this IDE to start interacting with the UI5 framework without any noticeable issues. At least, that’s the impression you get when reading the related news on official resources:

SAP Development Tools
For offline development, or if you prefer to configure your local development environment

- SAPUI5 Runtime/SDK downloads for setting up your individual environment (see below)

- Development environment 
Visual Studio Code and SAP Fiori tools from the Visual Studio Marketplace

The official plugin can be downloaded via the link below:

SAP Fiori Tools - Extension Pack - Visual Studio Marketplace
Extension for Visual Studio Code - An extension pack that bundles SAP Fiori tools extensions.

In addition to the plugin, you will also need to install NodeJs, preferably the latest version:

Node.js — Download Node.js®
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

After installing the plugin

Once the plugin is installed, a group of commands will become available in the VSCode editor’s command palette, allowing you to initiate the creation of a new UI5 application.

User interface
A quick overview of the Visual Studio Code user interface. Learn about the editor, window management, and special UI to handle source control, extension management, full text search and more.

After launching the Fiori Application Generator, you need to choose the generator to be used — and you can say that almost everything is ready to start working.

Creating a new application in VSCode

The following video demonstrates the sequence of actions that result in creating a new UI5 application in the VSCode environment, followed by running it on a local machine.

0:00
/1:57

Deploying the application with VSCode

It should be noted here that, in order to configure the parameters of the system that will be used for the subsequent deployment of the application, you may need to install the npm package Yeoman.

Getting started with Yeoman | Yeoman

The next video demonstrates the sequence of actions that configure the parameters of the ABAP system, where the previously created UI5 application will be uploaded.

0:00
/3:13

Everything you need to know about the Small SAP Talk section is available in the following post:

See: Small SAP Talk