If you use the Unreal Engine or Unity game-development environment, add a Muxy-powered experience using integrated Muxy functionality.
If you are writing extensions from the ground up, the first thing for you to do is get familiar with Muxy architecture and conventions.
MEDKit comes with an extension starter project that includes the installed and configured library. The easiest and fastest way to get started is to download the starter project. The MEDKit starter project is a fully self-contained starter project for building and running a Twitch Extension powered by Muxy's Extension Backend Services.
This is the same starter project Muxy uses to develop many of our client projects, now open sourced to help the community. It uses Vue.js to enable quick development and provide a powerful reactive environment without too much overhead. You can modify the starter project to create basic extensions.
If you prefer a more customized working environment, you can install and configure MEDKit directly with npm, node.js, and webpack. Even if you choose this approach, you might want to familiarize yourself with the structure of a MEDKit extension project by examining the starter project.
The following are top-level files and folders you will be working with.
A configurationfile containing information about your extension and testing environment.
The template HTML file. Your individual extension pages will use this file as a base when compiling their own pages.
Source files for the extension, with subfolders for each of the individual pages that make up your project.
The entry point for creating an extension of the given type.
The entry point for creating the broadcaster-only pages for an extension.
In the starter extension, all of the files and folders are provided and built. You only need to edit the ones you actually intend to ship. For example, when building a panel extension (such as the ones in our example) you can safely ignore the
component/ directories as these are used to build Overlay and Component extensions.
See more information about the basic types and structure of Twitch Extensions.
Before you can run the example project, you must have a valid Twitch Extension Client ID.
If you don't have one, create one on Twitch’s developer portal, choosing the Extension type. Click Manage to show the Client ID at top of the page.
Copy the directory for the language you plan to use (
tsfor TypeScript) and rename it to match your extension name. This will be your extension_root directory.
Create a file within that folder named
.env(don't forget the beginning period on the filename), with the following content:
VUE_APP_CLIENT_ID=<Twitch Client ID>
- To compile the extension and run a local server, open a command shell, go to your extension_root directory, and enter the following commands:
npm install npm run serve
This makes the following component pages available. (The script prints the port number, which can differ from this example.)
- http://localhost:4000/config.html - The broadcaster configuration
- http://localhost:4000/live.html - The broadcaster live dashboard
- http://localhost:4000/panel.html - The viewer panel extension
- http://localhost:4000/component.html - The viewer component extension
- http://localhost:4000/overlay.html - The viewer overlay extension
Updated 7 months ago