Skip to Content
Technical Articles

Local SAPUI5 development with Docker

Hi guys,

In this blog post, I will demonstrate how to prepare a local development with SAPUI5 using Docker.

The entire project can be found in this GitHub repository: https://github.com/balbinosoares/sapui5-docker.git

This project uses easy-ui5 Yeoman Generator. More info can be found in this SAP Community blog post. https://blogs.sap.com/2019/02/05/introducing-the-easy-ui5-generator/

The template uses UI5 tooling (Serve and UI5 Middleware Livereload) more info in https://sap.github.io/ui5-tooling/

Prerequisites

  1. Node.js
  2. Visual Studio Code
  3. Docker and Docker Composer

Creating the scaffold project using easy-ui5 Yeoman Generator.

Install easy-ui5 generator

npm install -g yo generator-easy-ui5

Create the project

yo easy-ui5

Answer the prompt questions to create the project.

In the question about, which the platform you will host, choose the appropriate host. In my example, I choose the Cloud Foundry HTML5 Application Repository.

After everything is done, your project will look like this.

Preparing Docker

Creating the Dockerfile.

FROM node:12.16.1

WORKDIR /usr/app

RUN npm set @sap:registry=https://npm.sap.com

COPY . .

RUN npm install

EXPOSE 8080

CMD ["npm","start"]

 

Creating the docker-compose.yml file.

version: "3"

services: 
    app: 
        build: .
        command: npm start
        ports: 
            - "8080:8080"
        volumes: 
            - .:/home/node/app

Creating the .dockerignore file.

node_modules
.git

 

The project created by easy-ui5 uses UI5 Tooling to local development https://sap.github.io/ui5-tooling/

To use ui5 serve in docker will need to edit the start script to allow remote connections. Open Package.json and modify the line of npm start script to this.

"start": "ui5 serve -o index.html --accept-remote-connections",

Building the container and running the project

Now we will need to build the image and use docker-compose to start the container.

docker-compose up -–build

Open the application in your browser.

http://localhost:8080/index.html

 

4 Comments
You must be Logged on to comment or reply to a post.
  • Depending on the needs you may want to look into using other images, such as 12.16.1-alpine or 2.16.1-stretch-slim or build the project into an nginx image which are all much smaller in size.

    Jamie

  • Thanks Balbino for taking the effort to nail this!

     

    I have couple of question after looking at the code in github as it’s based on easy-ui5 which uses openui5.

    • The dependencies in package.json file is loading from openui5, so do we get sapui5 libraries or openui5 libraries? Will adding the version to the CDN link in index.html download the specified sapui5 library e.g. src=”https://sapui5.hana.ondemand.com/1.52.22/resources/sap-ui-core.js” ?
    • Can we deploy this project to an on-premise system and still use it on FLP like other SAPUI5 application?

    Many thanks for your time!

    • Hi Priyesh,

      The intent, in this case, is to create a local development environment. But you can use this docker image to deploy on a cloud environment that supports docker. Bear in mind that we are using node.js to run a sapui5 application. So you can deploy it in any cloud provider that supports docker.

      To deploy in an on-premise system, you can manually deploy the generated code. If you want to deploy to a HANA system, using XSA for example, you can generate the mtar file to do this. But if you want to deploy to an ABAP system you will need to import this code in the webIDE for example.

      About the references to sapui5 library you can change, no problem with this.

      Thanks for your comment.

      Regards.