Run in simulator button missing when accessing https://banglejs.com/apps

[sebi5361]

For an unknown reason, there are no buttons to run apps in the simulator when accessing https://banglejs.com/apps/ using Chrome on my Windows 10 PC. However if I fork BangleApps repository, clone it and run it on my local server, the buttons to run the apps in the simulator show up.

[gfwilliams]

Can you try pulling up the Chrome dev console then click-clicking on 'reload' and choosing 'Empty Cache and hard reload'? Checked here and it's working fine. Not all apps have it, but many do

[sebi5361]

I have done what you told me and found the answer: it is related to my Adblock Plus extension: If I disable it on the banglejs.com/apps/ website, the buttons appear as expected. I will add banglejs.com to the Adblock Plus extension white list not to get this issue. I believe this issue might concern many other people as many of us use ad blockers...

However I am still having a bug: If I click on such a button I get this error message: // Error loading https://banglejs.com/apps/#apps/mclock/clock-morphing.js after following this link: https://www.espruino.com/ide/emulator.html?codeurl=https://banglejs.com/apps/#apps/mclock/clock-morphing.js&upload The #apps in the link looks suspicious.

[sebi5361]

I have noticed that I don't get this issue when clicking on the button when I am on https://banglejs.com/apps/ However if I am on https://banglejs.com/apps/# I get the issue. Same with https://banglejs.com/apps/index.html

[gfwilliams]

Wow, good spot about the '#' thing. I'll get that fixed.

wrt. AdBlock - if you figure out what's wrong it'd be great if you could issue a PR. Or if there were a way to detect AdBlock and put a banner at the top of the screen telling people about it, that'd be cool.

[sebi5361]

I am not a "real" programmer and I believe this is out of my reach... Sorry (I barely know how to play around with JavaScript by adjusting your code to my needs~~)

On my local server when clicking on the simulator button, this link opens: https://www.espruino.com/ide/emulator.html?codeurl=https://sebi5361.synology.me:447/apps/demoapp/app.js&upload and I get this error message: // Error loading https://sebi5361.synology.me:447/apps/demoapp/app.js However the link to the file seems correct and I can access it. Do you know the reason for this problem? Does it have to do with the :447 port in the link?

[gfwilliams]

Ok, sorted (at least the link issue)

It probably doesn't work for you because you need 'Cross Origin' headers on your server - check out https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[sebi5361]

Thanks. Indeed the Chrome Console displayed this error message:

Access to fetch at 'https://sebi5361.synology.me:447/BangleApps/apps/demoapp/app.js' from
origin 'https://www.espruino.com' has been blocked by CORS policy: No 'Access-Control-Allow-
Origin' header is present on the requested resource. If an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

and to fix it, I had to set nginx CORS configuration wide open by adding:

   location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
   }

to the server {...} block in /etc/nginx/app.d/server.webstation-vhost.conf.