docs(UIB): improve tutorial

modules/applications/examples/ui-builder/production/docker-compose.yml

@@ -0,0 +1,39 @@
+# Used for running a bonita env for production
+services:
+  bonita-ui-builder:
+    image: <my-uib-image-name>:<version>
+    container_name: bonita-ui-builder
+    environment:
+      BONITA_DEV_MODE: false
+      BONITA_API_URL: http://host.docker.internal:8080/bonita/API
+      APPSMITH_ENCRYPTION_PASSWORD: <encryption-password>
+      APPSMITH_ENCRYPTION_SALT: <encryption-salt>
+    ports:
+      - "8090:80"
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    depends_on:
+      bonita:
+        condition: service_healthy
+
+  # A reverse proxy used to communicate between Bonita UI Builder and a Bonita Runtime
+  bonita-ui-proxy:
+    image: bonitasoft.jfrog.io/docker/bonita-ui-proxy:latest
+    ports:
+      - "443:443"
+      - "80:80"
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+
+  bonita-app:
+    # Replace below with your image name and version, as built following
+    # https://documentation.bonitasoft.com/bonita/latest/build-run/build-application#_docker_image_packaging
+    image: my-bonita-application:1.0.0
+    volumes:
+      - <YOUR_LICENSE_FOLDER>:/opt/bonita_lic
+    environment:
+      - <ANY_STANDARD_BONITA_ENV_VARIABLE_HERE>
+    ports:
+      - "8080:8080"
+    extra_hosts:
+      - "host.docker.internal:host-gateway"

modules/applications/pages/ui-builder/download-and-launch.adoc

@@ -1,18 +1,34 @@
 = Download and launch Bonita UI Builder
 :page-aliases: applications:download-and-launch.adoc
-:description: Describes how to download and launch Bonita UI Builder.
+:description: Lean how to setup Bonita UI Builder environment ready for development.
 
 [NOTE]
 ====
 For Subscription editions only.
 ====
 
+{description}
+
 == Prerequisites
-* Docker installed
-* 2024.3 Bonita (or any later version) started on the local machine
+* Docker installed.
+* 2024.3 Bonita (or any later version) started on your local machine.
+* Ensure no firewall is blocking the connection between Bonita UI Builder and Bonita Runtime. Firewall configuration depends on your operating system.
 
 To use Bonita UI Builder, a Bonita runtime running on your local machine is required (it may be a Bonita Studio or a standalone Bonita runtime).
 
+[WARNING]
+====
+The `docker-compose.yml` example below assumes that Bonita is accessible on port 8080.
+
+If you run:
+
+* on a Tomcat Bundle and you changed the default HTTP port
+* on a Bonita Studio, you need to check the port used by going into `Preferences`, `Deployment`, `Server settings`, `Port`. (Default is 8080, but can be different if port was already in use when Bonita Studio started)
+
+then you need to change value `8080` in the Docker Compose configuration below: property `BONITA_API_URL`
+
+====
+
 [[create-docker-environment]]
 == Create the Docker environment
 

modules/applications/pages/ui-builder/faq.adoc

@@ -204,6 +204,7 @@ Once you know that https://learn.microsoft.com/en-us/windows/wsl/networking#acce
 you must adapt the `docker-compose.yml` to use it instead of `host.docker.internal` where Bonita is concerned.
 
 Set the following environment variables:
+
 * `BONITA_API_URL` under the `bonita-ui-builder` service.
 * `BONITA_HOST` under the `bonita-ui-proxy` service.
 --

modules/applications/pages/ui-builder/interact-with-your-bonita-process.adoc

@@ -20,7 +20,7 @@ You can create API requests and interact with the Bonita runtime with the xref:a
 We will describe below how you can, for example, get a list of Bonita processes, and instantiate one of them.
 
 === Get a list of processes
-To get the list of the processeses deployed on the Bonita runtime (first 10): click the `Editor` icon from the left panel, click the `Queries` tab, then click the `new query / API` button and select the Bonita datasource created previously.
+To get the list of the processes deployed on the Bonita runtime (first 10): click the `Editor` icon from the left panel, click the `Queries` tab, then click the `new query / API` button and select the Bonita datasource created previously.
 Enter the following configuration:
 
 * `Method`: GET
@@ -52,11 +52,6 @@ Enter the following configuration:
 * `Name`: instantiateProcess
 * `Method`: POST
 * `URL`: /bonita/API/bpm/process/{{getProcess.data[0].id}}/instantiation
-* `Params`:
-    - `Key`: p
-    - `Value`: 0
-    - `Key`: c
-    - `Value`: 10
 * `Body`:
 [source, JSON]
 ----

