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.

The Developer Rig is supported on Windows, MacOS, and Linux.

Starting Up the Rig

Download the Developer Rig for Mac, Windows, or Linux, then open the downloaded file to install the rig. Launch the rig and sign in with your Twitch developer credentials.

Creating a Project

  1. On the Welcome screen, after logging in, click Add Project (top left), then Create Project. The first Create New Project setup screen appears.
  2. Fill out the fields:
    • In the dropdown list, select New Extension (to create a new extension) or an extension you’ve already created.
    • Give your project a name
    • Specify the extension version. The default is 0.0.1.
    • Click Next. The second Create New Project setup screen appears.
  3. Fill out the fields:
    • 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), boilerplate (great if you want your frontend to be in React), or your own code. If you choose tutorials, you can open the corresponding instructions from the list.
    • Click Next. The code is pulled in and a final Create New Project setup screen appears, indicating your project was created.
  4. To proceed, click Get Started. The Project Details page appears; see below for details.

Rig Pages

The rig has several tabbed pages to assist your development process and run your project.

Tab This is where you ...
Project Details

Manage project metadata, run your project (following the steps on the page), and provide information about your front and backend files. If you chose tutorial code above, some information here is automatically populated for you.

The rig can host your frontend files and your extension backend if it’s running locally. To do this, click Host with Rig under Front-end Host Command and/or click Activate under Run your back-end service locally with the Developer Rig.

Use the Project Actions menu (top right) to:

  • Refresh your extension project in the rig, if you change extension metadata on the Twitch dev site. Click Refresh Manifest.
  • Close your project. (This does not delete the project.)
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 back up 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:

  • The Overlay view is if your extension is full screen, over the channel video.
  • The Panel view shows what your extension looks like as a panel extension below the channel video.
  • The Component extension takes up part of the channel video and can be moved around the screen via the edit controls.
  • The Configuration view appears on a broadcaster's dashboard for an extension.
  • The Dashboard view is presented to broadcasters after they install an extension but before they activate it.

To 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:

  • Broadcaster
  • Logged-in viewers (linked and unlinked)
  • Logged-out viewers (i.e., anonymous users)

When you have 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 Developer Rig configuration is correct, but my extension doesn’t work

Clear your browser cache and local storage and restart the Developer Rig.

To delete the rig’s local storage, open the JavaScript console in your browser on a tab with the rig open, do localStorage.clear(); then refresh.

Ensure you’ve included the Twitch Extensions Helper in your front-end files.