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           # Generate Docker image
make generate-webui  # Generate static contents in `traefik/static/` folder.
```

## How to build (only for frontend developer)

- prerequisite: [Node 12.11+](https://nodejs.org) [Npm](https://www.npmjs.com/)

- 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](https://nodejs.org)
- [Npm](https://www.npmjs.com/)
- [Webpack](https://github.com/webpack/webpack)
- [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
			`make build # Generate Docker image`
			make generate-webui # Generate static contents in `traefik/static/` folder.
			```
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(node/webui): update node to 12.11 version 2019-10-14 15:18:04 +00:00			`- prerequisite: [Node 12.11+](https://nodejs.org) [Npm](https://www.npmjs.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
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00			- Go to the directory `webui`
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
Add a new dashboard page. 2019-08-26 16:15:41 +00:00			- `npm 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
Add a new dashboard page. 2019-08-26 16:15:41 +00:00			- `npm run build`
docs(webui): add more documentation 2015-12-22 22:33:12 +00:00
			- 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`
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
			Don't change manually the files in the directory `static`

			- Go to the directory `webui`
			- Edit files in `webui/src`
			`- Run in development mode :`
Add a new dashboard page. 2019-08-26 16:15:41 +00:00			- `npm run dev`
docs(webui): add documentation 2015-10-07 11:54:00 +00:00
			`## Libraries`

			`- [Node](https://nodejs.org)`
Add a new dashboard page. 2019-08-26 16:15:41 +00:00			`- [Npm](https://www.npmjs.com/)`
Move webui to FountainJS with Webpack 2016-07-23 17:59:54 +00:00			`- [Webpack](https://github.com/webpack/webpack)`
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)`