Problems with UI Development on Mac

Help and Support Help
1

Hi,

I have done everything in the doc Set up development environment for UI - Volumio Documentation

It seems to work fine, but when I open localhost:3000 I only see an empty page and the gulp serve terminal window shows no reaction.

It looks like the page will not be built. But why?

Here’s the source of the page in safari:

<!doctype html>

<link rel="apple-touch-icon" sizes="57x57" ng-href="{{touchIconsUrl}}/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" ng-href="{{touchIconsUrl}}/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" ng-href="{{touchIconsUrl}}/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" ng-href="{{touchIconsUrl}}/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" ng-href="{{touchIconsUrl}}/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" ng-href="{{touchIconsUrl}}/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" ng-href="{{touchIconsUrl}}/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" ng-href="{{touchIconsUrl}}/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" ng-href="{{touchIconsUrl}}/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" ng-href="{{touchIconsUrl}}/android-chrome-192x192.png" sizes="192x192">
<link rel="mask-icon" ng-href="{{touchIconsUrl}}/safari-pinned-tab.svg" color="#5bbad5">
<link rel="apple-touch-startup-image" ng-href="{{touchIconsUrl}}/apple-touch-icon-180x180.png">
<meta name="msapplication-TileColor" content="#4bbe87">
<meta name="msapplication-navbutton-color" content="@BAR_COLOR">
<meta name="msapplication-TileImage" content="{{touchIconsUrl}}/mstile-144x144.png">
<meta name="msapplication-config" content="{{touchIconsUrl}}/browserconfig.xml">
<meta name="apple-mobile-web-app-title" content="@APP_NAME">
<meta name="theme-color" content="@BAR_COLOR">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="@BAR_COLOR">

<link rel="manifest" ng-href="{{variantAssetsUrl}}/manifest.json">

<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css" />
<link rel="stylesheet" href="../bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" />
<link rel="stylesheet" href="../bower_components/angular-toastr/dist/angular-toastr.css" />
<link rel="stylesheet" href="../bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="../bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="../bower_components/components-font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="../bower_components/select2/select2.css" />
<link rel="stylesheet" href="../bower_components/angularjs-datepicker/dist/angular-datepicker.css" />
<link rel="stylesheet" href="../bower_components/angular-loading-bar/build/loading-bar.css" />
<!-- endbower -->
<!-- endbuild -->

<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="app/index.css">
<!-- endinject -->
<!-- endbuild -->

<!--[if lt IE 10]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div ui-view="layout" style="height: 100%;"></div>

<div id="cssExposer"></div>

<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.js"></script>
<script src="../bower_components/angular-bootstrap-slider/slider.js"></script>
<script src="../bower_components/bootstrap-switch/dist/js/bootstrap-switch.js"></script>
<script src="../bower_components/angular-bootstrap-switch/dist/angular-bootstrap-switch.js"></script>
<script src="../bower_components/jquery-knob/js/jquery.knob.js"></script>
<script src="../bower_components/angular-knob/src/angular-knob.js"></script>
<script src="../bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-ui-select/dist/select.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/ui-router-extras/release/ct-ui-router-extras.js"></script>
<script src="../bower_components/matchmedia/matchMedia.js"></script>
<script src="../bower_components/matchmedia-ng/matchmedia-ng.js"></script>
<script src="../bower_components/hammerjs/hammer.js"></script>
<script src="../bower_components/AngularHammer/angular.hammer.js"></script>
<script src="../bower_components/ngDraggable/ngDraggable.js"></script>
<script src="../bower_components/ng-file-upload/ng-file-upload.js"></script>
<script src="../bower_components/angular-translate/angular-translate.js"></script>
<script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="../bower_components/firebase/firebase.js"></script>
<script src="../bower_components/angularfire/dist/angularfire.js"></script>
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="../bower_components/angular-stripe-checkout/angular-stripe-checkout.js"></script>
<script src="../bower_components/ng-letter-avatar/ngletteravatar.js"></script>
<script src="../bower_components/select2/select2.js"></script>
<script src="../bower_components/angular-country-select/dist/angular-country-select.js"></script>
<script src="../bower_components/angularjs-datepicker/dist/angular-datepicker.js"></script>
<script src="../bower_components/angular-mailchimp-subscribe/mailchimp.js"></script>
<script src="../bower_components/angular-loading-bar/build/loading-bar.js"></script>
<!-- endbower -->
<script src="/app/lib/babel-polyfill/polyfill.min.js"></script>
<script src="/app/lib/socket/socket.io-1.4.5.js"></script>
<script src="/app/lib/sortable/sortable-1.4.2.js"></script>
<script src="/app/volumio.constant.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp/serve,.tmp/partials}) scripts/app.js -->
<!-- inject:js -->
<script src="app/index.module.js"></script>
<!-- endinject -->

<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->

Kind regards,
zebu

2

try chrome browser instead…

3

same issue

4

could you use ip of the pi? instead of local host? ssh you could not have yet you should enable it
from your ip /dev
i would try or a new fresh download (do it with a other browser ) of 2.882 or try the 3.xx version

5

yes I used the IP of my PI in the file /src/app/local-config.json

and ssh is already enabled. And I use version 2.882

For me it’s like gulp isn’t working correctly. If I open index.html with finder gulp serve is reacting:
[17:35:27] Starting ‘angularConfig’…
[17:35:27] Starting ‘styles’…
[17:35:27] Finished ‘angularConfig’ after 39 ms
[17:35:27] Starting ‘scripts’…
[17:35:32] Time: 5572ms
Asset Size Chunks Chunk Names
index.module.js 622 kB 0 [emitted] main
[BS] Reloading Browsers…
[17:35:32] Finished ‘scripts’ after 5.63 s
[17:35:32] gulp-inject 59 files into index.scss.
[BS] 1 file changed (index.css)
[17:35:33] Finished ‘styles’ after 6.36 s
[17:35:33] Starting ‘inject’…
[17:35:33] gulp-inject 1 files into index.html.
[17:35:33] gulp-inject 1 files into index.html.
[17:35:33] Finished ‘inject’ after 17 ms

My firewall is off!

6

@zebu you are better off following the guide at GitHub - volumio/Volumio2-UI: Volumio2 Web Based User Interface - the one you linked to seems outdated and requires attention.

That being said, I have never managed to get the UI Dev environment up and running based on the guide on Github either, so if you do manage, please keep track of your steps so we can update docs :slight_smile:

7

It’s so embarrassing and I’m so sorry. It was my fault: I named the config file .js instead of .json