SAP Fiori Local Development Environment

This article describes, how to set up a local development environment for developing Fiori Applications with Cloud Application Programming Model with Visual Studio Code on Microsoft Windows.

It is based on SAP Developers tutorial "Set Up Local Development Using VSCode":

https://developers.sap.com/tutorials/btp-app-set-up-local-development.html

This tutorial is part of the larger mission "Build an Application End-to-End Using CAP, Node.js and VS Code":

https://developers.sap.com/mission.btp-application-cap-e2e.html

SQLite Database

Download precompiled SQLite Tools binaries for Windows from https://sqlite.org/download.html

Extract files to

%homepath%\AppData\Local\Programs\sqlite

which usually translates to

C:\Users\<yourusername>\AppData\Local\Programs\sqlite

Search for "Environment variables for this account" in Windows Start Menu and open it.

Select Path variable, click on edit and add the path above as a new item.

Git incl. Git Bash

Download 64-bit Git for Windows Setup from https://git-scm.com/downloads

During installation Git Bash will also be installed.

Git Bash or Windows Command Line should be used for command line commands. Both can be used within VS Code terminal.

Hint: Some commands do not work with PowerShell properly.

Node.js

Node.js is the JavaScript runtime for the CAP backend part, which is used for some tools involved in developing applications locally.

Install Long-Term-Support version (LTS), which have even numbers.

Download Node.js from https://nodejs.org/en/download/

When using Windows Binary instead of Windows Installer extract to

%homepath%\AppData\Local\Programs\node

which usually translates to

C:\Users\<yourusername>\AppData\Local\Programs\node

Search for "Environment variables for this account" in Windows Start Menu and open it.

Select Path variable, click on edit and add the path above as a new item.

Globally installed modules are usually installed into

C:\Users\<yourusername>\AppData\Local\Programs\node\node_modules

Check version:

node -v

For troubleshooting see https://cap.cloud.sap/docs/advanced/troubleshooting#node-version

SAPUI5

Install:

npm install --global @ui5/cli

Check version:

ui5 --version

Cloud Foundry Command Line Interface

Cloud Foundry Command Line Interface is needed for deploying services and apps to SAP BTP. If you don't intend to deploy to BTP, you can skip this.

Download compressed binaries or installers from: https://github.com/cloudfoundry/cli/wiki/V8-CLI-Installation-Guide#installers-and-compressed-binaries

When using binary instead of installer extract content of binary to:

%homepath%\AppData\Local\Programs\cf

which usually translates to

C:\Users\<yourusername>\AppData\Local\Programs\cf

Search for "Environment variables for this account" in Windows Start Menu and open it.

Select Path variable, click on edit and add the path above as a new item.

Check version:

cf version

CAP Tooling

CAP Getting started in a nutshell https://cap.cloud.sap/docs/get-started/in-a-nutshell

Install CAP development kit globally:

npm install --global @sap/cds-dk

Check version:

cds --version

Visual Studio Code

Download stable installer and install from https://code.visualstudio.com/

Install following extensions in VS Code:

• SAP CDS Language Support
• SAP Fiori Tools - Extension Pack

Yeoman

Yeoman is a scaffolding tool for web apps: https://yeoman.io/

Install:

npm install --global yo

Check version:

yo --version

Passport Module

Passport is a express compatible authentication middleware for Node.js

More details at http://www.passportjs.org/

Install Passport Module into project folder:

npm install passport

Authentication Support

In order to enable authentication support on SAP BTP the xssec module is needed for the local CAP implementation.

Stop CAP with Ctrl + C if still running.

Open Terminal in project folder:

npm install --save @sap/xssec

MTA Build Tool

MTA Build Tool is a proprietary tool to deploy applications consisting of multiple modules implemented in different technologies.

Compared to cf push it has following advantages:

• Is a build tool
• Automatically creates
  • Service instances
  • Service keys
  • Destinations
• Deploys content

Install:

npm install -g mbt

Check version:

mbt --version

Related articles:

https://otremba.net/wiki/SAPHANACAP_Development

https://otremba.net/wiki/DeployFioriAppToSAPCloudFoundry

How to Deploy to SAP BTP: https://developers.sap.com/group.btp-app-cap-deploy.html

Make Tool (only for Windows)

Usually Linux and macOS already come with make. For Windows this has to be installed manually:

Open http://gnuwin32.sourceforge.net/packages/make.htm

Eiter use the Complete package, except sources Setup or download Binaries as zip-file.

Extract to

%homepath%\AppData\Local\Programs\gnumake

which usually translates to

C:\Users\<yourusername>\AppData\Local\Programs\gnumake

Search for "Environment variables for this account" in Windows Start Menu and open it.

Select Path variable, click on edit and add the path above as a new item.

UI Tools for MTA

SAPUI5 Tooling:

npm install --global @sap/ux-ui5-tooling

SAP Fiori application generator:

npm install --global @sap/generator-fiori

MTA package as global module:

npm install --global mta

Chrome Browser Addons

For JSON Formatting

JSON Formatter by Callum Locke: https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa

JSON Viewer by teocci: https://chrome.google.com/webstore/detail/json-viewer/aimiinbnnkboelefkjlenlgimcabobli

JSON Viewer by tulios: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh