traefik/webui/readme.md
Ed Robinson 987ab7612d
Use the yarn pacakge manager for javascript
[Yarn](https://yarnpkg.com/) is a drop in replacement for npm.

We should use it because:

* It's faster
* It uses a lockfile, making the builds more deterministic.
2016-11-16 12:02:30 +00:00

76 lines
2.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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 :
```shell
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+](https://nodejs.org) [yarn](https://yarnpkg.com/)
- Go to the directory `webui`
- To install dependencies, execute the following commands:
- `yarn install`
- Build static Web UI, execute the following command:
- `gulp`
- 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 :
- `gulp 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](https://nodejs.org)
- [Yarn](https://yarnpkg.com/)
- [Generator FountainJS](https://github.com/FountainJS/generator-fountain-webapp)
- [Webpack](https://github.com/webpack/webpack)
- [AngularJS](https://docs.angularjs.org/api)
- [UI Router](https://github.com/angular-ui/ui-router)
- [UI Router - Documentation](https://github.com/angular-ui/ui-router/wiki)
- [Bootstrap](http://getbootstrap.com)
- [Angular Bootstrap](https://angular-ui.github.io/bootstrap)
- [D3](http://d3js.org)
- [D3 - Documentation](https://github.com/mbostock/d3/wiki)
- [NVD3](http://nvd3.org)
- [Angular nvD3](http://krispo.github.io/angular-nvd3)