ui5-tools Extension
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).
Examples
You can find examples of vscode workspace configuration in this repository.
Features
- Automatic less builder. Looks for
styles.less and PROJECTFOLDER.less
- Automatic themes builder. Build
library.source.less themes
- Configurator commands for odata proxy, resources proxy and replace strings
Server
- Handles AppCachebuster in localhost (by default only in PROD mode). Only use this feature to test your cachebuster behaviour with no deployment needed.
- 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 mode alt+s alt+p (launches appFolder/libraryFolder or distFolder folder of each project)
- Multiple comands: start
alt+s alt+s , restart alt+s alt+r ... (check commands secction)
Builder
- 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 apps alt+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
Deployer
- 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)
Importer
- Import BSP directly from Gateway systems
alt+i alt+i
- Supports
.env file for gateway authentication.
UI5TOOLS_IMPORT_USER=
UI5TOOLS_IMPORT_PASSWORD=
String replacer
- Default replace patterns
<% TIMESTAMP %> , <% ISODATE %> , <% DMY %> , <% YMD %> , <% MYD %>
- Create custom replacements like
<% CUSTOMKEY %> in workspace environment (configurable with command alt+c alt+r )
- Computed values
COMPUTED_DATE_TIMESTAMP , COMPUTED_DATE_ISO , COMPUTED_DATE_DMY , COMPUTED_DATE_YMD , COMPUTED_DATE_MYD and the special value COMPUTED_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"
}
]
Settings
General Settings
ui5-tools.appFolder : Transpiled folder for applications (js) | default: webapp
ui5-tools.libraryFolder : Transpiled folder for libraries (js) | default: src
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.63
ui5-tools.verbose : Log al messages false
Server Settings
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/ ). odataProxy Other 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 type Other | 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.cacheBuster : Activate cacheBuster in server mode: | Default: None
Builder Settings
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" } ]
Deployer Settings
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
Importer Settings
ui5-tools.importer.uri : Source gateway system to import BSPs | default: ``
Commands
General Commands
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
Server Commands
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
Builder Commands
ui5-tools.builder.build : Build ui5 project | Shortcut: alt+b alt+b
ui5-tools.builder.buildAll : Build workspace | Shortcut: alt+b alt+a
Deployer Commands
ui5-tools.deployer.deploy : Build and deploy project | Shortcut: alt+d alt+d
ui5-tools.deployer.deployOnly : Deploy project | Shortcut: alt+d alt+o
ui5-tools.deployer.deployMultiple : Build and deploy multiple projects | Shortcut: alt+m alt+m
Importer Commands
ui5-tools.importer.import : Import BSP from Gateway system | Shortcut: alt+i alt+i
Configurator Commands
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.deployer.deploy : Build and deploy option in project folder menu (right click)
ui5-tools.menu.deployer.deployOnly : Deploy option in project folder menu (right click)
Contributors
Credits
| |