You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Loading the Sample on Twitch](#loading-the-sample-on-twitch)
8
+
-[Moving to Hosted Test (and beyond!)](#moving-to-hosted-test-and-beyond)
9
+
-[Webpack Config](#webpack-config)
10
+
-[Authentication](#authentication)
11
+
-[File Structure](#file-structure)
12
+
-[dist](#dist)
13
+
-[public](#public)
14
+
-[src](#src)
2
15
3
16
## Requirements
4
17
5
18
There is only one requirement to use this template.
6
19
7
20
* Node.JS LTS or greater.
8
21
9
-
You may also find that using `yarn` is easier than `npm`, so we do recommend installing that as well by running:
10
-
```
11
-
npm i -g yarn
12
-
```
13
-
in an elevated command line interface.
14
-
15
-
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`.
16
-
17
22
## First time Usage
18
23
24
+
There are two ways to develop extensions- the first is the [Developer Rig](#developer-rig-usage), which is the preferred option. The second is to use [Local Test](#local-development) 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, please ignore the below steps- the developer rig has taken care of it for you!
28
+
If you are using the [Developer Rig](https://dev.twitch.tv/docs/extensions/rig/) and have used this as your basis for your extension, this is easy to start with. The full steps are:
29
+
30
+
1. Click on Add Project, then Create Project
31
+
2. Either create a new extension or use an existing one and hit "Next"
32
+
3. Choose "Use boilerplate code" under "Add Code to your Project" and hit "Next"
33
+
4. Let the boilerplate code download, install dependencies, and complete. Once finished, hit "Get Started"
34
+
5. Click on "Run Frontend" and add views in the "Extension Views" tab
35
+
6. Accept any certificate errors, as the certificate is self-signed
36
+
7. You can now make changes in real-time and it'll update in all views!
22
37
23
-
### Please note that HTTPS only works with the Developer Rig version 1.1.4 and above.
38
+
**Please note that HTTPS only works with the Developer Rig version 1.1.4 and above.**
24
39
25
-
If you are using a version below that, please either upgrade or disable HTTP. To do so:
40
+
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:
26
41
27
-
1. Go into `/webpack.config.js`
28
-
2. Update `config.devServer.https = true` to `config.devServer.https = false`
42
+
1. Go into `/webpack.config.js`.
43
+
2. Update `config.devServer.https = true` to `config.devServer.https = false`.
29
44
3. On the [Twitch Developer Console](https://dev.twitch.tv/console), make sure to update the Asset Hosting path for your extension to use http instead.
30
45
4. Refresh your manifest in the Developer Rig and recreate your views.
31
46
@@ -34,25 +49,45 @@ If you are using a version below that, please either upgrade or disable HTTP. To
34
49
If you're wanting to develop this locally, use the below instructions.
35
50
To use this, simply clone the repository into the folder of your choice.
36
51
37
-
For example, to clone this into a `<repo name here>` folder, simply run the following in a commandline interface:
52
+
For example, to clone this into a `extensions-boilerplate` folder, simply run the following in a command line interface:
2. Run `yarn install` to install all prerequisite packages needed to run the template.
46
-
3. 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 see `Hello world!`
60
+
2. Run `npm install` to install all prerequisite packages needed to run the template.
61
+
3. Run `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.
62
+
1. It should also give a certificate error- this is expected, as the sample uses a self-signed certificate to support HTTPS.
63
+
2. If you had to change the port (likely due to a port conflict), update the port in the URL above.
47
64
48
-
##Building Production Files
65
+
#### Loading the Sample on Twitch
49
66
50
-
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.
67
+
1. Now that you have the boilerplate loaded and installed, you'll need two things first.
68
+
* Extension made on [the Twitch Developer Site](https://dev.twitch.tv/console).
69
+
* The extension installed on your own channel. This can be done in the "Invite Only" section of the Extension Store, where you'll find your extension listed.
70
+
2. Once you've installed your extension, you'll need to activate the extension and add it to any of the available slots: Panel, Component, or Overlay. Do note that Component or Overlay extensions require you to be live when testing.
71
+
3. Go to your channel on Twitch and you'll have to click on "Accept" on the extension. It should load.
72
+
4. If it doesn't load, don't fret! Simply visit the URL for the view (https://localhost:8080/panel.html for a panel view, for example) and accept the certificate. Go back to your channel page on Twitch and you'll be good to go!
73
+
74
+
## Moving to Hosted Test (and beyond!)
75
+
76
+
When you are happy with how your extension looks locally, you can then move into Hosted Test on Twitch.
77
+
78
+
1. Twitch will host your frontend assets for you. To upload your frontend files, zip the _contents_ of your `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.**
79
+
1. For OSX, you can run `zip -r ../dist.zip dist/*` in the `dist` folder to generate a properly formatted zip file.
80
+
2. For Windows, you can select all files in the folder and add to compressed archive.
81
+
2. From the [developer dashboard](https://dev.twitch.tv/console/extensions/) for your extension, navigate to the Files tab and upload your zip file. This could take a few minutes if your project is large.
82
+
3. Once your front end files are uploaded, go back to the Status tab and click on "Move To Hosted Test".
83
+
4. You should now be able to add your extension to your Twitch page and see what it looks like on your page. There is a handy link to do that in the dashboard using the "View on Twitch and Install" button!
51
84
52
85
### Webpack Config
53
86
54
87
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`.
55
88
89
+
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.
90
+
56
91
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.
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.
82
117
83
-
For a small demonstration of the class, see the App compoonent.
118
+
For a small demonstration of the class, see the App component.
84
119
85
120
## File Structure
86
121
87
122
The file structure in the template is laid out with the following:
88
123
89
124
### dist
90
125
91
-
`/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.
126
+
`/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.
92
127
93
128
### public
94
129
95
-
`/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.
130
+
`/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.
96
131
97
132
### src
98
133
99
-
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).
134
+
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).
0 commit comments