Hello, I am trying to make my first twitch extension ever. I was following this guide: Extensions | Twitch Developers. I’ve worked with Vue a lot so I wanted to make my extension using that. I created a project, connected it to a private github repo and spun up a dev server on 8080. The application works as expected until I add this line to the main.ts file:
Ah I thought I tried this, but maybe I didn’t have it in the head before. Thank you that was an easy fix! My webpage loads now when hosting locally, but unfortunately, when I upload the project and move it to Hosted test, I still don’t see anything in my video component on my channel . I don’t have time to dig into that right now, but if you have any suggestions i’m all ears!
you upload a zip file of a folder of files isntead of files and thus the paths don’t match, check network tab for your HTML loading or not
your zip file is correct but your JS/CSS did not load becuase you used absolute links instead of relative links, extensions are uploaded to a sub folder on the extension sub domain, check network tab for 404’s or mime type errors
your JS doesn’t include an onAuthorised call resuling in $clientID was not loaded in the console tab
(Its only gonna let me put one image per reply since i’m a new user so sorry for multiple messges)
Alright I’m still struggling a lot here. Pretty sure i’m having issues with all of the first 3 bullet points.
Starting with bullet number 1, I was uploading the folder instead of the files. Easy fix, but just to be clear, Would I want to upload all the files inside the project’s folder? or just the files inside of the dist folder?
When I upload just the files within the dist folder, I get these two error in my network tab:
The MIME type error is because the server is responding with an error page because it can’t find your files.
The reason your js and css files can’t be found is becuse you’re using absolute links, rather than relative links.
Extensions are served from https://CLIENTID.ext-twitch.tv/CLIENTID/VERSION/HASH/, but because you link to /assets/... your HTML is making requests to https://CLIENTID.ext-twitch.tv/assets/... which is incorrect.
Your links should be ./assets/... or assets/... which will appropriately link to https://CLIENTID.ext-twitch.tv/CLIENTID/VERSION/HASH/assets/...
I manually edited my dist/index.html file to use relative paths, and it still wasn’t working. So I checked out this guide again Extensions | Twitch Developers and realized I forgot to change my base URI from https to http. Thanks for your help guys this was a frustrating one.
Still if you have any ideas how to make my dist/index.html paths be relative even when i build That’d be awesome, but if not I can live with remembering to manually edit a couple lines in dist. Finally i can attempt development