VSCode extension for ui5 developers. This extension is not intended to replace ui5 cli, its main objective is to provide a fast and global workspace configuration to work with multi root workspaces and projects deployed to on premise systems (Gateway).
You can find examples of vscode workspace configuration in this repository.
- Automatic less builder. Looks for
styles.less
andPROJECTFOLDER.less
- Automatic themes builder. Build
library.source.less
themes - Configurator commands for odata proxy, resources proxy and replace strings
- Handles AppCachebuster in localhost (by default only in PROD mode).
- Configurable proxy to one o multiple odata service (Gateway, Other, None). Command
alt+c alt+o
- Supports
.env
file for odata service authentication. Example of.env
file:
UI5TOOLS_ODATA_USER=
UI5TOOLS_ODATA_PASSWORD=
UI5TOOLS_ODATA_USER_2=
UI5TOOLS_ODATA_PASSWORD_2=
UI5TOOLS_ODATA_USER_N=
UI5TOOLS_ODATA_PASSWORD_N=
- Configurable proxy to resources (Gateway, CDN SAPUI5, CDN OpenUI5, Local Runtime, None). Command
alt+c alt+u
- Configurable UI5 version (when using gateway proxy, extension will detect sapui5 version automatically)
- Live reload browser, css and images hot reload
- Typescript support (ESM)
- Built in localhost home page server, with apps launchpad, readme.md, docs (md files), links, server info...
- Built in launchpad for resources: Gateway, CDN SAPUI5 and Runtime. Configurable with file
fioriSandboxConfig.json
- Server uses folder hierarchy. For product apps and Z apps, is possible to emulate gateway bsp paths
- Start server in development mode
alt+s alt+s
or production modealt+s alt+p
(launchesappFolder/libraryFolder
ordistFolder
folder of each project) - Multiple comands: start
alt+s alt+s
, restartalt+s alt+r
... (check commands secction)
- Component-preload.js, checking configured ui5 version for correct build. Build your project by doing right click in project folder or
alt+b alt+b
and select project - Dbg files creation
- Typescript support (ESM)
- Build less files (looks for
styles.css
,PROJECTFOLDERNAME.less
or library.source.less) - Uglify files
- Replace strings
- Build one project
alt+b alt+b
or all appsalt+b alt+a
in one command - Building preload (Component-preload and library-preload) process uses openui5-preload
- Building theme (library.source.less) process uses less-openui5
- Building styles (styles.less and PROJECTFOLDER.less) process uses less
- Gateway deploy, process includes build process. Deploy your project doing right click in project folder or
alt+d alt+d
and select project - ui5-tools.json file located at project folder, with deployment configuration: ui5-tools.json example
- Create, update and save last order in ui5-tools.json file (configurable)
- Autoprefix BSP name in order text while creation (optional)
- Supports
.env
file for gateway authentication.
UI5TOOLS_DEPLOY_USER=
UI5TOOLS_DEPLOY_PASSWORD=
- Deploy process uses ui5-nwabap-deployer-core , so the extension uses the same configuration in file ui5-tools.json (property deployer.options)
- Import BSP directly from Gateway systems
alt+i alt+i
- Supports
.env
file for gateway authentication.
UI5TOOLS_IMPORT_USER=
UI5TOOLS_IMPORT_PASSWORD=
- Default replace patterns
<% TIMESTAMP %>
,<% ISODATE %>
,<% DMY %>
,<% YMD %>
,<% MYD %>
- Create custom replacements like
<% CUSTOMKEY %>
in workspace environment (configurable with commandalt+c alt+r
) - Computed values
COMPUTED_DATE_TIMESTAMP
,COMPUTED_DATE_ISO
,COMPUTED_DATE_DMY
,COMPUTED_DATE_YMD
,COMPUTED_DATE_MYD
and the special valueCOMPUTED_DATE_FORMATTED
- Suports custom computed date format, replacements using dayjs during the build process:
"ui5-tools.builder.replaceKeysValues": [
{
"key": "DATE_FORMATED_EXAMPLE",
"value": "COMPUTED_DATE_FORMAT",
"param": "DD/MM/YYYY HH:mm:SS"
}
]
ui5-tools.appSrcFolder
: Source folder for applications (ts) | default:src
ui5-tools.appFolder
: Transpiled folder for applications (js) | default:webapp
ui5-tools.librarySrcFolder
: Source folder for libraries (ts) | default:src
ui5-tools.libraryFolder
: Transpiled folder for libraries (js) | default:src-gen
ui5-tools.distFolder
: Destination folder in your project (final build) | default:dist
ui5-tools.ui5Version
: UI5 library version for CDN proxy in server and build correct preload files:1.71.42
ui5-tools.server.name
: Server name | default:UI5 Server
ui5-tools.server.port
: Set custom port of UI5 Server | default:3000
ui5-tools.server.startOnLaunch
: Start server at launch vscode | default:false
ui5-tools.server.openBrowser
: Open browser al launch server | default:true
ui5-tools.server.watch
: Activate live reload | default:true
ui5-tools.server.timeout
: Server timeout (ms), 0 for disable timeout | default:60000
ui5-tools.server.watchExtensions
: Extensions to listen for live reload | default:css,js,json,xml,html,properties
ui5-tools.server.protocol
: Should use http or https | default:http
ui5-tools.server.odataProxy
: Proxy all odata calls to a server | default:None
ui5-tools.server.odataUri
: Your odata server uri url (example:http://srvaspgwd.com:8080/
). odataProxyOther
accepts multiple uris (example:http://srvaspgwd.com:8080/, http://srvaspgwd.com:8080/
)ui5-tools.server.odataSecure
: Verify odataProxy SSL Certs | default:false
ui5-tools.server.odataMountPath
: The mountpath for 'Other' odataProxy. Accepts multiple paths, respecting the same order that odataUri for odataProxy typeOther
| default:/odata
ui5-tools.server.resourcesProxy
: Proxy all odata calls to a Gateway, CDN or Local Runtime (proxy all url begining with /resources) | default:CDN SAPUI5
ui5-tools.server.resourcesUri
: Your resources server url (example: http://srvaspgwd.com:8080/)ui5-tools.server.proxyDestinations
: Your own list of destinations | default:[]
ui5-tools.server.resourcesSecure
: Verify resourcesProxy SSL Certs | default:false
ui5-tools.server.babelSourcesLive
: Live transform es6 to es5 (server in DEV mode), internet explorer 11 compat:false
ui5-tools.server.cacheBuster
: Activate cacheBuster in server mode: | Default:None
ui5-tools.builder.babelSources
: Transform es6 to es5, internet explorer 11 compat | default:false
ui5-tools.builder.babelSourcesExclude
: Exclude uri for babel, generate a RelativePattern to exclude, can be n separated by comma | default: ``ui5-tools.builder.debugSources
: Create debug js files when building | default:true
ui5-tools.builder.uglifyPreload
: Uglify Component-preload.js when building. If uglifySources is activated, this flag is redundant | default:false
ui5-tools.builder.uglifySources
: Uglify Component-preload.js and all js files when building | default:true
ui5-tools.builder.uglifySourcesExclude
: Exclude uri for uglify, generate a RelativePattern to exclude, can be n separated by comma | default: ``ui5-tools.builder.preloadSrc
: Array with all patterns to include/exclude in Component-preload.js | default:"**/*.js", "**/*.fragment.html", "**/*.fragment.json", "**/*.fragment.xml", "**/*.view.html", "**/*.view.json", "**/*.view.xml", "**/*.properties", "!**/*-dbg.js"
ui5-tools.builder.buildLess
: Auto build less files into css when saving changes | default:true
ui5-tools.builder.replaceStrings
: Replace strings when building | default:true
ui5-tools.builder.replaceExtensions
: File extensions to look for keys to replace | default:xml,js,json,properties
ui5-tools.builder.replaceKeysValues
: Key/Value pair list. Replace <% key %> with 'value' while building the project | default:[ { "key": "TIMESTAMP", "value": "COMPUTED_DATE_TIMESTAMP" }, { "key": "ISODATE", "value": "COMPUTED_DATE_ISO" }, { "key": "DMY", "value": "COMPUTED_DATE_DMY" }, { "key": "YMD", "value": "COMPUTED_DATE_YMD" }, { "key": "MYD", "value": "COMPUTED_DATE_MYD" } ]
ui5-tools.deployer.autoSaveOrder
: Saves de transport number in ui5-tools.json file | default:true
ui5-tools.deployer.autoPrefixBSP
: Auto prefix BSP name in all transport texts while creation | default:false
ui5-tools.deployer.rejectUnauthorized
: Reject deployments in servers with misconfigured certificates
ui5-tools.importer.uri
: Source gateway system to import BSPs | default: ``
ui5-tools.general.refreshProjects
: Search for UI5 projects | Shortcut:alt+g alt+r
ui5-tools.general.showOutput
: Open the extension output | Shortcut:alt+g alt+o
ui5-tools.server.startDevelopment
: Start server in development mode (appFolder/libraryFolder) | Shortcut:alt+s alt+s
ui5-tools.server.startProduction
: Start server in production mode (distFolder) | Shortcut:alt+s alt+p
ui5-tools.server.startBuildProduction
: Build workspace and start server in production mode | Shortcut:alt+s alt+b
ui5-tools.server.stop
: Stop server | Shortcut:alt+s alt+x
ui5-tools.server.restart
: Restart server | Shortcut:alt+s alt+r
ui5-tools.server.toggle
: Toggle server | Shortcut:alt+s alt+t
ui5-tools.builder.build
: Build ui5 project | Shortcut:alt+b alt+b
ui5-tools.builder.buildAll
: Build workspace | Shortcut:alt+b alt+a
ui5-tools.builder.generate
: Generate ui5 project:alt+b alt+g
ui5-tools.deployer.deploy
: Build and deploy project | Shortcut:alt+d alt+d
ui5-tools.deployer.deployMultiple
: Build and deploy multiple projects | Shortcut:alt+m alt+m
ui5-tools.importer.import
: Import BSP from Gateway system | Shortcut:alt+i alt+i
ui5-tools.configurator.odataProvider
: Configure odata provider | Shortcut:alt+c alt+o
ui5-tools.configurator.ui5Provider
: Configure ui5 provider | Shortcut:alt+c alt+u
ui5-tools.configurator.replaceStrings
: Configure replace strings | Shortcut:alt+c alt+r
ui5-tools.configurator.uninstallRuntime
: Uninstall SAPUI5 Runtime | Shortcut:alt+c alt+d
ui5-tools.menu.builder.build
: Build option in project folder menu (right click)ui5-tools.menu.builder.generate
: Generate the project fromappSrcFolder/librarySrcFolder
toappFolder/libraryFolder
(right click)ui5-tools.menu.deployer.deploy
: Build and deploy option in project folder menu (right click)
- Preload javascript builder: openui5-preload - Ryan Murphy
- Deployer: ui5-nwabap-deployer-core - Florian Pfeffer
- Less library builder: less-openui5 - SAP