traefik/webui/readme.md

# 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 :

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

## How to build (only for frontend developer)

- prerequisite: [Node 20.14+](https://nodejs.org) [Yarn 1.22.22](https://yarnpkg.com/)

- Go to the `webui/` directory

- To install dependencies, execute the following commands:

  - `yarn install`

- Build static Web UI, execute the following command:

  - `yarn build`

- Static contents are built in the `webui/static/` directory

**Do not manually change the files in the `webui/static/` directory**

- The build allows to:
  - optimize all JavaScript
  - optimize all CSS
  - add vendor prefixes to CSS (cross-browser support)
  - add a hash in the file names to prevent browser cache problems
  - optimize all images at build time
  - bundle JavaScript in one file

## How to edit (only for frontend developer)

**Do not manually change the files in the `webui/static/` directory**

- Go to the `webui/` directory
- Edit files in `webui/src/`
- Run in development mode :
  - `yarn dev`

## Libraries

- [Node](https://nodejs.org)
- [Yarn](https://yarnpkg.com/)
- [Quasar](https://quasar.dev/)
- [Vue](https://vuejs.org/)
- [Bulma](https://bulma.io)
- [D3](https://d3js.org)
- [D3 - Documentation](https://github.com/mbostock/d3/wiki)
Uses ASCII characters to spell Traefik 2018-10-17 14:24:04 +00:00			`# Traefik Web UI`
docs(webui): add documentation 2015-10-07 11:54:00 +00:00
Uses ASCII characters to spell Traefik 2018-10-17 14:24:04 +00:00			`Access to Traefik Web UI, ex: http://localhost:8080`
docs(webui): add documentation 2015-10-07 11:54:00 +00:00
			`## Interface`

Fix typos in documentation 2020-04-08 16:54:03 +00:00			`Traefik Web UI provide 2 types of information:`
chore(webui): format code with prettier 2019-02-05 17:18:04 +00:00
docs(webui): add documentation 2015-10-07 11:54:00 +00:00			`- Providers with their backends and frontends information.`
			`- Health of the web server.`

Fixed readme misspelling 2019-05-17 11:40:04 +00:00			`## How to build (for backend developer)`
feat: build static file in global process - Create a webui DockerFile - add task `generate-webui` - use task `generate-webui` in build process 2016-01-20 21:45:51 +00:00
			`Use the make file :`

			```shell
Fix empty WebUI static assets directory 2022-02-18 14:44:08 +00:00			`make build-image # Generate Docker image.`
			make clean-webui generate-webui # Generate static contents in `webui/static/` folder.
feat: build static file in global process - Create a webui DockerFile - add task `generate-webui` - use task `generate-webui` in build process 2016-01-20 21:45:51 +00:00			```
docs(webui): add documentation 2015-10-07 11:54:00 +00:00
Fixed readme misspelling 2019-05-17 11:40:04 +00:00			`## How to build (only for frontend developer)`
docs(webui): add documentation 2015-10-07 11:54:00 +00:00
chore(ci): improve webui build and lint 2024-06-07 14:56:04 +00:00			`- prerequisite: [Node 20.14+](https://nodejs.org) [Yarn 1.22.22](https://yarnpkg.com/)`
prefere yarnpkg over yarn to avoid conflict with Hadoop Yarn cli. I don’t know the best practice, but i do have Apache Yarn installed on my machine, so I get this conflict. Of course this conflict does not arised when building within the docker. https://github.com/yarnpkg/yarn/issues/2337 Signed-off-by: Gaetan Semet <gaetan@xeberon.net> 2017-05-05 16:13:30 +00:00
Fix empty WebUI static assets directory 2022-02-18 14:44:08 +00:00			- Go to the `webui/` directory
feat: new Web UI build system - use generator-gulp-angular by @swiip - remove old static file 2015-12-22 00:02:59 +00:00
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00			`- To install dependencies, execute the following commands:`
chore(webui): format code with prettier 2019-02-05 17:18:04 +00:00
Replace npm with yarn to install/run the webui 2022-03-03 17:08:07 +00:00			- `yarn install`
feat: new Web UI build system - use generator-gulp-angular by @swiip - remove old static file 2015-12-22 00:02:59 +00:00
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00			`- Build static Web UI, execute the following command:`
chore(webui): format code with prettier 2019-02-05 17:18:04 +00:00
Replace npm with yarn to install/run the webui 2022-03-03 17:08:07 +00:00			- `yarn build`
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00
Fix empty WebUI static assets directory 2022-02-18 14:44:08 +00:00			- Static contents are built in the `webui/static/` directory
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00
Fix empty WebUI static assets directory 2022-02-18 14:44:08 +00:00			Do not manually change the files in the `webui/static/` directory
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00
Replace go-bindata with Go embed Co-authored-by: nrwiersma <nick@wiersma.co.za> 2021-09-15 08:36:14 +00:00			`- The build allows to:`
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00			`- optimize all JavaScript`
			`- optimize all CSS`
Replace npm with yarn to install/run the webui 2022-03-03 17:08:07 +00:00			`- add vendor prefixes to CSS (cross-browser support)`
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00			`- add a hash in the file names to prevent browser cache problems`
Replace go-bindata with Go embed Co-authored-by: nrwiersma <nick@wiersma.co.za> 2021-09-15 08:36:14 +00:00			`- optimize all images at build time`
Move webui to FountainJS with Webpack 2016-07-23 17:59:54 +00:00			`- bundle JavaScript in one file`
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00
Fixed readme misspelling 2019-05-17 11:40:04 +00:00			`## How to edit (only for frontend developer)`
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00
Fix empty WebUI static assets directory 2022-02-18 14:44:08 +00:00			Do not manually change the files in the `webui/static/` directory
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00
Fix empty WebUI static assets directory 2022-02-18 14:44:08 +00:00			- Go to the `webui/` directory
			- Edit files in `webui/src/`
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00			`- Run in development mode :`
Replace npm with yarn to install/run the webui 2022-03-03 17:08:07 +00:00			- `yarn dev`
docs(webui): add documentation 2015-10-07 11:54:00 +00:00
			`## Libraries`

			`- [Node](https://nodejs.org)`
Replace npm with yarn to install/run the webui 2022-03-03 17:08:07 +00:00			`- [Yarn](https://yarnpkg.com/)`
Fix UI unit tests 2024-05-21 13:26:04 +00:00			`- [Quasar](https://quasar.dev/)`
refactor(webui): use @vue/cli to bootstrap new ui 2019-07-15 08:58:03 +00:00			`- [Vue](https://vuejs.org/)`
New web ui 2018-04-27 11:12:04 +00:00			`- [Bulma](https://bulma.io)`
HTTPS for images, video and links in docs. 2017-09-01 17:44:03 +00:00			`- [D3](https://d3js.org)`
New web ui 2018-04-27 11:12:04 +00:00			`- [D3 - Documentation](https://github.com/mbostock/d3/wiki)`