Local SAPUI5 development with Docker

[balbino_soaresferreirafil]

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