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/
Install easy-ui5 generator
Create the project
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.
Creating the Dockerfile.
Creating the docker-compose.yml file.
Creating the .dockerignore file.
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.
Now we will need to build the image and use docker-compose to start the container.
Open the application in your browser.
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-ui5Create the project
yo easy-ui5Answer 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 -–buildOpen the application in your browser.
http://localhost:8080/index.html
Bluesky
