Quelltext der Seite 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 <code>cf push</code> 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


[[Category:SAP]]
[[Category:JavaScript]]
[[Category:HANA]]