Can anyone please give me an advise ho to setup the Developer Rig? The documentation is useless.
I already downloaded it and created an extension with tutorial code but i am unable to start the tutorial code. Why is there no further explanation what to do? As a local server, i use xammp and all the files from the project are in the htdocs folder but it’s not working.
When it is so complicated to just run the tutorial code, they definitely need to change something about the whole Rig. Not very user friendly. Also in the documentation it says that i need HTML, CSS and Javascript knowledge, no word at all that i need to know how to setup servers and thinks like that.
1 Like
Extensions are just websites.
So if you have a working local environment to buld and run a website in.
Then you don’t need other knowledge.
That local environment can be an XAMMP server or a “proper” live website to host files in.
The Rig is optional for using to test your extension in, you can use the “live Twitch website”, you’ll just need to make sure that the URL you are loading files from have a SSL Certificate. Which your “website to host files in” might handle this for you.
So sure you don’t need any server knowledge what so ever.
When Twitch says “local test” for an extension they mean “not on the Twitch CDN loaded from whatever URL you specify”.
Most of the tutorials use some node stuff (or go stuff) since they tend to explain a specific feature of Twitch Extensions, which you might not even use.
You reached the end of the tutorial
This is the hello world example for an extension:
index.html
<html>
<head>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="script.js"></script>
</head>
<body>
Hello
</body>
</html>
script.js
window.Twitch.ext.onAuthorized((auth) => {
console.log('got auth');
});
That’s it two files, and two script tags.
Where one of the script tags is to the Twitch JS Extension helper.
You will find most of the tutorial/examples have extra code to allow them to demo a feature.
My Profile Example Extension
Ships with NodeJS componenets, to run the Backend Service (as one is needed for this extension), and to run a “simple server” to serve the files over HTTP(s)
The next step from these files is getting them on a “Web Server” somewhere, preferrably with an SSL Certificate.
Without SSL you can use the Rig which will skip the SSL Requirement
Or you can use a tool like NGROK to handle SSL and use that instead.
I wrote about this more in length on my Twitch Extensions Blog Series part 5 Twitch Extensions Part 5 – Dev Environment – Barry Carlyon
Which might help you out.
TLDR: The Rig is just a dumb Twitch Website client, with some bells and whistles that might/might not help, and lets you test Video extensions without the need for the channel to be live. (I just go use test channels instead)
First of all, thanks for the quick reply.
You’re saying that if I use the rig I don’t need to care about SSL. That was my first attempt, using it without xampp just right away but it also failed. I can’t believe that they say this is working tutorial code when it takes a whole lot of steps to even get it working.
Never looked at the tutorial but it’s probably older and likely out of date, with updates to changes and rules/etc. (I think it’s using jQuery from a CDN which wouldn’t be allowed if submitted anyway)
If you have existing website knowledge you can skip the tutorial and go straight to building.
There only “rules”/requirements are present in my hello work example.
You must include the JS helper
You must call onAuthorised
onAuthorised is essentially “window has finished loading, everything is loaded and ready to go”
Yeah the rig will load from whereever.
But to test on Twitch when your state is “localtest” you’ll need a SSL Cert or suffer the “fun” of mixed content warnings (similar for self signed certs).
Some people use NGROK, some people reverse SSH proxies, others just upload their code to a web host (I have a test/debug extension that loads from GitHub pages for example).
XAMPP should throw a server up on http://127.0.0.1/ or whatever it’s configured to.
That will load in the rig.
But your HTML code will need to have the JS Helper and a call on onAuthoirsed via script file
The Extension docs are a bit here/there all over the place.
These days I’m only ever on the reference. And a lot of the time some of my extensions literally just load the token from onAuthorised and thats it (they punt that offsite to my EBS and the EBS does whatever)
These two cover the basics of most of the things/blockers
Depending on what you extension does/will do you might not need anything from Twitch Extension side of things beyond what I posted as the exmaple extension above. Then everything else is “make it work in the dimensions of the slot I’m working in” and handling any traffic to your EBS (Extension Backend Service)
In your Tutorial you’re talking about nginx stuff and how to setup SSL certs for local testing. That’s exactly what I thought I don’t need to mess around with if I want to develop extensions. But if it’s needed for testing, why aren’t these steps in the documentation. They are saying that you can test your extensions right away in the rig but that isn’t the case.
it is:
You set this entry Host your front-end files in the Project Details for your extension to a path/folder.
Leave Front-end Host Command Blank
Then hit Run Front End
The Rig then provides a web server to serve that folder of files. (which is essentially identical to the NodeJS Express static server thats included in my Blog Series)
The Rig then overrides the Developer Console settings to load the Extension Views defined from the Developer Rigs internal server instead
Theres no server fun times/ssl fun times to do on your part. You don’t even need XAMPP/whatever installed as the Rig will spool up a server internally to host with.
To quote from the blog post
Second paragraph talkes about the Rig/Site differences
For testing on the Twitch Website not in the Rig.
Which is why it’s in the “Just One More thing” part of the post. And it’s not required for testing in the Rig. Only for testing on the Twitch Website.
Ok thanks for the clarification. I think I have misunderstood a couple of things.
No it’s working to start the front end and back end in the rig when using the hello world example. But he how can I view it? When I click on start front end it just opens a small blank white window? When I try to type the address in my browser it says website unreachable.
Click “Extension Views”
Click “Create new View”
Set the View to whatever parameters you need and what slot/view type it is.
That is the “Server Log”/“Log output of the run front end command command”
Oh my god, thank you. Tried that a couple of hours ago and was not working because the front and back end wasn’t work at the time. Now it’s finally working. One last thing, when I create a new view, how do I connect them to the corresponding files? Do I need to exactly follow the file naming scheme from the tutorial and the views I create in the rig are automatically linked to the html file? You know like panel.html, config.html and so on. And in the example I can see that they refer in code to some css classes but there is no css file, can I use these classes too and does any kind of list of these exist?
Visit the Dev Console: Twitch Developers
Manage the extension
Manage a version of the extension
Click “Asset Hosting”
You can define the views you want to enable on your extension
And the paths/files for the HTML you want to use
Then in the Rig under “Project Details” click “Refresh Manifest” to reload the updated values from the console into the rig.
Then the Rig is now aware of what enabled views you have and what files to load for those views.
The Testing Base URI defined here is overriden when you use “run front end” when using a folder of files so this setting is irrelevant for you.
Thanks a lot, you saved my day.
THUMBS UP EMOJI 
Glad to have been of help
1 Like