Issues moving from local to hosted testing

Extensions
1

I’ve been using the Developer Rig to test my extension locally, and all is well there. I’m building in production mode (webpack) and hosting my /dist folder from within the rig. I see the extension and config page load and work properly from within the rig.

image
image1856×543 17.3 KB

Now my issue: when I zip up the contents of my build output folder (yes, my file structure starts in the root of the .zip) and upload it for hosted testing, I just get blank config page and empty video component. I see in the Chrome dev console that my extension is loading the component/config html file, which is in turn loading the extension js file and my app js file, but nothing is rendering. How would I go about debugging at this stage?

image
image1187×887 27 KB

2

Did you use absolute or relative URL’s in your extension.

Since files are uploaded to domain/folder/folder

3

Thanks for replying! I’m using relative URLs. As mentioned above, when I try to load up the config or the overlay component, the network calls for my js files are definitely succeeding:

image
image734×71 2.75 KB

4

That suggests you have loaded twitch-ext.min.js from your extension and not from Twitch.

Extension Helper Library

An extension’s iframe must import the Extension Helper JavaScript file, created and hosted by Twitch. It provides methods for dealing with authentication, receiving notifications of stream properties, and listening to PubSub events. Each HTML defined in the Asset Hosting section of your extension (Viewer, Config, Live Config) must load the Extension Helper. To do so, include this line:

<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>

That sounds like the problem

5

The network call for the extension .js originates from my extension .html as seen in screenshot, but it’s the full twitch url like you specified. I didn’t include the extension js in my assets zip.

Thanks for the suggestion though!

6

Are you using VueJS for your frontend ?

7

Yes! Have you encountered issues using Vue?

8

You should render the main component :

var vue = new Vue({
  el: '#app',
  render: h => h(App)
});

Where App is your main VueJS component
They expect to have the webpage already rendered so we need to use the render property

9

Ah cool I’ll give this a go when I get a chance. Thanks so much!

10

This was the trick. Thanks again for your help!