Buildpack experimentation

[CatChen]

This is a big change. Not a lot of files changed inside this repo, but more outside.

Here's what I want to achieve: Set OAuth app_id, client_id, client_secret as environment variables on the server and then nobody needs to set them separately. (Otherwise, nobody would really want to try out this app because nobody would apply for Hue OAuth by themselves.)

The biggest blocker is the OAuth client_secret needed for the request to /oauth2/token. I can't expose it in JavaScript. If I use typical REACT_APP_* environment variable, it will be compiled into JavaScript and expose. I have to keep it on the server side while use it when making the request to /oauth2/token.

The way I solved this is to ask Nginx to read the client_secret variable from the server directly and append it to the request header, so client_secret never leaves the server. It sounds simple but it's not supported in existing Heroku buildpack setup, so I had to change that.

First I added the header config in static.json, which is the source file that heroku-buildpack-static uses and compiles into Nginx config. This doesn't do anything, because heroku-buildpack-static doesn't recognize this new information yet.

Then I forked heroku-buildpack-static and changed that: CatChen/heroku-buildpack-static@a77851a. It can extract the header settings from static.json, replace environment variable with real value and put that into Nginx config.

Finally I forked create-react-app-buildpack, which is the actual buildpack used by this app. It depends on the official heroku-buildpack-static and I pointed that to my fork.

Now I can set the environment variables on Heroku and we don't have to set it inside the Settings dialog. At least, that's for http://hue-explorer.herokuapp.com. (It doesn't work for other Heroku instances of the same source code deployment, because environment variables don't share.)

[codecov]

Codecov Report

Merging #25 into master will decrease coverage by 0.05%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master      #25      +/-   ##
==========================================
- Coverage   35.61%   35.56%   -0.05%     
==========================================
  Files          34       34              
  Lines         702      703       +1     
  Branches      129      130       +1     
==========================================
  Hits          250      250              
  Misses        362      362              
- Partials       90       91       +1

Impacted Files	Coverage Δ
src/ui/HueBridgeSelector.js	48.15% <ø> (ø)	⬆️
src/index.js	0% <0%> (ø)	⬆️

[shihangw]

Not exactly sure what's the reason why heroku vars doesn't work..? https://devcenter.heroku.com/articles/config-vars

[shihangw]

I think there should be some middleware for node.js to read vars and append secrets as oauth header

[CatChen]

I’m using Heroku environment variable already. The thing is this app is set up as a static website — no server side code and serving only HTML, JS, CSS, etc.

The only exception is it supports proxy, but I don’t write any code for the proxy. It’s just config on the Nginx that serves the static content. Nginx config allows header setting in proxied requests, but I don’t control the Nginx config directly. The config file is generated from static.json by what Heroku calls a buildpack.

[CatChen]

In short, I don’t have any Node.js code running in the project. All JS in this project runs in browser. Can I add Node.js support and create server side code? Yes, but I want to stay away from that for now.

[shihangw]

gogogo