modules/applications/pages/ui-builder/package-and-deploy-your-application.adoc

@@ -26,15 +26,9 @@ To create the production-ready binary, you need to build a Docker image. This im
 
 The xref:production-packaging.adoc#dockerfile[Dockerfile] and more details on how to build the Docker image can be found in this xref:production-packaging.adoc[dedicated page].
 
-=== Run the Docker image
+=== Run the production binary
 
-After building the Docker image, run it using the following command:
-
-[source,console]
-----
-docker run --name <container-name> <image-name>:<version>
-----
-See xref:production-packaging.adoc#run-production-binary[run production binary page] for more details.
+After building the Docker image, run it by following xref:production-packaging.adoc#run-production-binaries[the specific instructions].
 
 === Access your Application
 

modules/applications/pages/ui-builder/production-packaging.adoc

@@ -4,10 +4,17 @@
 
 NOTE: Before starting, ensure you have **Docker** installed on your system.
 
+== What you need to do
+
+To build the production binaries, you need to:
+
+* Build a specific docker image containing Bonita UI Builder with you application(s). It will serve your application UI.
+* Use this new image, along with the Bonita runtime image, to interact with you processes.
+
 [[build-docker-image]]
-== Build a docker image
+== Build a docker image containing your UI applications
 
-Add this Dockerfile in your project to the root of your project:
+Add this **Dockerfile** at the root of your project:
 
 [[dockerfile]]
 [source,docker,subs="+macros,+attributes"]
@@ -39,7 +46,7 @@ WARNING: If you use this command, be sure to have the `workspace` folder next to
 
 [source,console]
 ----
-docker build -t <image-name> .
+docker build -t <my-uib-image-name>:<version> .
 ----
 
 === Advanced build
@@ -60,9 +67,28 @@ You can override some default values by using the following build arguments:
 docker build --build-arg "BASE={bonita-ui-builder-image}" \
              --build-arg "VERSION={bonita-ui-builder-version}" \
              --build-arg "WORKSPACE=./workspace/" \
-             -t <image-name>:<version> .
+             -t <my-uib-image-name>:<version> .
+----
+
+
+[[run-production-binaries]]
+== Run the production binaries
+
+To run the production binaries, you need to:
+
+* start a container with the Bonita Application image
+* start a container with Bonita UI Builder containing you application UI
+* start a container with a reverse proxy to link the two previous containers
+
+To do that, you can use the following `docker-compose.yml` file as a starting point:
+
+[source,docker,subs="+macros,+attributes"]
+----
+include::example$ui-builder/production/docker-compose.yml[]
 ----
 
+Your applications will then be accessible at `http://localhost` or `http://YOUR_PUBLIC_IP_ADDRESS`.
+
 
 === Configure and manage Bonita healthcheck settings in a production environment
 
@@ -94,26 +120,12 @@ If issues arise, check the environment variables, service status, and logs, and
 By following these steps, you can effectively configure Bonita's healthcheck to maintain both security and optimal performance in your production environment.
 
 
-[[run-production-binary]]
-== Run the production binary
-
-To run the production docker image, you can use the following command:
-
-[source,console]
-----
-docker run --name <container-name> -p 8080:80 \
-           -e BONITA_API_URL=<bonita-runtime-url>/bonita/API \
-           -e APPSMITH_ENCRYPTION_PASSWORD=<encryption-password> \
-           -e APPSMITH_ENCRYPTION_SALT=<encryption-salt> \
-           <image-name>:<image-version>
-----
+=== Customize your bonita-ui-builder image
 
 You can override and configure all xref:ui-builder-docker-installation.adoc#environment-variables[environment variables].
 
+
 [NOTE]
 ====
-If you want to test your applications before going to production, instead of using `docker run`, you can use a `docker-compose.yml` file in the likes of what was done in the xref:download-and-launch.adoc#create-docker-environment[installation step]. In this `docker-compose.yml` file, you just need to replace the bonita-ui-build `image` name with the name of the docker production image xref:production-packaging.adoc#build-docker-image[built previously].
-Your applications will then be accessible at `http://localhost`.
-
 Please note that currently, only a single container instance is supported, which means multiple instances of UI builder for redundancy are not allowed.
 ====

modules/runtime/examples/docker/community/postgres/docker-compose.yml

@@ -13,7 +13,7 @@ services:
 
   # In case you have built an Application, use instead as example:
   # my-application:
-  #  image: my-application-[my built environment]:[my aplication's semantic version]
+  #  image: my-application-[my built environment]:[my application's semantic version]
   bonita:
     image: bonita:pass:a[{bonitaVersion}]
     ports: