Extensions Developer Rig
The Developer Rig allows Extensions developers to develop and test Extensions quickly, easily, and locally. It is an Electron-wrapped web app that you install on your machine. It lets you test with production APIs and hosted assets on Twitch.
You use the Developer Rig to create and run an extension project, using either your own extension code or example templates in the rig. An extension project is a combination of an extension manifest (metadata) and extension code. You create an extension manifest in the rig or on the Extensions developer console, and you can make this part of your extension project in the rig.
The Developer Rig also can be used to manage your Bits product catalog, if you have completed Extensions monetization developer onboarding (required for non-Twitch partners/affiliates) and your extension is enabled for Bits monetization. See the Extensions Monetization Guide.
If your extension is enabled for Bits monetization, when you configure the Developer Rig to run with your extension, you will see a Manage Products tab. Here, you can view, create, edit, and deprecate products — as long as your extension is enabled for Bits and you are logged in to the account that owns your extension.
Creating a Project
- Download the Developer Rig for Windows, Mac, or Linux, then open the downloaded file to install the Rig.
- Launch the Rig and sign in with your Twitch developer credentials.
- Click Add Project (top left), then Create Project. The first Create New Project setup screen appears.
- Fill out the fields on the first setup screen:
- In the dropdown list, select New Extension (to create a new extension) or select an extension you’ve already created.
- If you’re creating a new extension, name your project (e.g., “<your name here> Hello World”). Project names must be globally unique.
- Specify the extension version. The default is 0.0.1.
- Click Next. The second Create New Project setup screen appears.
- Fill out the fields on the second setup screen:
- Select a folder on your filesystem for your project files.
- In the dropdown, choose the code to add to your project:
- Tutorials (recommended for new developers).This choice presents additional options, and the instructions for each option.
- Boilerplate (great if you want your frontend to be in React)
- Your own code.
- Click Next. The code is pulled in from Github and a final Create New Project setup screen appears, indicating your project was created.
- Click Get Started. The Project Details page appears; see below for details.
The rig has several tabbed pages to assist you.
|Project Details||Manage project metadata, run your project (following the steps on the page), and provide information about your frontend and backend files. If you chose tutorial code above, some information here is automatically populated for you.
The rig can host your frontend and backend if it’s running locally. To do this, click Run Front End under Front-end Host Command and/or click Run Back End under Run your back-end service locally with the Developer Rig.
Use the Project Actions menu (top right) to:
|Monetization||Monetize your extension. Before this tab is available for use, you must complete Extensions monetization onboarding and include monetization in your extension (see the Extensions Monetization Guide).|
|Configuration Service||Access and manage extension configuration data, for use by the Configuration Service.
You can select what user data you want to query for, by entering the ID or channel name. You can also edit this data from the rig and save it to the configuration service, for quick changes to the data.
|Extension Views||Create and interact with different views of your extension, for testing. Select among these Extension Types:|
|Type of View||Shows What your Extension Looks Like|
|Overlay||If it is full screen, over the channel video|
|Panel||As a panel extension below the channel video|
|Component||If your extension takes up part of the channel video and can be moved around the screen via the edit controls|
|Configuration||Appears on a broadcaster’s dashboard for an extension|
|Dashboard||Presented to broadcasters after they install an extension but before they activate it|
o add a new view for the configured client ID, click Create New View. Then, depending on the selected extension type, you also select one or more Viewer Types to simulate how the extension will look to different people:
- Logged-in viewers (linked and unlinked)
- Logged-out viewers (i.e., anonymous users)
window.Twitch.ext.rig.log(<message to log>). |
I get an error when pulling in a tutorial or boilerplate.
Ensure that Git is in your PATH variables by trying to run
git at your command line. If that works, also ensure that the local folder does not currently exist.
I’m sure my My Rig configuration is correct, but my extension doesn’t work.
Try these steps:
- Clear your browser cache.
- Ensure you’ve included the Twitch Extensions Helper in your front-end files.
- Restart the Rig.