- Polymer allows building encapsulated custom HTML elements. Home-Assistant-Polymer source code on GitHub.
- NuclearJS is a reactive flux built with ImmutableJS data structures. Home-Assistant-JS source code on GitHub.
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.
Home Assistant will by default serve the compiled version of the frontend. 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. To enable development mode for Home Assistant, update your
configuration.yaml to have these lines:
http: development: 1
Node.js is required to setup the frontend development environment. The preferred method of installing node.js is nvm. Install nvm using the instructions in the README, and install node.js by running the following command:
$ nvm install node
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:
$ 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:
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.
- Install Bower dependencies.
- Vulcanize and minify the core and panel sources to build dir.
- Copy the webcomponents polyfill
webcomponents-lite.min.jsfrom home-assistant-polymer to
- Copy the final frontend build
frontend.htmland panel sources from home-assistant-polymer to
- Generate MD5 hashes of core and panel sources.
- Create gzip versions of all the sources.