I want to be twitch extension developer. I have built (my first) a demo extension to understand the flow. I have used to Developer Rig to quickly built and test my extension on local environment i.e., https://localhost.rig.twitch.tv:3000/. My extension is working fine on local environment as you can see in this screenshot. ( https://www.screencast.com/t/WTUcR080Sm )
But when I try to test in hosted environment (by uploading assets) on twitch on my channel.
My Demo Extension Not appearing in hosted testing on my channel (see this screenshot https://www.screencast.com/t/aZxHkiAR )
[Note: Iām not getting any 404 error like mentioned in other posts. I have deployed my extension as panel. In console I can see my all js and css files are showing 200 ok. That means my extension is loading. I can also see my extension header, probably created by twitch, showing my extension name. But thats it, it is not showing my extension view.]
In the developer tools if you look at the Network tab, are all of your files/scripts/images/etc loading? I remember I had a problem once where when I zipped everything it added a directory so when I uploaded it to Twitch all my paths were off.
Are you using any framework such as ReactJS?
I noticed that it is not finding the generated files of the build, maybe thatās it, if you can post the compilation script and the webpack it is easier to help you, if it is not then the problem is simpler to solve.
[AlbericoD], Yes for Frontend Iām using React JS. But Iām deploying compiled files by using yarn build.
Today, I tried one more thing. Till now when I said local I meant initiating developer rig using local/dummy settings to develop extension, which any developer can use before moving to on-boarding process.
[FYI: My on-boarding process is complete.]
Today (thinking that I might have done some mistake) I started developer rig project from scratch. And tried to use live extension settings on my local system.
Note: nothing changed from my side. I just simply downloaded developer rig and try to run it using live extension secret and other details. But I started getting Invalid JWT errors. Looks like Iām missing something important.
Also my OAuth redirect URI is pointing to http://localhost, Is it fine.
When I do hosted testing then to what it (OAuth redirect URI ) should point too?
So when I was implementing reactjs in the twitch extension I had this same problem with hosted test, normally this is a problem with dynamic routes, there are a few ways to solve this, one of them is to use HashRouterās react-router-dom, the BrowserRouter does not work correctly when embedded in the twitch, there is some discussion in the forum about it.
All problems with assets, uploads, routes and webpack (this is very important, its extension is usually refused if you do not change some configurations of the webpack) of the reactjs:
Not of much help as currently Iām not using any routes, its a simple react app with one screen for now. Also in my zip there is no folder. I have placed all my files at same place as index.html
Thanks for the info because I do have plans to use routes in react app once Iām through with this blocker.
Today I have moved on a little bit, so solved JWT error issue. But stuck on other thing.
So when my extension is loaded (in online mode, testing on localhost) in developer rig, my extension view is not loading. When I look at network tab I see this,
POST https://api.twitch.tv/v5/extensions/my_extn_client_id/auth/refresh/999999999
is giving 404.
I also found āextension-frameā iframe style property is set to ādisplay:none;ā. If I remove that I can see my extension view in online test mode.
I further investigate and found that Line 183 of ā./developer-rig/public/coordinator.jsā is setting iframe display style property to none.
I believe this must be intentionally. Need your help here to understand why my iframe display style property is set to none in live mode. Whereas it is fine in local test.
I am certain that my Developer Rig Configuration is correct, but my Extension is still not working.
Clear your browser cache and local storage, restart the Developer Rig, and cross your fingers. To delete its local storage, use your browserās developer tools to do so then refresh your browser. Ensure youāve included the Twitch Extension Helper in your front-end files.
If you have tried everything and still can not resolve it, and you think the problem is in developer rig, there is a way to report your problem here: https://github.com/twitchdev/developer-rig/issues
Without seeing code and configuration it is difficult to understand what is happening, we hope you can complete your project without major problems, any problem can come back here that everyone will help you.
Thanks for help. Finally got it solved and able to deploy my first extension on my channel.
Donāt know what was the cause of problem. But I solved it by taking following steps:-
Taking git pull of Developer Rig Repo.
Clearing my browser cache including cookies and local storage. And re-login to twitch.
Running Rig app again as I was doing previously for online mode.
Though I still see my console full of errors esp., this one
Failed to load https://client-event-reporter.twitch.tv/v1/stats: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost.rig.twitch.tv:3000' is therefore not allowed access.
This error comes even when no extension is loaded in my developer rig.
One more thing, Iām still not able to figure out the purpose of āOAuth Redirect URIā in Settings - Client Configuration in my extension on dev.twitch.tv .