traefik/webui

Træfɪk Web UI

Access to Træfɪk Web UI, ex: http://localhost:8080

Interface

Træfɪk Web UI provide 2 types of informations:

• Providers with their backends and frontends information.
• Health of the web server.

How to build (for backends developer)

Use the make file :

make build           # Generate Docker image
make generate-webui  # Generate static contents in `traefik/static/` folder.

How to build (only for frontends developer)

• prerequisite: Node 4+ yarn

• Go to the directory webui

• To install dependencies, execute the following commands:

  • yarn install

• Build static Web UI, execute the following command:

  • yarn run build

• Static contents are build in the directory static

Don't change manually the files in the directory static

• The build allow to:
  • optimize all JavaScript
  • optimize all CSS
  • add vendor prefixes to CSS (cross-bowser support)
  • add a hash in the file names to prevent browser cache problems
  • all images will be optimized at build
  • bundle JavaScript in one file

How to edit (only for frontends developer)

Don't change manually the files in the directory static

• Go to the directory webui

• Edit files in webui/src

• Run in development mode :

  • yarn run serve

• Træfɪk API connections are defined in:

  • webui/src/app/core/health.resource.js
  • webui/src/app/core/providers.resource.js

• The pages contents are in the directory webui/src/app/sections.

Libraries

• Node
• Yarn
• Generator FountainJS
• Webpack
• AngularJS
• UI Router
  • UI Router - Documentation
• Bootstrap
• Angular Bootstrap
• D3
  • D3 - Documentation
• NVD3
• Angular nvD3