I am currently developing a panel extension as a react application. The application runs fine as a standalone app but I am having issues getting it running on the dev rig. I put in the commands and it starts up on port 3000 and works fine within a browser but I can’t get anything to view on a panel within the dev rig. Here is what I get on the console when trying to run my app…
Any ideas on how to fix this? or why my extension is not showing up?
manifest.json is usually irrelevant to your extension in most casts. The Dev rig is loading something else for another purpose
Since it’s the manifest in question is being served on port 60060 which is nothing to do with your extension being served from port 3000
Check the network tab for 404 errors
Is your hosting/paths/URL’s correctly configured in the Twitch Console? (Asset Hosting)
If you have updated the extension settings in the Twitch Console make sure to hit
To make sure your Rig has the right settings.
if you did updated anything and your view is not working still, delete and recreate the view
I looked at the network tab and I am getting a 404 on the manifest.json and I am also getting an error on my index.html file which is where I have my panel viewer path pointing. Here is the error I’m getting…
I double checked my Asset Hosting info and refreshed the manifest within the dev rig as well as deleted and recreated the view but still nothing is working. Any ideas on this new error?
Connection refused either means, you are trying to serve over SSL and the certs are self signed and not temporarily accepted or installed
or
The frontend is not running in order to serve the content
So I am pretty sure the front end is running because I can access the app just fine when I hit run front end and run back end and it starts it running on port 3000, which when I access that from a browser it is good to go, no issues. Just not appearing in the view. But maybe I am missing something here, if I would normally run my app by doing npm install then npm start on both the backend and front end, is npm start what I want to put as my commands?
If you have changed the settings on Twitch Developers for an extensions Asset Hosting you may need to refresh manifest and recreate any views you have.
So you are attempting to use:
Did you enter the path as well as a host command?
I updated my panel viewer path and refreshed the manifest as well as deleting and recreating the view. Still no luck.
Here is what I am inputting on the front end files.
This runs the app just fine locally in my browser, but does not give me anything in the view.
I think I might be asking the wrong question. I know I need the the script line in my html files for the extension, as well as the extension .json, is there anything else Twitch specific that I need in my app to make it work as an extension? Maybe this is where I have a problem.
Did you hit run front end?
Yes I did. The console within the Dev Rig looks good to go. So I changed “localhost:xxxx” to “127.0.0.1:xxxx” and that error went away but now in the console on the Dev Rig I am getting this…
Any ideas here?
Right what settings do you have in your dev console?
Is it loading outside of the rig. Are you correctly pointing to the folder React outputs to?
This is just getting weird, since things are fine for me with mine, granted I’m not using react. So it feels like this is a react specific issue.
Are you asking for these settings?
It is loading outside of the rig. I run npm start on the front and backends and it starts right up with no issues. Not sure what you mean by “the folder React outputs to?”. Are you talking about the folder I start the app from?
It for sure could be a React issue. But from looking around I can’t really find anyone who has ran into this issue.
Are you sure it doesn’t have anything to do with the manifest.json? Am I supposed to have that file in my extension folder?
You are serving content over SSL.
Is your certificate self signed? It’s probably not accepted temporarily in the DevRig as it’s not possible to do that. So you could install the SSL certs to your system so the system accepts them.
Or you could serve over not SSL.
Gotcha, I am looking into trying out the cert issue but I wanted to see if I could upload the files to my extension. But everytime I upload the files I either get this error…
Or this one…
I only have JS, HTML, CSS, JSON and all of the Node_Module files.
Any ideas on whats causing this?
I also am still running into the 404 issues with the manifest.json file. I feel like that has to be part of the issue but I don’t know how to fix it. I don’t actually have a manifest.json file in my extension.
You shouldn’t be including any of the node modules. Twitch’s CDN hosts ONLY your frontend, it’s not running Node for you. With a React app you’ll likely be using a bundler like Webpack, so you’d run npm run build and depending on the webpack config it’ll produce either a build or dist folder, inside which is the frontend files that you should be uploading (making sure not to zip the folder itself, just whats inside it).
2 Likes