Setting up a development environment for Volumio2 UI

Volumio2 UI is an AngularJS based WebAPP. You can develop on it from your PC\MAC but you need to have a Volumio device on your network. The UI communicates with Volumio's backend via WebSockets using

To set up a development environment on your PC\MAC do:

Install dependencies (only first time)

  • Download and install Node.js ** Volumio2-UI currently requires '''Node.js 6.*'''. 6.9.5
  • Download and install Bower
  • Download and install Gulp

Prepare Volumio2 UI Development folder

  • Clone the UI with:
 git clone

We suggest developing on the development branch, and to push your Pull requests there:

 cd Volumio2-UI
 git checkout development
  • Install npm dependencies
npm install
  • Install bower dependencies
bower install
  • Tell the UI where our Volumio instance is :

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


The file will look like

  "localhost": ""

Now, feel free to edit and see live changes on a local browser with dynamically generated UI. To do so:

gulp serve --theme="volumio"

Once finished, to deploy on Volumio 2, first build it. if you want production optimization use --env="production"

gulp build --theme="volumio" --env="production"

And deploy by copying the content of dist directory on Volumio2 device to: