Skip to Content
Author's profile photo Former Member

You Don’t Know Openui5: bootstrapping

“More code, less talk”


Inspired by You Don’t Know JS (book series)

What are we doing here today?

We want to know how to bootstrap an openui5 application. A project, which you will have after finishing all steps from the article, is a core for future projects from other articles.


A goal of my blog is do not teach you how to use openui5 library from SAP in right way. The openui5 was designed to solve one issue with several possible ways. So you are able to choose.

The goal is sharing my personal experience of using the library and some other web development stuff, which helps you to speed up your development using openui5.

All code samples are developed on MacOS environment. On other environments (Linux or Windows) process should be nearly the same.




Let’s go

Project structure

├── .editorconfig
├── .gitignore
├── gulpfile.js
├── package.json
├── proxies.js
├── src
    ├── app.config.js
    ├── app.startup.js
    └── index.html

Create a project folders structure and configure the web project

mkdir -p you-do-not-know-openui5/src
cd you-do-not-know-openui5
yarn init

Answer all questions after issuing yarn init and you will have package.json configuration file for the project.

Install project development dependencies

yarn add -D gulpjs/gulp#4.0 gulp-mem browser-sync http-proxy-middleware

In project folder you may find yarn.lock file. Please, do not edit the file and you need commit the file to git repository.

Just a brief explanation of used dependencies:

Write in and what ever you want or leave empty

In .gitignore


In .editorconfig

# EditorConfig is awesome:

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
end_of_line = lf
insert_final_newline = true

# 2 space indentation
indent_style = space
indent_size = 2

# Set default charset
charset = utf-8

In proxies.js

const proxy = require('http-proxy-middleware');

module.exports =
   * openui5 runtime/mobile-runtime/sdk packages at
    proxy("/resources", {
      target: "",
      changeOrigin: true,
      onProxyRes: (p) => {
        p.headers["cache-control"] = "public, max-age=31536000"
    proxy("/test-resources", {
      target: "",
      changeOrigin: true,
      onProxyRes: (p) => {
        p.headers["cache-control"] = "public, max-age=31536000"

Here you can configure openui5 resources to use. We have configuration for openui5 version 1.50.8. If you remove version number in target option, you will have latest openui5 version every-time.

In gulpfile.js

let gulp = require('gulp');
let browserSync = require('browser-sync');
let GulpMem = require('gulp-mem');

// Configure gulp-mem plugin: base path, log
const gulpMem = new GulpMem();
gulpMem.serveBasePath = '/';
gulpMem.enableLog = true;

const copy = () => {
  return gulp.src(['src/**/*']);

// Copy content of src folder to root path in-memory
gulp.task('app:build', () => {
  return copy()

// Configure browser-sync, start server and open app in Chromium browser
gulp.task('bs:start', (done) => {
  const middlewares = require('./proxies');
    middleware: middlewares,
    server: [
    browser: 'Chromium'

// Refresh browser page where app is running
gulp.task('bs:reload', (done) => {

// Watch for changes in src folder
// If any changes, run app:build and bs:reload in sequence
gulp.task('app:watch', () => {'src/**/*', gulp.series('app:build', 'bs:reload'));

// Run app:build, bs:start and app:watch tasks in sequence
gulp.task('default', gulp.series('app:build', 'bs:start', 'app:watch'));

In src/index.html

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>You Do Not Know Openui5</title>
  <script id="sap-ui-config" src="app.config.js"></script>
  <script id="sap-ui-resources" src="resources/sap-ui-core.js"></script>
  <script id="sap-ui-startup" src="app.startup.js"></script>
<body id="content" class="sapUiBody"></body>

It is start point of our application

In src/app.config.js

window["sap-ui-config"] = {
  libs: "sap.m",
  theme: "sap_belize",
  preload: "sync",
  manifestFirst: true,
  bindingSyntax: "complex",
  compatVersion: "edge",
  debug: false,
  logLevel: "NONE",
  trace: false,
  statistics: false,
  "xx-debugModuleLoading": false,
  "xx-debugRendering": false,
  "xx-fakeOS": "",
  "xx-showLoadErrors": true,
  "xx-waitForTheme": true

It is configuration of openui5 application. Complete list of possible configuration options can be found here.

In src/app.startup.js

sap.ui.getCore().attachInit(function () {

], function () {

    jQuery("#content").html("You Do Not Know Openui5")

It is start point of application when openui5 resources and configuration will be loaded

Looks like everything is ready! Now we can issue gulp default task in command line.


Content of src folder will be copied to root path in-memory, watchers will be started, browser-sync server will be started and our app will be opened in Chromium browser.

In command line we see the following

In browser we see the following

So, it is the end for today. Source code for our project can be found here. Feel free to experiment with source code, because it is only one way to become a developer. And Happy Coding!

Next topic of “You Don’t Know Openui5” series will be soon.


So, we implemented our first very simple openui5 application:

  • Bootstrapping of openui5. My recommendation is use separate file for configuration.
  • Start point of application. I recommend you, separate main js and main html every-time.

and configure more/less our development environment:

  • Development dependencies via yarn. It is super fast.
  • Gulp tasks: copy files, watching for changes, start development server.
  • In-memory development. It is faster then usual approach.
  • Development server with proxies to prevent CORS issue.

Something to read


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      Great Blog!!!   Step by step - I love it.

      Thank you,


      Author's profile photo Former Member
      Former Member
      Blog Post Author

      thank you. good comments inspire me to write new articles 🙂