Skip to Content

“More code, less talk”

Thanks

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.

Introduction

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.

Pre-requirements

Minimal:

Additional:

Let’s go

Project structure

├── .editorconfig
├── .gitignore
├── LICENSE.md
├── README.md
├── 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 README.md and LICENSE.md what ever you want or leave empty

In .gitignore

node_modules

In .editorconfig

# EditorConfig is awesome: http://EditorConfig.org

# 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 http://openui5.org/download.html
   */
  [
    proxy("/resources", {
      target: "https://openui5.hana.ondemand.com/1.50.8",
      changeOrigin: true,
      onProxyRes: (p) => {
        p.headers["cache-control"] = "public, max-age=31536000"
      }
    }),
    proxy("/test-resources", {
      target: "https://openui5.hana.ondemand.com/1.50.8",
      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()
    .pipe(gulpMem.dest('/'));
});

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

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

// Watch for changes in src folder
// If any changes, run app:build and bs:reload in sequence
gulp.task('app:watch', () => {
  gulp.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

<!DOCTYPE HTML>
<html>
<head>
  <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>
</head>
<body id="content" class="sapUiBody"></body>
</html>

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 () {
  sap.ui.require([

], 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.

gulp

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.

Summary

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

 

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply