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