There is only one requirement to use this template.
- Node.JS LTS or greater.
You may also find that using yarn
is easier than npm
, so we do recommend installing that as well by running:
npm i -g yarn
in an elevated command line interface.
If you opt to use npm
, simply replace all mentions of yarn
below with npm run
, such as npm run start
or npm run build
.
Developer Rig Usage
If you are using the developer rig and have used this as your basis for your extension, please ignore the below steps- the developer rig has taken care of it for you!
If you are using a version below that, please either upgrade or disable HTTP. To do so:
- Go into
/webpack.config.js
- Update
config.devServer.https = true
toconfig.devServer.https = false
- On the Twitch Developer Console, make sure to update the Asset Hosting path for your extension to use http instead.
- Refresh your manifest in the Developer Rig and recreate your views.
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 <repo name here>
folder, simply run the following in a commandline interface:
git clone <repo name to be fixed later>
Next, do the following:
- Change directories into the cloned folder.
- Run
yarn install
to install all prerequisite packages needed to run the template. - Run
yarn start
to run the sample. If everything works, you should be be able to go to the developer rig, create a panel view, and seeHello world!
To build your finalized React JS files, simply run yarn build
to build the various webpacked files. These files will use code splitting to only load in the libraries needed for that view, while still allowing you to reuse components.
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
.
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.
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.
/public
houses the static HTML files used for your code's entrypoint. If you need to add new entrypoints (for something custom), 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 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
-\Authentication\
--\Authentication.js
...
-\static\
--\images
---\sample_image.jpeg
Each component is under the components
folder.
- Run
npm start
in your console - Start the Twitch Developer Rig
- Select Create your first Project
- Select New Extension in the first drop down.
- Enter whatever project name you would like.
- Select Panel type
- Select Next
- Under
Select the local folder where your extensions files will be located during development.
Select the path of the this repo. - Under
Add Code to you Project
SelectNone - I'll use my own code
- Select Next, then Select Get Started.
- To the test views, select extension views in the left pane
- Then Select
Create New View
- Choose the view type you would like to see, give it a view label, and choose the viewer type, then click save.