2018-10-17 14:24:04 +00:00
|
|
|
# Traefik Web UI
|
2015-10-07 11:54:00 +00:00
|
|
|
|
2018-10-17 14:24:04 +00:00
|
|
|
Access to Traefik Web UI, ex: http://localhost:8080
|
2015-10-07 11:54:00 +00:00
|
|
|
|
|
|
|
## Interface
|
|
|
|
|
2020-04-08 16:54:03 +00:00
|
|
|
Traefik Web UI provide 2 types of information:
|
2019-02-05 17:18:04 +00:00
|
|
|
|
2015-10-07 11:54:00 +00:00
|
|
|
- Providers with their backends and frontends information.
|
|
|
|
- Health of the web server.
|
|
|
|
|
2019-05-17 11:40:04 +00:00
|
|
|
## How to build (for backend developer)
|
2016-01-20 21:45:51 +00:00
|
|
|
|
|
|
|
Use the make file :
|
|
|
|
|
|
|
|
```shell
|
2021-09-15 08:36:14 +00:00
|
|
|
make build-image # Generate Docker image
|
|
|
|
make generate-webui # Generate static contents in `traefik/webui/static/` folder.
|
2016-01-20 21:45:51 +00:00
|
|
|
```
|
2015-10-07 11:54:00 +00:00
|
|
|
|
2019-05-17 11:40:04 +00:00
|
|
|
## How to build (only for frontend developer)
|
2015-10-07 11:54:00 +00:00
|
|
|
|
2019-10-14 15:18:04 +00:00
|
|
|
- prerequisite: [Node 12.11+](https://nodejs.org) [Npm](https://www.npmjs.com/)
|
2017-05-05 16:13:30 +00:00
|
|
|
|
2021-09-15 08:36:14 +00:00
|
|
|
- Go to the `webui` directory
|
2015-12-22 00:02:59 +00:00
|
|
|
|
2015-12-22 22:33:12 +00:00
|
|
|
- To install dependencies, execute the following commands:
|
2019-02-05 17:18:04 +00:00
|
|
|
|
2019-08-26 16:15:41 +00:00
|
|
|
- `npm install`
|
2015-12-22 00:02:59 +00:00
|
|
|
|
2015-12-22 22:33:12 +00:00
|
|
|
- Build static Web UI, execute the following command:
|
2019-02-05 17:18:04 +00:00
|
|
|
|
2019-08-26 16:15:41 +00:00
|
|
|
- `npm run build`
|
2015-12-22 22:33:12 +00:00
|
|
|
|
2021-09-15 08:36:14 +00:00
|
|
|
- Static contents are built in the `webui/static` directory
|
2015-12-22 22:33:12 +00:00
|
|
|
|
2021-09-15 08:36:14 +00:00
|
|
|
**Do not manually change the files in the `webui/static` directory**
|
2015-12-22 22:33:12 +00:00
|
|
|
|
2021-09-15 08:36:14 +00:00
|
|
|
- The build allows to:
|
2015-12-22 22:33:12 +00:00
|
|
|
- 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
|
2021-09-15 08:36:14 +00:00
|
|
|
- optimize all images at build time
|
2016-07-23 17:59:54 +00:00
|
|
|
- bundle JavaScript in one file
|
2015-12-22 22:33:12 +00:00
|
|
|
|
2019-05-17 11:40:04 +00:00
|
|
|
## How to edit (only for frontend developer)
|
2015-12-22 22:33:12 +00:00
|
|
|
|
2021-09-15 08:36:14 +00:00
|
|
|
**Do not manually change the files in the `webui/static` directory**
|
2015-12-22 22:33:12 +00:00
|
|
|
|
2021-09-15 08:36:14 +00:00
|
|
|
- Go to the `webui` directory
|
2015-12-22 22:33:12 +00:00
|
|
|
- Edit files in `webui/src`
|
|
|
|
- Run in development mode :
|
2019-08-26 16:15:41 +00:00
|
|
|
- `npm run dev`
|
2015-10-07 11:54:00 +00:00
|
|
|
|
|
|
|
## Libraries
|
|
|
|
|
|
|
|
- [Node](https://nodejs.org)
|
2019-08-26 16:15:41 +00:00
|
|
|
- [Npm](https://www.npmjs.com/)
|
2016-07-23 17:59:54 +00:00
|
|
|
- [Webpack](https://github.com/webpack/webpack)
|
2019-07-15 08:58:03 +00:00
|
|
|
- [Vue](https://vuejs.org/)
|
2018-04-27 11:12:04 +00:00
|
|
|
- [Bulma](https://bulma.io)
|
2017-09-01 17:44:03 +00:00
|
|
|
- [D3](https://d3js.org)
|
2018-04-27 11:12:04 +00:00
|
|
|
- [D3 - Documentation](https://github.com/mbostock/d3/wiki)
|