colbydude / twitch-extension-vue-laravel-mix-boilerplate

Twitch Extension Boilerplate setup to use VueJS and Laravel Mix.

Twitch Extensions VueJS & Laravel Mix Boilerplate

This boilerplate is setup to provide a quick way to create an extension frontend using Vue and Laravel Mix, and a backend with Hapi. This is stemming from the same format of the official Twitch Hello World Sample.

Motivation

The Hello World sample is designed to get you started building an Extension quickly. It contains all the key parts of a functioning Twitch Extension and can be immediately run in the Developer Rig.

What's in the Sample

The Hello World Extension provides a simple scenario that demonstrates the end to end flow of an Extension. On the frontend, a user clicks a button that can change the colour of a circle. Instead of changing the CSS locally, it calls its Extension Backend Service (EBS) to update the colour of the circle. That message is then sent via Twitch PubSub to update all clients listening to the PubSub topic.

The sample is broken into two main components:

1. The Frontend of the Extension, comprising HTML files for the different extension views, and corresponding Javascript files and CSS. The frontend has the following functionality:
   • A button and script that makes a POST call to the EBS to request a colour change for the circle
   • A GET call when the Extension is initialised to change the circle to the current colour stored on the EBS
   • A listener to Twitch PubSub, that receives colour change updates and then updates the circle colour
2. A lightweight EBS that performs the following functionality:
   • Spins up a simple HTTPS Server with a POST handler for changing colour
   • Validates an Extension JWT
   • Sends a new colour message via Twitch PubSub for a specific channel

There is also a service called Frontend which can be used to serve the HTML and .JS files in lieu of using the Developer Rig. If you are using the Developer Rig, you can disregard this service.

Using the Sample

The recommended path to using this sample is with the Developer Rig.

The Developer Rig is able to host the frontend Hello World files and run the EBS simultaneously.

Configuring and Running the Extension Backend Service

To run the frontend, run npm run frontend.

To run the EBS, run npm run backend, with the following command line arguments: -c <client id>, -s <secret>, -o <owner id>.

This provides the EBS with your Extension client ID, Extension secret and the user ID of the Extension owner (likely you). These are necessary to validate calls to your EBS and make calls to Twitch services such as PubSub.

You can get your client ID and secret from your Extension Dashboard. See the documentation for the Developer Rig for more details.

To get the owner ID, you will need to execute a simple CURL command against the Twitch /users endpoint. You'll need your extension client ID as part of the query (this will be made consistent with the Developer Rig shortly, by using owner name).

curl -H 'Client-ID: <client id>' -X GET 'https://api.twitch.tv/helix/users?login=<owner name>'

Alternatively, you can fetch your Twitch ID using the developer rig. Select "Configuration Service" and use the ID listed under "Channel ID or Name".

You will also need to generate a cert to run your EBS. See below for the steps to accomplish this.

SSL Certificates

Twitch Extensions require SSL (TLS).

If you need a certificate for local development, please use the npm run cert command. This will generate a new certificate (server.crt and server.key) for you, and place it in the conf/ directory. This certificate is different than the one used for the Developer Rig. If you're on OS X, this command will automatically add the certificate to your keychain. If you're on Windows, you need to do this manually to avoid the scary "connection not secure" warnings. Check out the Microsoft Docs for more information on generating and installing certificates on Windows.

Note - At this time, to use the Developer Rig and this sample, you will have needed to onboard to Twitch Extensions. You can start that process here.

Further documentation

Please consult the Twitch Extensions documentation on the Twitch developer site

twitch-extension-vue-laravel-mix-boilerplate's Issues

Cannot start service

Hi,
everything starts building correctly until I hit this point:

ERROR: for twitchextensionvuelaravelmixboilerplate_boilerplatebackend_1  Cannot start service boilerplatebackend: driver failed programming external connectivity on endpoint twitchextensionvuelaravelmixboilerplate_boilerplatebackend_1 (72d4a3612f270f50b649dcca98e080d9f37a2a2926484809fe811eabbc41fec2): Error starting userland proxy: mkdir /port/tcp:0.0.0.0:8080:tcp:172.19.0.2:8080: input/output error

ERROR: for boilerplatebackend  Cannot start service boilerplatebackend: driver failed programming external connectivity on endpoint twitchextensionvuelaravelmixboilerplate_boilerplatebackend_1 (72d4a3612f270f50b649dcca98e080d9f37a2a2926484809fe811eabbc41fec2): Error starting userland proxy: mkdir /port/tcp:0.0.0.0:8080:tcp:172.19.0.2:8080: input/output error

Has anyone else had this problem?

404 for all referenced files in hosted test

Hi, first of all thanks for the work you've done on this boilerplate.

I had an issue with my extension, so I tried uploading the build of yours (no code changed). In hosted test, any file that is included (correctly with relative paths) from the viewer.html file does not load (the css/app.css, similarly js/*.js files). When I create the zip folder, I confirmed the files are in the root of the archive (not in any subfolder).

Would you have any pointers to me? I must be doing something wrong 🤔 Thanks!