You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: developers/frontend/index.html
+33-34Lines changed: 33 additions & 34 deletions
Original file line number
Diff line number
Diff line change
@@ -79,60 +79,59 @@ <h1 class="title indent">
79
79
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.
80
80
</p>
81
81
<h2><aclass="title-link" name="setting-up-the-environment" href="#setting-up-the-environment"></a> Setting up the environment</h2>
82
-
<p>Home Assistant will by default serve the compiled version of the frontend. As everything is compiled into the file <codeclass="highlighter-rouge">frontend.html</code> 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 <codeclass="highlighter-rouge">configuration.yaml</code> to have these lines:</p>
All commands below need to be run from inside the home-assistant-polymer repository.
84
+
</p>
85
+
<p>Home Assistant will by default serve the compiled version of the frontend from the hass_frontend Python package. For development you want to work with the unbundled source files which are in the home-assistant-polymer repository.</p>
86
+
<p>First step is to configure Home Assistant to use the development mode for the frontend. Do this by updating the frontend config in your <codeclass="highlighter-rouge">configuration.yaml</code> and set the path to the polymer repo:</p>
<p>Next step is to git clone the <ahref="https://github.com/home-assistant/home-assistant-polymer">home-assistant-polymer repository</a>. You can place the repository anywhere on your system but to keep these instructions simple we’re cloning the home-assistant-polymer repository as a sibling to the Home Assistant repo.</p>
<p>Node.js is required to setup the frontend development environment. The preferred method of installing node.js is <ahref="https://github.com/creationix/nvm">nvm</a>. Install nvm using the instructions in the <ahref="https://github.com/creationix/nvm#install-script">README</a>, and install the correct node.js by running the following command from the <codeclass="highlighter-rouge">home-assistant</code> directory:</p>
<p>Node.js is required to build the frontend. The preferred method of installing node.js is with <ahref="https://github.com/creationix/nvm">nvm</a>. Install nvm using the instructions in the <ahref="https://github.com/creationix/nvm#install-script">README</a>, and install the correct node.js by running the following command:</p>
<p><ahref="https://yarnpkg.com/en/">Yarn</a> is used as the package manager for node modules. <ahref="https://yarnpkg.com/en/docs/install">Install yarn using the instructions here.</a></p>
93
-
<p>Next, development dependencies need to be installed to bootstrap the frontend development environment by running from the <codeclass="highlighter-rouge">home-assistant</code> directory:</p>
<p>Next, development dependencies need to be installed to bootstrap the frontend development environment. First activate the right Node version and then download all the needed modules and do a first build:</p>
107
+
<divclass="language-bash highlighter-rouge"><preclass="highlight"><code><spanclass="gp">$ </span>nvm use
108
+
<spanclass="gp">$ </span>script/bootstrap
95
109
</code></pre>
96
110
</div>
97
-
<p>This script will use yarn and bower to install all the necessary dependencies necessary for development in</p>
<p>If you’re planning on issuing a PR back to the Home Assistant codebase you need to fork the polymer project and add your fork as a remote to the Home Assistant Polymer repo.</p>
114
+
<divclass="language-bash highlighter-rouge"><preclass="highlight"><code><spanclass="gp">$ </span>git remote add <remote name> <github URL to your fork>
102
115
</code></pre>
103
116
</div>
104
117
<p>When you’ve made your changes and are ready to push them change to the working directory for the polymer project and then push your changes</p>
<h1><aclass="title-link" name="building-the-polymer-frontend" href="#building-the-polymer-frontend"></a> Building the Polymer frontend</h1>
121
-
<p>Building a new version of the frontend is as simple as running <codeclass="highlighter-rouge">script/build_frontend</code>. This fires off the following commands:</p>
<li>Vulcanize and minify the core and panel sources to build dir.</li>
129
-
</ul>
130
-
</li>
131
-
<li>Copy the webcomponents polyfill <codeclass="highlighter-rouge">webcomponents-lite.min.js</code> from <strong>home-assistant-polymer</strong> to <codeclass="highlighter-rouge">components/frontend/www_static/webcomponents-lite.min.js</code>.</li>
132
-
<li>Copy the final frontend build <codeclass="highlighter-rouge">frontend.html</code> and panel sources from <strong>home-assistant-polymer</strong> to <codeclass="highlighter-rouge">components/frontend/www_static/frontend/</code>.</li>
133
-
<li>Generate MD5 hashes of core and panel sources.</li>
134
-
<li>Create gzip versions of all the sources.</li>
135
-
</ul>
134
+
<p>Building a new version of the frontend is as simple as running <codeclass="highlighter-rouge">script/build_frontend</code>.</p>
0 commit comments