jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-05-04 18:18:58 +00:00
Code Issues Packages Projects Releases Wiki Activity
home-assistant.io/source/developers/frontend.markdown
KAMAL AWASTHI 404815fae0 Fixed typos in some of the pages (#1270) 
* Update architecture.markdown

* Update component_discovery.markdown

* Update development_validation.markdown

* Update frontend.markdown

* Update maintenance.markdown

* Update multiple_instances.markdown

* Update python_api.markdown

* Update releasing.markdown

* Update rest_api.markdown

* Update server_sent_events.markdown

* Update website.markdown
2016-10-20 11:29:37 +02:00

3.0 KiB
Raw Blame History

layout, title, description, date, sidebar, comments, sharing, footer
layout title description date sidebar comments sharing footer
page Frontend development Tips and hints if you are starting on Home Assistant frontend development 2014-12-21 13:32 true false true true

Home Assistant uses Polymer for the UI and NuclearJS for maintaining the app state.

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 Setting up the environment %}

Home Assistant will by default serve the compiled version of the frontend. To enable development mode for Home Assistant, update your configuration.yaml to have these lines:

http:
  development: 1

As everything is compiled into the file frontend.html you do not want to work with the compiled version but with the separate files during development.

Next step is to get the frontend code. When you clone the Home Assistant repository, the frontend repository is not cloned by default. You can setup the frontend development environment by running:

$ script/setup

{% linkable_title Development %}

While you are developing, you need to have Rollup running to have your JavaScript changes be made available.

$ cd homeassistant/components/frontend/www_static/home-assistant-polymer
$ npm run js_dev

The source code for the frontend can be found in three different directories:

  • UI: homeassistant/components/frontend/www_static/home-assistant-polymer/src/
  • Core: homeassistant/components/frontend/www_static/home-assistant-polymer/home-assistant-js/src/
  • Panels: homeassistant/components/frontend/www_static/home-assistant-polymer/panels/

{% 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.
    • Install Bower dependencies.
    • Vulcanize and minify the core and panel sources to build dir.
  • 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 and panel sources from home-assistant-polymer to components/frontend/www_static/frontend/.
  • Generate MD5 hashes of core and panel sources.
  • Create gzip versions of all the sources.