Is Panel viewer path relative?

Extensions
1

Hello All,

I am a dev but just lost configuring my extension for local testing. I have a react app running on https:localhost:8080 did use mkcert for ssl.

Do these settings look right?

Base URI
https://localhost:8080/

Configuration Path
config.html

Live Configuration Path
Not Set

Panel Viewer Path
https://localhost:8080/index.html?view=panel

Viewer - Component Viewer Path
https://localhost:8080/index.html?view=panel

Video - Fullscreen Viewer Path
https://localhost:8080/index.html?view=panel

I can see the overlay when i click on the extension in my profile but not when i preview stream.

Screen Shot 2023-03-19 at 1.19.15 pm
Screen Shot 2023-03-19 at 1.19.15 pm1178Ă—565 53.7 KB

2

or i cant test it on twitch sandbox without hosting it on their servers? if i am doing localhost i need to setup dev rig?

3

Is Panel viewer path relative?

Yes, under hosted test and above your extension is at https://extClientID.ext-twitch.tv/extClientID/Version/md5OfZip/path_to_file_for_integration_point.html?querystring

So yes it’s relative

I wrote about the structure and layout here Twitch Extensions: Part 3 – The Architecture of an Extension – Barry Carlyon

Then trace and debug the issue using inspector with console and network tools

At the end of the day extensions are just websites, so normal website debugging apply.

Generally speaking, ignoring self signed certs, localhost cannot be SSl’ed and SSL cannot operte on non standard ports (should be 443 anything else may cause issues)

You could use the dev rig but all the dev rig does is start your hosting server for you using the certs you already made using mkcert

Twitch will load from whatever testing base URI you provide when in localtest, so then it’s just down to what your browser trusts if any.

Currently your configuration looks correct, but is not realistic to the hosted/release environment.

But these settings should load as long as your browser trusts the connection to this URL.

You may find it easier if you utilise a publically accessable URL with real SSL certs, this can be achieve via uploading your files to a “real web server” (I don’t mean hosted test as that involves mode switch) or a reverse proxy tool such as reverse SSH tunneling behind nginx or using ngrock to proxy the connection, I wrote about this here Twitch Extensions Part 5 – Dev Environment – Barry Carlyon

This setups a node static/dumb express server, behind SSL termination with the files served out of a subfolder. Which makes my development environ as similar to Twitch hosted test and above as possible.

(see summary/just one more thing for my SSL setup notes)

1 Like
4

thank you for your thoughtful response. Very much appreciated i will in return contribute to community when im out of bronze league (: