A Twitch extension that helps viewers that watch Maya Higa's Twitch streams identify and learn about the ambassadors at Alveus, Maya's wild life sanctuary.
AlveusTwitchExtensionDemo.mov
- Head up to https://dev.twitch.tv/console/extensions/create and create a new extension.
You will need to create a new version: Select
Panel
,Mobile
andVideo - Fullscreen
for the extension type. Leave all other settings as they are. - With the version created, scroll to the bottom and click on
View on Twitch and Install
. Install the extension on your channel and activate it. - Enable
allow invalid certificates for resources loaded from localhost
in Chrome: chrome:https://flags/#allow-insecure-localhost If using Firefox, once you have started the development server, you will want to navigate to https://localhost:8080, click advanced and select accept the risk. - Copy the
.env.sample
to.env
(which setsHTTPS=true
,HOST=localhost
, andPORT=8080
) - Install dependencies for the project with
npm install
- Start the development server with
npm start
- To test the overlay, you will need to be live on Twitch with the extension installed.
If you want to use an alternate account, add the account to
Testing Account Allowlist
under theAccess
tab of the extension version and install the extension on that account.
CSS files are hidden through the settings.json file in .vscode
react-app-rewired-multiple-entry is used to add multiple entry points to the app. it uses the config-overrides.js file to add the entry points.
found out about it through this web link: https://gitgud.io/-/snippets/376
package link: https://www.npmjs.com/package/react-app-rewire-multiple-entry
env-cmd: used to add environment variables to the start script in package.json
![ambassador]: displays the card of the corresponding ambassador
- Note: [ambassador] is the first name of any ambassador (Ex: !nilla = Nilla Wafer, !snork = snork)