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
