{"action":"created","issue":{"url":"https://api.github.com/repos/MozillaFoundation/mofo-example-app/issues/32","labels_url":"https://api.github.com/repos/MozillaFoundation/mofo-example-app/issues/32/labels{/name}","comments_url":"https://api.github.com/repos/MozillaFoundation/mofo-example-app/issues/32/comments","events_url":"https://api.github.com/repos/MozillaFoundation/mofo-example-app/issues/32/events","html_url":"https://github.com/MozillaFoundation/mofo-example-app/issues/32","id":55428660,"number":32,"title":"Resolve implications of multi-port setup for auth'ing apps","user":{"login":"davidascher","id":51278,"avatar_url":"https://avatars.githubusercontent.com/u/51278?v=3","gravatar_id":"","url":"https://api.github.com/users/davidascher","html_url":"https://github.com/davidascher","followers_url":"https://api.github.com/users/davidascher/followers","following_url":"https://api.github.com/users/davidascher/following{/other_user}","gists_url":"https://api.github.com/users/davidascher/gists{/gist_id}","starred_url":"https://api.github.com/users/davidascher/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidascher/subscriptions","organizations_url":"https://api.github.com/users/davidascher/orgs","repos_url":"https://api.github.com/users/davidascher/repos","events_url":"https://api.github.com/users/davidascher/events{/privacy}","received_events_url":"https://api.github.com/users/davidascher/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-01-25T20:22:57Z","updated_at":"2015-01-26T00:06:12Z","closed_at":null,"body":"Right now the API server serves of 55555, and the static pages are served off of 55556.  I understand the motivation to demonstrate how to do API servers and pure static page sites, and in prod that's all fine, but when making apps with both content and auth & API calls, we end up with:\r\n\r\n * any pages or components that make API calls (e.g. via XHR) end up needing to have a reference to localhost:55555, which would have to be refactored for staging or prod\r\n * oauth APIs need both home page URLs and API URLs, and right now we can't serve both the home page and the oauth-callback endpoint from the same port, which means we need to setup two ngrok-style proxies (assuming github lets us have them not be to be the same).\r\n * most critically, the API server can set cookies on the API servers' domain (e.g. to pass things like currently-signed-in-github-user), but it's not clear to me how to access those on the content-serving domain without serious backflips, and it feels wrong.  \r\n\r\nI can think of three ways to simplify:\r\n * build some client-side JS code that the client-side code refers to instead of hardcoding the API endpoint, so that shifting to production means changing a single variable, not N\r\n * for apps that need content, API calls and auth, building a single-port `app.js` which both serves the static content and proxies API calls to the api-server.\r\n * your idea goes here\r\n\r\n/cc @Pomax \r\n"},"comment":{"url":"https://api.github.com/repos/MozillaFoundation/mofo-example-app/issues/comments/71401295","html_url":"https://github.com/MozillaFoundation/mofo-example-app/issues/32#issuecomment-71401295","issue_url":"https://api.github.com/repos/MozillaFoundation/mofo-example-app/issues/32","id":71401295,"user":{"login":"davidascher","id":51278,"avatar_url":"https://avatars.githubusercontent.com/u/51278?v=3","gravatar_id":"","url":"https://api.github.com/users/davidascher","html_url":"https://github.com/davidascher","followers_url":"https://api.github.com/users/davidascher/followers","following_url":"https://api.github.com/users/davidascher/following{/other_user}","gists_url":"https://api.github.com/users/davidascher/gists{/gist_id}","starred_url":"https://api.github.com/users/davidascher/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidascher/subscriptions","organizations_url":"https://api.github.com/users/davidascher/orgs","repos_url":"https://api.github.com/users/davidascher/repos","events_url":"https://api.github.com/users/davidascher/events{/privacy}","received_events_url":"https://api.github.com/users/davidascher/received_events","type":"User","site_admin":false},"created_at":"2015-01-26T00:06:12Z","updated_at":"2015-01-26T00:06:12Z","body":"A thing that could work I think is to make the api-server proxy routes that it doesn't handle to the live-server hosted port.  \r\n\r\ne.g. in api-server.js, add something like: \r\n```\r\nvar proxy = require('proxy-middleware')\r\nvar url = require('url');\r\napp.use('/', proxy(url.parse('http://localhost:55556')));\r\n```\r\n\r\nI say \"like\" because the above doesn't proxy websocket connections, so breaks the live-server code.  But a proxy that did that might work (and then we just think of the `:55555` server as the app and the API server. "}}