For React based Twitch Extension, do I need to submit the “dist” files for approval, or is it possible to run the project via “npm start” command?
Based on working with the Rig, for the Backend portion, it looks like I can run Node commands to run the Application. Is it possible to do the same for the Frontend?
Just dist
But zip the contents of the folder not the folder itself
Twitch host the frontend of extensions on their CDN, so when your extension goes to review you zip just the files inside your build folder, so your HTML, JS, CSS etc…, and those will be reviewed by Twitch.
The backend you can host however you want, as it’s your responsibility to host it and ensure it complies with the extension guidelines (such as only communicating with the frontend over SSL, so HTTPS or WSS). What commands you use to run that, or what software or hosts you use to run that is entirely up to you.
Thanks, but the backend can be run a Node/Express App? That requires a “node server.js” command?
It’s your backend, you can use whatever you like to run it as you’re the one hosting it.
Oh I see! To clarify, the frontend is hosted by Twitch, but the backend is hosted by me?
Furthermore, if I make API calls from the frontend, they can go to my backend hosted elsewhere. Is that correct?
Got it. So the backend, I can update however many times I like, but the frontend will need to go through reviews and version updates if there are changes.
Correct, Twitch host the frontend and you host whatever backend you need. Any updates to the frontend need to go through the review process but your backend server is under your control so you can do anything you like with it.
You can make API requests from the frontend, either to Twitch, your backend, or other services, but it MUST be over HTTPS, or WSS, so if you need your frontend to send requests to your backend you need to ensure you have the required SSL certificates.
Got it. Is there a PubSub that is provided by Twitch that can be taken advantage of? Or does that need to be setup on my own?
In the Hello World example, it appears they’re using a PubSub there. Is that something I can use in my project?
Yes, you can use pubsub, there are some endpoints listed in the docs https://dev.twitch.tv/docs/extensions/reference
There are limitations to it though, for example it’s designed as a way for your backend to send data to either all extension users (globally), all users on a specific channel (broadcast), or to a single user (whisper). Users can listen to pubsub, but can’t send messages, although the broadcaster does have some limited pubsub sending capability within their own channel.
So if you need users to send anything to your EBS, it can’t be done over pubsub.
I just need to be able to make changes to the frontend, such as changing a string via an API call, but have all viewers see that change.
In that case you can send a Broadcast, or Global, on pubsub from your backend and all users will see that message as long as it’s within the 5 KB size limit, and not faster that 1 message per second per channel.
Got it, but if I also want a user’s input such as entering their name and have others see, it’s not possible? I will need my own solution PubSub solution?
You would need the user to enter their name, send it to your EBS, and then your EBS broadcast it to all other users. Or you could have your EBS store the list of names, and have your frontend periodically poll an API endpoint on your EBS for that list of names to see if there are changes.
For the “send it to your EBS” portion, is that done with the Twitch PubSub, or a route on my own EBS?
Viewers can’t send anything on Pubsub, they can only listen, so you’d either have an API endpoint on your server that the viewers send a HTTPs request to, or if you choose to use websockets you’d create an endpoint on your server that’s listening for socket connections that your frontend initiates.
I see, so my understanding is the following, in terms of getting a user’s interaction and broadcasting it out:
Twitch Frontend --> My Backend (via API route) --> Twitch Backend (Broadcast) --> Twitch Frontend
Is that correct?
Correct, you can see the Hello World sample extension as guide to how it works, as in that sample the frontend sends a HTTP request to the backend when a button is pressed, and then the backend sends a message as a Pubsub broadcast which then all frontend clients receive.