Getting Started: what am I missing?

Extensions
1

I’m getting ready to start building my first video overlay, and I feel like I missing something. I’ve read everything from the docs (https://dev.twitch.tv/docs/extensions), read and setup the Developer Rig (https://github.com/twitchdev/developer-rig), read through and implemented the sample extension (https://github.com/twitchdev/extensions-hello-world), and read a number of related posts on this forum. But I still am confused as to what is actually supposed to go where. The repos have a lot of great code but none of it makes clear what part of the Rig is faking Twitch hosting versus actual pieces of the final assets for the extension. Same with the sample extension: why does it include cert generation (https://github.com/twitchdev/extensions-hello-world/tree/master/bin)? is the file structure (services/, public/) what I need to imitate? what is required, how do I specify which files mean what?

Any help much appreciated - really do believe I am missing something but no luck finding it so far.

2

At the most basic level, an extension is just a set of HTML files. Usually you’ll have 1 for the configuration page, 1 for the live page, and one for panel/overlay/component/mobile view.

If you want your extension to do anything, it’s going to need some javascript, so the HTML files will point to that. Same goes for CSS.

All the rig does is provide a basic way to display and test your extension without it needing to be on an actual live channel, and if you’re working with Bits it also provides a way to make all your product SKUs. Cert generation is used, both on the rig and in the sample extensions, because ALL communication must be over a secure connection. If your extension is just a plain HTML page that doesn’t make any external requests, or want to open sockets, then certs are not as big an issue. Using the hello world extension as an example, the extension communicates with the EBS so that needs to be over HTTPS.

The file structure can be almost whatever you like. When you send the files to Twitch for them to host, they’ll be in a zip with the HTML files in the root of that zip. Those HTML files can point to JS/CSS/images or whatever assets they need either within the same directory, or nested within folders, the structure is whatever you want as long as the paths are correct.

The reason behind how the Hello World example is structured is because it has both a frontend service (this runs a web server that hosts the extension, I believe the rig can also host extension files itself now but I haven’t tried this since I have my own hosting setup), and a backend service (this is the EBS that the extension uses, in this example it shows how clicking the change colour button sends a request to the EBS, and the EBS broadcasts it so it changes colour for all users). When you progress to the Hosted Test stage of development, you’re sending your extension files to Twitch to host so you can ignore having to host the frontend yourself at that stage.

As for EBS, well that’s entirely up to you. Not all extensions need a backend for their use case, if you do need a backend server then it’s for you to host somewhere, and you can use whatever language you desire, as long as it sends messages over HTTPS or a secure websocket, so you’ll need a proper certificate.

3

Okay, super helpful. Am I crazy that none of this is in the docs? So next step… how do I tell Twitch what all these things are? If I have a config.html and overlay.html, how do I specify those are supposed to be their respective parts? And since I do need EBS, do I call that from the HTML or is that handled separately by Twitch in some way I need to specify?
I guess I just expected there to be some config files and some guide to making/editing them.

4

The docs are pretty bad, I think they’re working on a much needed revamp of the whole extension section.

As for which page is which, if you go to your developer dashboard and go to your extension, then under versions manage the version you’re currently working on. This’ll be where you configure a lot of your extension settings. When you load the dev rig, it uses the provided extension client id and version to pull all these settings from Twitch, so it knows which HTML file is which, and all the other settings. This version management page is also where you’re do all the stuff like uploading assets to Twitch for hosted testing, setting test channels for when you test on a live channel (and also for when you get to the review stage, as reviewing has to be done on a live channel).

As for the EBS. Twitch have nothing to do with that. If your extension needs to contact it, then in the javascript you can use fetch which is a built in API for handling HTTP requests (google it if you need documentation for how to use it, there’s a huge amount of guides and docs), and there’s numerous alternatives too. You just need to make sure it’s over HTTPS, and that your EBS is both publicly accessible to the internet (so not behind a firewall that’d be blocking it) and you’ve created routes on whatever webserver software you’re using to listen for the incoming request and handle it.

If you look at the viewer.js of the Hello-World example extension you can see how they perform a HTTP request to the EBS using jquery’s ajax, so if you want to go the jquery route then that’s an option. In their backend services file you can also see an example of using Hapi for a webserver, and how they’ve set up routes for different API calls to the EBS.

5

This is… amazing! If I had read this before I read all the Twitch docs I would probably have this thing done (or at least a version published). I really hope Twitch staff publishes an additional ELI5 version of their docs.
Thank you so much - I feel fully equipped now, off to code!