Skip to Content

Next generation JavaScript in UI5 using SAP Web IDE


The new Full Stack SAP Web IDE comes with integration of Grunt. Grunt is a JavaScript task runner and will automate the build process of your UI5 project. It will, for example, minify the JavaScript files, generate a preload and so on…

There are already two great tutorials on how Grunt works in the SAP Web IDE:

Basic tutorial:

More advanced tutorial:

Grunt offers a lot more than what you see in these two tutorials. It has a lot of Plugins which you can be used to optimize the build process of your UI5 app. You can search for any plugin on the Grunt website:

This Grunt feature opens a lot of possibilities for UI5 developers that are using the SAP Web IDE. Until now, you still had to use another IDE to use Grunt.

One of these possibilities is Babel. Babel is a compiler to use next generation JavaScript in UI5 project, more precisely ECMAScript 6 also known as ES6.

The problem of ES6 is that it isn’t supported in older browser. As not all customers have the latest version of each browser rolled out in the company, this is a real pain. Still, it’s possible to already use ES6 even if the customer is using older browser versions. To do so, you have two options:

  • Shims and polyfills
  • Transpiler (compiler)
    • A transpiler will convert your ES6 code to another (older) JavaScript (ECMAScript 5 for example) version that’s supported by all browsers. As this will convert your ES6 code to ES5, there is no need to include shims to support new features of ES6.
    • Babel is a JavaScript Compiler that will to this conversion for you:

(Which option that you should choose is still up to you.)

In this blog, I’m going to explain how you can use Babel as a Transpiler/Compiler for your UI5 project in the Full Stack Web IDE.

Configure Grunt

First, we must define the Grunt plugins that we need to build the UI5 project. For Babel, we must include:

  • Babel-core
    • Core library of babel
  • Babel-preset-env
    • Contains the environment for the compiler, this is the recommended preset.
  • Grunt-babel
    • Required to configure Babel in Grunt

The versions of the different components have to match, otherwise you could have unexpected errors.

Package.json will look like this:

	"name": "BabelDemo",
	"version": "0.0.1",
	"description": "",
	"private": true,
	"devDependencies": {
		"babel-core": "7.0.0-alpha.19",
		"babel-preset-env": "2.0.0-alpha.19",
		"grunt-babel": "7.0.0",
		"@sap/grunt-sapui5-bestpractice-build": "^1.3.19"

We want to combine Babel together with the UI5 best practice build process. Therefore, we must make some changes in the “Grunfile.js”.

  • Babel configuration:
    • Will take all the JavaScript files from the “webapp” folder and put the result in a temporary Babel folder
    • It will NOT take JavaScript files from the library folder. If your library folder has another name, you should change it in the Grunt file.
  • Clean Babel
    • The Babel folder should be cleaned after the build process. For all other folders it is integrated in the UI5 best practice build process.
  • Copy to Debug and Tmp
    • We must change the copy configuration for both debug and tmp copy commands. Instead of copying the JavaScript files from the “webapp” folder, they must use the Babel folder. But ONLY for JavaScript files that are not in the library folder!

By using Babel, it can be possible that you have warnings during the build process. To have more information about a warning, I activated the “stack” option of grunt. This will give a stack trace of warnings and errors.


module.exports = function(grunt) {
	'use strict';

	var webAppDir = "webapp";
	var targetDir = "dist";
	var tmpDir = targetDir + "/tmp";
	var tmpDirDbg = targetDir + "/tmp-dbg";
	var tmpDirBabel = targetDir + "/tmp-babel";

	var config = {
		babel: {
			options: {
				sourceMap: false,
				presets: ['env']
			dist: {
				files: [{
					expand: true, // Enable dynamic expansion.
					cwd: 'webapp/', // Src matches are relative to this path.
					src: ['**/*.js'],
					dest: tmpDirBabel, // Destination path prefix.
					//ext: '.js',   // Dest filepaths will have this extension.
					//extDot: 'first',   // Extensions in filenames begin after the first dot
					filter: function(filepath) {
						return !filepath.match(new RegExp('webapp/libs', 'gi'));
		clean: {
			build: [targetDir],
			cleanBabel: [tmpDirBabel]
		copy: {
			copyToDbg: {
				files: [{
					expand: true,
					src: "**/*.js",
					dest: tmpDirDbg,
					cwd: tmpDirBabel,
					filter: function(filepath) {
						// prevent js from localService to be copied
						return !filepath.match(new RegExp(webAppDir + "(\\/|\\\\)localService", "gi"));
				}, {
					expand: true,
					src: 'libs/**/*.js',
					dest: tmpDir,
					cwd: webAppDir
				}, {
					expand: true,
					src: "**/*.css",
					dest: tmpDirDbg,
					cwd: webAppDir
			copyToTmp: {
				files: [{
					expand: true,
					src: '**/*.js',
					dest: tmpDir,
					cwd: tmpDirBabel,
					filter: function(filepath) {
						// prevent js from localService to be copied
						return !filepath.match(new RegExp('build' + '(\\/|\\\\)localService', 'gi'));
				}, {
					expand: true,
					src: 'libs/**/*.js',
					dest: tmpDir,
					cwd: webAppDir
				}, {
					expand: true,
					src: '**/*.css',
					dest: tmpDir,
					cwd: webAppDir
				}, {
					expand: true,
					src: 'localService/metadata.xml',
					dest: tmpDir,
					cwd: webAppDir
				}, {
					expand: true,
					src: '**/*',
					dest: tmpDir,
					cwd: webAppDir,
					filter: function(filepath) {
						// prevent js and css files and contents of webapp/test from being copied
						return !filepath.match(new RegExp("(" + webAppDir +
							"(\\/|\\\\)test|${webAppDir}(\\/|\\\\)localService|\\.js$|\\.css$|\\.ts$|\\test.html$)", "gi"));


	grunt.registerTask('default', 'runs my tasks', function() {
		var tasks = [

		// Use the force option for all tasks declared in the previous line
		// grunt.option('force', true);
		grunt.option('stack', true);;


Configure ESLint

Using ES6 in the SAP Web IDE will result in unwanted errors on ES6 syntax. You can avoid this by following these steps:

Go to the Project Settings ==> Code Checking ==> Validator Configuration and add “es6”:true to “env”:

Use ES6

Now start using ES6! As an example, I created a basic UI5 project in which I’m using a few ES6 features to do some array manipulations.

I have an array with some numbers, convert it to objects and get the odd and even numbers out of it. On the view, I show the three lists.



The app will look like this:

After running Grunt

After running Grunt, the controller will look like this in the “dist” folder:

If I run the app from the dist folder, it will show the same result:

You can find the complete source code (including “dist” folder) on github:


More ES6 features:


Start using ES6 in your UI5 project! 🙂

You must be Logged on to comment or reply to a post.
      • I wonder why someone has decided to fork Web IDE and create a “Full stack” one. I would never switch IDE all the time to run grunt or do a simple task like that.

        • Hi Fabio,

          You are not expected to switch IDE every time you want to run a Grunt task..

          Currently SAP Web IDE has several versions but this is only because we’re in transition phase. Our goal is to have one IDE, with all current capabilities. We didn’t dimply “fork” Web IDE, the entire backend has changed (from Orion to CHE).

          If you’re interested in more information, please find my blog.



  • thanks for sharing this blog. it is very informative and helpful.


    is this only working on current version of Web IDE? would it work on the  WEB IDE version that comes with HANA SP12 ?



  • Thanks for sharing, just a few questions and comments:

    1. The last time I looked at the preview versions the grunt build task had to be run each time we want to test.  Do you know if this has changed and if we can just have it running and building watching for changes?  it would be nice to optionally have a live reload or hot reload.
      Testing in chrome can get us the es6 features but it would be nice to test against the dist version always.

    This is more for someone from sap:

    Are there plans to allow different task runners?  Many of us have a preference for the more powerful webpack and giving us this customization would be one less reason to use a local build setup.


  • Thanks for sharing. I have 2 questions.

    1. When we release the project, how to deploy the code? Release the code in dist folder? And how to release code in dist foler?
    2. If we have the es6 version code to do the code check on Jenkins, the task will fail. But the compiled code in dist folder is usually ignored in git. How can we connect the develop environment to the jenkins env?

    Thank you and Best Regards!

      1. just deploy it like before. It will generate a dist folder and deploy that folder to the cloud or your abap system.
      2. In case your using jenkins, you could (not sure) use jenkins to execute the build (which will generate the dist folder) after the es6 validation



  • Hi Wouter,

    great post, thanks for sharing.

    I have tried it and find out that method Array.find is not converted. Do you have any idea how to change the grunt file in order to make it work?

    Cheers, Jacques