traefik/webui

Traefik Web UI

Access to Traefik Web UI, ex: http://localhost:8080

Interface

Traefik Web UI provide 2 types of information:

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

How to build (for backend 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 frontend developer)

• prerequisite: Node 12.11+ Npm

• Go to the directory webui

• To install dependencies, execute the following commands:

  • npm install

• Build static Web UI, execute the following command:

  • npm 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 frontend 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 :
  • npm run dev

Libraries

• Node
• Npm
• Webpack
• Vue
• Bulma
• D3
• D3 - Documentation