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:
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.
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 .