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
- Node.js
- Visual Studio Code
- 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
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 Jamie!
Yes, of course, the sky is the limit, everything will depend on the needs of each one.
Very thanks for your reply.
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.
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.