There is only one requirement to use this template.
There are two ways to develop extensions- the first is the Developer Rig, which is the preferred option. The second is to use Local Test and test on Twitch on your channel page.
If you are using the Developer Rig and have used this as your basis for your extension, this is easy to start with. The full steps are:
Please note that HTTPS only works with the Developer Rig version 1.1.4 and above.
If you are using a version below that, please either upgrade the Developer Rig (by either auto-updating or reinstalling the Developer Rig) or disable HTTPS. To disable HTTPS:
/webpack.config.js
.config.devServer.https = true
to config.devServer.https = false
.If you're wanting to develop this locally, use the below instructions. To use this, simply clone the repository into the folder of your choice.
For example, to clone this into a extensions-boilerplate
folder, simply run the following in a command line interface:
git clone https://github.com/twitchdev/extensions-boilerplate
Next, do the following:
npm install
to install all prerequisite packages needed to run the template. npm run start
to run the sample. By default, you should be be able to go to https://localhost:8080/
and have the page show the instructions to get up and running. This README includes that same information. This sample requires it be run on https://twitch.tv/ or the Twitch Developer Rig to utilize the Twitch Extension Helper.
When you are happy with how your extension looks locally, you can then move into Hosted Test on Twitch.
dist
directory after running npm run build
. Note that the contents of the dist
directory must be at the root of your zip file. If you have trouble viewing your extension please make sure that your files are not wrapped in a parent folder at the root of the zip file.
zip -r ../dist.zip dist/*
in the dist
folder to generate a properly formatted zip file. The Webpack config is stored under /webpack.config.js
. Adjusting the config will allow you to disable building code for unneeded extension views. To do so, simply turn the build
attribute on the path to false
.
One fairly important note is that the current configuration does not minimize the Webpack output. This is to help with the extension review policy, as turning this setting to minimize will guarantee that review will need full source to complete the review.
Additionally, feel free to modify the code as needed to add either additional plugins (via modifying the plugins variable at the top) or simply adjusting/tuning the output from Webpack.
There is a basic Authentication class included in this boilerplate to handle simple use-cases for tokens/JWTs.
It is important to note that this class does not validate that the token is legitimate, and instead should only be used for presentational purposes.
If you need to use the token for any logic/permissioning, please have your EBS validate the token on request using the makeCall()
method as provided in the function. This will automatically pass the JWT to the endpoint provided.
To initialize the class:
const Authentication = require('../Authentication/Authentication');
this.Authentication = new Authentication();
To set a token:
window.Twitch.ext.onAuthorized(auth=>{
this.Authentication.setToken(auth.token,auth.userId)
})
This then enables you to call a number of functions based on the token. The other functions are blind to whether the token is actually signed by Twitch, however, and should be only used for presentational purposes. Any requests to the backend should validate that the token is signed correctly by comparing signatures.
For a small demonstration of the class, see the App component.
The file structure in the template is laid out with the following:
/dist
holds the final JS files after building. You can simply zip up the contents of the folder to upload to Twitch to move to Hosted Test, as noted above.
/public
houses the static HTML files used for your code's entrypoint. If you need to add new entrypoints (for something custom, such as a specific view that's only for a subset of users), simply add it to the webpack config and add a new copy of the file here.
This folder houses all source code and relevant files (such as images). Each React class/component is given a folder under components
to house all associated files (such as associated CSS).
Below this folder, the structure is much simpler.
This would be:
components\
-\App\
--\App.js
--\App.test.js
--\App.css
...
-\util\
--\Authentication\
---\Authentication.js
---\Authentication.test.js