** This project is no longer active as a Twitch extension and is not being maintained.** The code is still perfectly servicable, and you are free to use it per the license.
This is a Twitch panel extension to facilitate community games for Age of Empires II: Definitive Edition.
Here's some links with more information on how it works:
For the frontend:
- Familiarize yourself with the official Twitch Extension documentation.
- Register an account with the Twitch Developer Console and create a new extension.
- Install the Twitch Developer Rig from here: https://dev.twitch.tv/docs/extensions/rig.
- Log into the rig and connect it to your newly created extension.
For the backend:
- Familiarize yourself with Azure Functions in C# and Visual Studio Code. Follow the environment setup steps in that article.
- Install the Azure Functions Core Tools via
npm install -g azure-functions-core-tools@3.
Here's how I run and test this code on a Windows machine. Other OSs are probably similar.
Run the script frontend/package-frontend.sh to pull down the dependencies. It uses 7zip to handle the .zip archives - feel free to modify if you use a different tool.
Follow the docs linked above to configure the Twitch Developer Rig to look for frontend files in /frontend, create extension views for the broadcaster and viewer panels, and run the frontend. If it's set up correctly, the Twitch helper events will fire and the rig will start calling out to the backend. Ctrl-Shift-I to bring up the dev tools.
shared.js has a variable at the top named localtest which you should set to true to use a localhost backend url. Otherwise the extension will try to get the backend url and key from Twitch's extension configuration service. If you want to use that service, enable it in the developer console and then use the Configuration Service page in the rig to set values.
Build the backend with:
cd backend
dotnet build
To run it, first create backend/local.settings.json with these contents:
{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "",
"FUNCTIONS_WORKER_RUNTIME": "dotnet",
"ClientSecret": "twitch_extension_client_secret",
"CosmosConnectionString": "cosmos_db_connection_string",
"CosmosDbName": "cosmos_db_sql_name",
"ExtensionClientId": "twitch_extension_client_id",
"ExtensionOwnerId": "twitch_extension_owner_id",
"ExtensionSecret": "twitch_extension_secret"
},
"Host": {
"CORS": "*"
}
}
You'll need fill in the missing values with your Twitch extension's keys/secrets and the database name and connection string. See the Deployments -> Backend section below for more details on what those are and how you can populate them. Once that's done, hit F5 to start debugging locally.
This is a somewhat manual process due to how the Twitch extension lifecycle works. Run frontend/package-frontend.sh then upload frontend.zip to the Files tab of the extension developer console page. Then change the extension's status to Hosted Test to see it in action on Twitch.
You can deploy the function app to Azure by running func azure functionapp publish <your function app name>. In addition, there's a GitHub Actions workflow that builds & publishes to Azure on any push to main.
Of course, before that will work, you need a function app resource already created in Azure - and the storage account, and the hosting plan, and the database. To make that easier, this repo includes an ARM Template to provision the cloud resources. You can deploy the template via the Azure portal or via the Azure CLI.
You will need to provide your own values for the template parameters. Refer to the template file for the parameter names and descriptions. The deployment will work fine if you just use the default values, but the function app won't be able to talk to Twitch if the Twitch-related parameters aren't correct.
If you want to deploy the template with Github Actions like this repo does, you'll need to add some repository secrets. Follow these steps:
- If you haven't done so already, create an Azure subscription and a new empty resource group.
- Follow the instructions here to create a new service principal with contribute rights on the resource group. To run the commands, you can either install the Azure CLI or use the Cloud Shell in the Azure portal.
- Copy the output of the
az ad sp create-for-rbaccommand, create a new secret in your repository namedAZURE_SP_CREDENTIALS, and paste in the value. - Create a new repository secret named
ARM_TEMPLATE_PARAMETERS. The value should take this form:
{
"$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
"contentVersion": "1.0.0.0",
"parameters": {
"parameter_one": {
"value": "value_one"
},
"parameter_two": {
"value": "value_two"
}
}
}
- Update the
AZURE_RG_NAMEvariable in the ARM workflow to match your resource group's name. - Trigger the workflow and let it run. It usually takes about 10 minutes to run the first time. Subsequent incremental runs take about 2 minutes.
- Go to your newly created function app in the Azure portal and download the publish profile. Create a new repository secret named
AZURE_FUNCTIONAPP_PUBLISH_PROFILEand copy-paste the contents in. - Trigger the Build & Deploy Backend workflow to deploy the function app.
Now you can test with the live backend running in Azure. If want to test a local frontend against it, make sure to change the CORS rule to * in the function app configuration - by default the template sets it to your extension's domain on ext-twitch.tv, which blocks requests from localhost. Just remember to change it back later.
Many thanks to the TwitchDev Discord for answering all my questions, especially BarryCarlyon#1698, Breci#1906, Dist#5867, WLG3R#4917, and Marenthyu#4211.
Thanks to T90Official and his community for being cool enough to inspire me to make this.
If you've gotten some value from this project and want to support it, feel free to throw me a few bucks on Ko-Fi.
MIT License - LICENSE.md