twitchdev / extensions-boilerplate

Frontend only React based sample to get you started building quickly
Other
72 stars 31 forks source link

Make clearer on how to use with dev rig #1

Open montycheese opened 5 years ago

montycheese commented 5 years ago

First of all, thanks for setting up this sample project to help people get started with Twitch extensions.

This project is included in the dev rig as a sample project, therefore I assume most people who find this project, probably are running this project from that tool.

The README for this project does not include a section on how to run this project in the context of using the dev rig. As a result, there is some friction between actually running this extension natively and with the dev rig.

For example, the README says to run this project with "yarn start" which runs the assets at localhost:8080, while the dev rig tries to fetch assets from localhost.rig.twich.tv:8080. Because it might not be obvious for someone who hasn't looked within the package.json, there should be a section that instructs developers to run with "yarn host" from within the dev rig tool.

Additionally, the generate_cert shell script only creates a self-signed cert with a SAN of localhost. The hostname validation fails if we are running this at localhost.rig.twitch.tv, so that script should be modified to include both hostnames.

openssl req \
  -newkey rsa:4096 \
  -days 1001 \
  -nodes \
  -x509 \
  -subj "/C=US/ST=California/L=San Francisco/O=LULZCorp/OU=web/CN=localhost" \
  -extensions SAN \
  -config <( cat $( [[ "Darwin" = "$(uname -s)" ]]  && echo /System/Library/OpenSSL/openssl.cnf || echo /etc/ssl/openssl.cnf  ) \
    <(printf "[SAN]\nsubjectAltName=DNS:localhost,DNS:localhost.rig.twitch.tv")) \
  -keyout "${DIR}/${NAME}.key" \
  -out "${DIR}/${NAME}.crt"
lleadbet commented 5 years ago

@montycheese - Thanks for the feedback.

One important piece of information here is that there are two ways to use this boilerplate, depending on preference.

The first, as noted, is through the developer-rig. This is the preferred way to run it, but as you've pointed out, isn't immediately clear in the README, which I will look to be a bit more verbose on the process.

It is important to note that the devrig actually takes care of the certs in this case, as it uses the same certificate for both the rig and the boilerplate, meaning that if you intend to use it with the rig, starting it there is the best process. Beyond that, we can look at duplicating the script, but the script for the certificate generation is intended (again, README updates!) for the second method of hosting.

The second is to use it locally without running in the rig, and instead using online mode in the rig/on the Twitch site itself. This is how it was developed in the first place, but I do understand the confusion.

I did look into updating the certificate/having duplicate certificates generated, but due to the fact it only works on Mac (at the moment), it is important to ensure we create a cross-platform solution long-term.

Happy to chat more about this!

montycheese commented 5 years ago

@lleadbet Thanks for the quick reply! I pasted a modified version of your openssl command that creates the self-signed cert with both SANs in the OP :-). I'll be building off this boilerplate so I'll be more than happy to add more feedback on this thread if I discover any more points of friction that could be eased via more documentation.