Accessing Ports and UI

Katacoda allows ports running include the environment to be made available to users. This is designed for displaying dashboards and UI elements running inside a container.

Within the markdown for a step, use a URL shown below that will be updated when the environment is connected.

Markdown Example

Include the following placeholders

Render port 8500: https://[[HOST_SUBDOMAIN]]-8500-[[KATACODA_HOST]].environments.katacoda.com/

Render port 80: https://[[HOST_SUBDOMAIN]]-80-[[KATACODA_HOST]].environments.katacoda.com/

Display page allowing user to select port: https://[[HOST_SUBDOMAIN]]-[[KATACODA_HOST]].environments.katacoda.com/

https://katacoda.com/scenario-examples/scenarios/placeholders

Using Placeholders in Scripts

https://katacoda.com/scenario-examples/scenarios/placeholders

Display Dashboard Tabs

"environment": {
  "showdashboard": true,
  "dashboards": [{"name": "Display 80", "port": 80}, {"name": "Display 8080", "port": 8080}],
}

https://katacoda.com/scenario-examples/scenarios/displaying-web-ui

Displaying Dashboard In-line With Scenario

https://katacoda.com/scenario-examples/scenarios/dashboard-tabs-iframe

Screenshots can be included as images in the sidebar.

Port Binding

The listening process must be configured to listen on all IPs and not just localhost or 127.0.0.1.

Angular

With the Angular Live Development Server you can specify this using ng serve --host 0.0.0.0.

Note, with Angular Live Development Server the Host parameter is also checked. When running within Katacoda, this check should also be disabled with the following parameter.

ng serve --host 0.0.0.0 --disable-host-check

Kubernetes

If you are using kubectl port-forward please read how to make it publicly accessible.