Contents

Extensions Developer Rig

Introduction

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

  1. Download the Developer Rig for Windows, Mac, or Linux, then open the downloaded file to install the Rig.
  2. Launch the Rig and sign in with your Twitch developer credentials.
  3. Click Add Project (top left), then Create Project. The first Create New Project setup screen appears.
  4. 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.
  5. 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.
  6. Click Get Started. The Project Details page appears; see below for details.

Rig Pages

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:

After you have created an extension view created, you can manually change the properties of the view’s context; i.e., what is happening around it on the Twitch channel page. Click Edit Context to see the dropdown options. This is a great way to test how your extension responds to different themes on the page or the viewer’s language choice. Extension output logs can be redirected to the Rig console, a local console specific to the Developer Rig. The console is at the bottom of the Extension Views page. To enable your extension to output to this console, make the following call from the extension’s JavaScript front end: window.Twitch.ext.rig.log(<message to log>). |

Troubleshooting

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:

  1. Clear your browser cache.
  2. Delete the Rig’s local storage: open the JavaScript console in your browser on a tab with the Rig open, execute localStorage.clear(); then refresh.
  3. Ensure you’ve included the Twitch Extensions Helper in your front-end files. 
  4. Restart the Rig.