Extension development: video would help

Extensions
3

I started with the dev-rig, using the extensions-hello-world template.

  • Local testing was successful.
  • Then came time for backend deployment on my nginx fronted secure server (https://alexr.ca)…
  1. changed viewer.js request URLs to http[s]://alexr.ca/srv/gr_hello/*:
function createRequest(type, method) {
  return {
    type: type,
    // url: location.protocol + '//localhost:3600/color/' + method,
    url: location.protocol + '//alexr.ca/srv/gr_hello/color/' + method,
    success: updateBlock,
    error: logError
  }
}
  1. modified services/backend.js:
// The developer rig uses self-signed certificates.  Node doesn't accept
// them by default.  Do not use this in production.
// process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';

...

const serverOptions = {
  host: 'localhost',
  port: 3600,
  routes: {
    cors: {
      origin: ['*'],
    },
  },
};
  1. copied it and other backend-relevant files & dirs to server
  2. on server…
  3. installed deps
  4. generated certs:
$ node bin/generate.js server
...
Please install and trust cert at conf/server.crt

Note: not sure if previous line is relevant for a secure (openssl+certbot) nginx-fronted web host. I’ll look into this, next

  1. added upstream and location blocks to my nginx config:
upstream gr_hello_backend {
  server 127.0.0.1:3600;
  keepalive 32;
}
...
location /srv/gr_hello {
  # service base URL will be https://alexr.ca/srv/gr_hello/

  proxy_pass http://gr_hello_backend;

  proxy_http_version 1.1;
  proxy_set_header Connection "";
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $http_host;

  access_log /var/www/logs/gr_hello.access.log;
  error_log /var/www/logs/gr_hello.error.log;
}
  1. restarted nginx service
  2. started extension backend service:
$ node services/backend.js -c <twitch dev provided extension clientId>
-s <twitch dev provided extension secret> -o <my owner id>

Back on rig…

  1. reloaded rig and hosted front-end only (no backend activation)
  2. console errors observed:
Access to XMLHttpRequest at 'https://client-event-reporter.twitch.tv/v1/stats'
from origin 'https://localhost.rig.twitch.tv:3000' has been blocked by CORS
policy: Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested
resource.

https://alexr.ca/srv/gr_hello/color/query 502 (Bad Gateway)

Suspecting rig certs issues, I will now bypass said rig and serve the front-end via some other setup (node serve), then will look into cert trusting.

The documentation and the rig could be improved. Several things are not explained very well (example: what are the implications of checking the “I am using the dev-rig” option when one creates an extension via the Twitch Dev Site for later deployment stages), which makes progress difficult.