This is a simple addon which will render a widget component that when clicked will display a 'Hello World!' message (or a custom one).

The embedded webserver is started, and handlers are registered for the lifecycle and the UI component.

• A Github account and an access token associated with it
• Docker

The addon can be run using the provided docker compose file.

You should update the PUBLIC_URL environment variable from the docker-compose.yml to reflect the actual value.

First, we build the image by passing in a Github username and it's access token. These are only used in order to pull the Addon SDK dependency from Github packages.

Then, we run the container and pass in the addon public URL. The container will expose the following port for the addon: 8080.

Use the following commands to run the addon app:

docker-compose build --build-arg GITHUB_USERNAME="{username}" --build-arg GITHUB_TOKEN="{token}"
docker-compose up

This addon example serves the manifest under the following path:

{baseUrl}/manifest

The Server class is the entrypoint to the addon application.

The addon makes use of the following environment variables:

ADDON_KEY=helloworld
ADDON_NAME=Hello World
ADDON_DESCRIPTION=A sample addon that renders a UI component

PUBLIC_URL=
LOCAL_PORT=8080

The addon must be accessible through a public URL in order for Clockify to be able to communicate with it.

For this example we made use of a free service called ngrok.

After downloading the binary, we can execute the following command which will expose our server running on our local port through a public URL.

ngrok http 8080

We then pass the public URL that ngrok provides as an env variable:

PUBLIC_URL={ngrok public url}

displayed-text The custom text to be displayed.

The addon makes use of several HTTP handlers:

• Lifecycle handlers (installed, uninstalled, settings updated)
• UI Component handler

The first group is intended to handle lifecycle events and store related information linked to the lifecycle of the addon. The latter is intended to render the requested UI component.

The HelloWorldAddon class contains all the information related to the addon.