How does config.js work and how to set it up?

I have started developing an extension using angular and currently testing on localhost. I came across the feature: “Making the extension Configurable using config.js”, but am not able to understand the flow and how it works. I tried going through the docs but it wasn’t of much help either.

the doc: https://dev.twitch.tv/docs/tutorials/extension-101-tutorial-series/config-service

Twitch provides extensions with multiple “view points”

An extension can be configured from any view that the broadcaster is using. But people will generally use the config or live dashboard views.

Within this view you can provide code to allow the broadcaster to control and configure the extension.

These settings can be stored in the config service (or your own server)

The linked tutorial/guide suggests using the config service.

For views of an extension you would generally seperate out the controlling code into multiple files. It generally doesn’t make sense to put the extension broadcaster controls in the code that a viewer loads.

Since a viewer will never need it so it’s just wasted bandwidth.

That is the purpose of a config HTML and JS file. To seperate out the code and have that be loaded by the config (and dashboard) views.

Things like angular being a Single Page App type thing will often bloat as you put everything in a single JS/HTML file (which is bad for mobile users and regular viewers since they load extra code they will never need)

Hopefully that helps?

Yes, it is helpful.
I still am not able to understand how to use the config service and how can we store the configuration a user selects and retrieve the config when loading the extension.
Could you please help me with this?

There are two ways to store configuration

  1. Your own service, such as a database on your EBS
  2. The config service, where you either use the JS helper of the API to get/set the config in Tiwthc instead

API: Reference | Twitch Developers

Extension JS Helper: Reference | Twitch Developers

1 Like