This UI is meant to be used as a standalone Web User Interface communicating via Volumio2 Backend via Socket.io API, see Volumio2 WebSocket API reference
Currently the UI is served via Express Static Server, and resides at /volumio/http/www
(Classic UI) and /volumio/http/www3
(Contemporary UI)
This repo holds the source code of Volumio UI Volumio2, which is compiled and hosted in Volumio system images.
Only the dist/
and dist3/
branches are needed by Volumio2, so there is a dist branch which contains just that.
You must have Node.js, Npm and Bower installed. Node.js suggested version is 8.17.0 (lower versions and higher versions might fail). It's strongly suggested to use NVM to set up the proper Node.js Environment.
Clone the Repo:
git clone https://github.com/volumio/Volumio2-UI.git
Then, install its depencencies
cd Volumio2-UI
npm install
bower install
Now, you can develop on it, while retrieving data from Volumio2 backend (you must have a Volumio2 device on your network and know its IP address). To tell the UI where to find Volumio 2 backend, create a file with the IP of Volumio2 in
/src/app/local-config.json
The file will look like
{
"localhost": "http://192.168.31.234"
}
Now, feel free to edit and see live changes on a local browser with dynamically generated UI. To do so:
gulp serve --theme="volumio"
Additional parameters can be env, for selecting the environment which can be production or development
gulp serve --theme="volumio" --env="production"
And debug, to show debug console logs on the browser
gulp serve --theme="volumio" --env="production" --debug
Once finished, to deploy on Volumio 2, first build it. if you want production optimization use --env="production"
npm run gulp build --theme="volumio" --env="production"
And deploy by copying the content of dist directory on Volumio2 device to:
/volumio/http/www