Set up development enviroment

Volumio Development Development talks
1

Hi Guys,

My goal is to make small modifications to the existing WebUI, but I am struggling to set up my development environment. I hope someone can help me or point me in the right direction. :slight_smile:

I have read the Volumio2 Github documentation: https://github.com/volumio/Volumio2/wiki & https://github.com/volumio/Volumio2-UI At the moment I am running a fresh Volumio 2.0 image on my Raspberry Pi and, today I successfully managed to SSH into my Raspberry Pi.

username: volumio
password: volumio

I understand that the WebUI needs to be compiled into static files, in order to be served by Volumio2. But how do I combine the Volumio OS with the modified WebUI? Sorry if I am asking to many questions! :open_mouth: But I am really excited about Volumio but I don’t know where to start.

Kind regards,

svdsande

2

You’re absolutely right as there’s no clear indication on how to do so…

You can set a dev environment on your computer and try your edits live on it.

To start clone the UI repo

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

Then install its dependencies (you must have node and bower installed )

cd Volumio2-UI
npm install
bower install

Now, you can develop on it, while retrieving data from Volumio2 (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 in /src/app/local-config.json with the IP of Volumio2

{
  "localhost": "http://192.168.31.234"
}

Now, you can live develop on it, and see live changes on your browser using

gulp serve --theme="volumio"

To finally deploy on your PI (and test on the default situation, which is always suggested)

gulp build --theme="volumio"

Remove everything from /volumio/http/www on your pi and copy the content of the dist folder there.

To get your contributions into Volumio2, please make a pull request

Let me know if there is something missing…

3

Hi Michelangelo,

Thanks for your reply! :slight_smile:

I managed to get the WebUI up and running with the steps you gave me. The only thing going wrong is the IP address. I created config.json in the Volumio2 WebUI repo under src/app/config.json. Is this the wrong place? Because when I run the command gulp serve --theme=“volumio” it launches the wrong IP address.

Kind regards,

svdsande

4

My bad, the right path for the json file is

/src/app/local-config.json

:wink:

5

Thanks Michelangelo! It works great :slight_smile: Today I made some modifications to the existing Volumio2 WebUI, and I managed to upload it to my Raspberry Pi using SSH.

6

I get the following error? after issuing the gulp command…

Error: Node Sass does not yet support your current environment: Linux Unsupported architecture (arm) with Node.js 6.x
For more information on which environments are supported please see:
github.com/sass/node-sass/releases/tag/v3.13.1
at module.exports (/volumio/Volumio2-UI/node_modules/node-sass/lib/binding.js:13:13)
at Object. (/volumio/Volumio2-UI/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:570:32)
at Object.Module._extensions…js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/volumio/Volumio2-UI/node_modules/gulp-sass/index.js:163:21)
[23:22:51] Finished ‘angularConfig’ after 1.37 s
[23:22:51] gulp-inject 37 files into index.scss.

7

You should build the UI on your PC, not on the raspberry PI itself