WebUI

Design Principles

Unlike previous WebUI, Volumio 2 UI is meant to be a "separate" component from the system. This means:

• The UI is delivered statically by express, or other server if performances are better
• The UI (Front End) has no common entry point with the Backend
• Backend and Front End (UI) communicate only with WebSockets and occasionally with REST APIs
• In the future, we can imagine a UI hosted on a CDN, which can be accessed by any internet connected device and control local Volumio Devices
• The UI is built with Angular
• UI is made with "components", pieces that have their own code and CSS. This allows it to be easily edited and themed
• ThE UI is built with Yeoman's YO for scaffholding and Gulp as buildsystem. This speeds up development process. However, to generate the final UI it needs to be "compiled". This process generates HTML files, minified JS and CSS.

Getting Started

The UI resides on a different Repo than Backend. To clone it

git clone https://github.com/volumio/Volumio2-UI

Install its packages

npm install

To start a webserver for the current UI

gulp serve

This will initiate a webserver, that will automatically update the page once an edit is made. This speeds up things considerebly...

Creating a distributable version

As said previously, UI needs to be "compiled" into static files, in order to be served by Volumio.