Volumio Documentation
 

Set up development environment for UI

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 Socket.io Socket.io

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 https://github.com/volumio/Volumio2-UI

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

/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"

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:

/volumio/http/www