Do not use development mode in production. Home Assistant uses aggressive caching to improve the mobile experience. This is disabled during development so that you do not have to restart the server in between changes.
# {% linkable_title Turning on development mode %} Home Assistant will by default serve the compiled version of the frontend. To change it so that each component and JavaScript are served separately, update your `configuration.yaml` to have these lines: ```yaml http: development: 1 ``` Next step is to get the frontend code. When you clone the Home Assistant repository, the frontend repository is not cloned by default. You will have to trigger this manually by running from the command line: ```bash git submodule update --init ``` After checking out the frontend code, you will have to install the frontend dependencies. Firing off a build of the frontend by running `script/build_frontend` will ensure they get installed. Once this is done, you can start editting the webcomponents in the folder `homeassistant/components/frontend/www_static/home-assistant-polymer/src`. To see the changes you've made, simply refresh your browser. ## {% linkable_title Enabling JavaScript backend development %} Polymer is only providing a UI toolkit for Home Assistant. All data management and interaction with the server is done by `home-assistant-js` leveraging NuclearJS. To enable JavaScript development: ```bash cd homeassistant/components/frontend/www_static/home-assistant-polymer/ npm run setup_js_dev npm run js_dev ``` `npm run js_dev` will start the process that will ensure that your latest changes to the JavaScript files will be loaded when you refresh the page. This command has to be always running while working on home-assistant-js. After your changes have been accepted into the `home-assistant-js` repository, we'll have to update Home Assistant Polymer to use the latest version. This can be done by updating `package.json`. Look for the line that contains `home-assistant-js` and update the SHA to the SHA of your commit. # {% linkable_title Building the Polymer frontend %} Building a new version of the frontend is as simple as running `script/build_frontend`. This fires off the following commands: * **home-assistant-polymer**: Install NPM dependencies. * **home-assistant-polymer**: start frontend build. * Compile all used JavaScript to `_app_compiled.js`. * Install Bower dependencies. * Vulcanize all Webcomponents to `frontend.vulcan.html`. * Minify `frontend.vulcan.html` and save it as `frontend.html`. * Copy the webcomponents polyfill `webcomponents-lite.min.js` from **home-assistant-polymer** to `components/frontend/www_static/webcomponents-lite.min.js`. * Copy the final frontend build `frontend.html` from **home-assistant-polymer** to `components/frontend/www_static/frontend/`. * Generate MD5 hash of `frontend.html` to signal caches to redownload the UI.
Some domains will be filtered out of the main view and are available through separate menu options. Examples are `group`, `script`, `scene`.
The different card types can be found [here](https://github.com/balloob/home-assistant-polymer/tree/master/src/state-summary).
Adding a custom card type can be done with a few simple steps. For this example we will add a new
state card for the domain `camera`:
_(All files in this example link to their source-code)_
1. Add `'camera'` to the array `DOMAINS_WITH_CARD` in the file [`/util/state-card-type.js`](https://github.com/balloob/home-assistant-polymer/blob/master/src/util/state-card-type.js#L3-L4).
2. Create the files `state-card-camera.html` and `state-card-camera.js` in the folder [`/state-summary/`](https://github.com/balloob/home-assistant-polymer/tree/master/src/state-summary).
3. Add `require('./state-card-camera')` to [`state-card-content.js`](https://github.com/balloob/home-assistant-polymer/blob/master/src/state-summary/state-card-content.js).
4. Add `` to [`state-card-content.html`](https://github.com/balloob/home-assistant-polymer/blob/master/src/state-summary/state-card-content.html).
# {% linkable_title More info screens for custom types %}
Whenever the user taps or clicks on one of the cards, a more info dialog will show. The header of this dialog will be the state card, followed by the history of this entity for the last 24 hours. Below this the more info component is rendered for that entity. The more info component can show more information or allow more ways of control.
The more info dialog for a light allows the user to control the color and the brightness.