Download and launch Bonita UI Builder

For Subscription editions only.

Learn how to download, launch, and set up the Bonita UI Builder environment for development.

Prerequisites

Docker installed.
2024.3 Bonita (or any later version) started on your local machine.

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). Make sure no firewall is blocking the connection between Bonita UI Builder and Bonita Runtime.

Create the Docker environment

The Docker environment is composed of two containers:

Bonita UI Builder: the core service that runs a low-code application platform based on Appsmith.
Bonita UI Proxy: a reverse proxy to establish communications between Bonita UI Builder and a Bonita Runtime.

First, create a docker-compose.yml file with the content below:

# Use for running a bonita-ui-builder during development.
services:
  bonita-ui-builder:
    image: bonitasoft.jfrog.io/docker/bonita-ui-builder:1.3.10
    container_name: bonita-ui-builder
    environment:
      BONITA_API_URL: http://bonita-ui-proxy/bonita/API
    # Mount a volume to store persistent data
    volumes:
      - ./stacks:/appsmith-stacks
      - ./web_applications:/opt/appsmith/workspace/app/export

  # 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:1.3.10
    ports:
      - 443:443
      - 80:80
    environment:
      UIB_HOST: bonita-ui-builder
      UIB_PORT: 80
      # Target existing Bonita installation running on docker host
      BONITA_HOST: host.docker.internal
      BONITA_PORT: 8080
      # NGINX_EXTERNAL_PORT: 8888  # Uncomment and set if using a non-standard port (e.g., ports: 8888:80)
    extra_hosts:
      - "host.docker.internal:host-gateway"

If Bonita is running on a port other than 8080, you need to override the BONITA_PORT environment variable in the bonita-ui-proxy service within the docker-compose.yml file.

A volume is mounted to the local folder ./stacks to store persistent data. In case the container crashes, your work will not be lost. Fill free to update the folder to another location on your local machine.

You can override and configure all environment variables in the docker-compose.yml file. This can be used for example if your Bonita is set on another port than the 8080 default port.

Download and launch the Docker image

Bonita UI Builder Docker image is located in the xref:@bonita:software-extensibility:bonita-repository-access.adoc[Bonita Artifact Repository]. Once you got the credentials, you have to authenticate with the docker login command:

docker login bonitasoft.jfrog.io

macOS users: If you plan to launch UI Builder from Bonita Studio, additional Keychain configuration is required. See the macOS specific configuration section.

Run the following command to launch Bonita UI Builder:

docker compose up -d

Then, you can access Bonita UI Builder at http://localhost.

The first time, the initialization can take a while; a waiting message appears. Reload the page if the page is blank.

By default, the database volumes are not persisted. Make sure you export your applications as .json files before running the command:

docker compose down

If you do not want to lose your data, you can use instead these commands to stop and restart Bonita UI Builder:

docker compose stop
docker compose restart

If encountering issues with Windows and WSL, check our FAQ .

Log in on Bonita UI Builder

Log in on Bonita UI Builder with the authentication page of Bonita runtime using the credentials of one of the users of the Bonita runtime database.

You can now build your user interface with the Bonita UI Builder!