Using ember-cli with a subdomain-based API

Ember CLI
1

Looking at getting up and going with ember-cli, but I’m having trouble figuring out how to handle this issue.

Our application uses subdomains to determine which account it’s interacting with. Data presented in API requests is scoped by that account, even in development. Right now I can just use ember-rails to make things work, but I can’t use ember serve since it only forwards API requests to one domain name. Anyone have experience or suggestions on how to tackle this?

1 Like
2

Hey awj, did you ever figure out what is the proper way to handle this situation?

I´m still to start getting my hands dirty with Ember.js for a side project, but this was like one of my first questions, and I did not find much about it elsewhere.

Thanks.

3

Maybe you can just send requests to the absolute url, and skip the whole proxy thing? If you let ember-cli listen on 0.0.0.0, CORS shouldn’t be an issue.

4

So far I haven’t. Since I’m doing this with a Rails project my solution thus far has been to just use the ember-rails gem. If you’re in the same boat you may want to try using ember-cli-rails instead since ember-rails isn’t the most forward thinking of choices nowadays. When I started all of this ember-cli-rails gave me problems I couldn’t readily diagnose, but that might be more to do with the current setup.

Ember-cli seems to handle responding to requests just fine with hostname overrides, so it might not be that hard to get them to implement a generic passthrough proxy that would only take a protocol and port.

5

As a follow up, another option would be to use the ember cli “build” command with --watch so it could automatically compile and place JS in the proper location. That way you aren’t really changing your local set up much, besides ensuring that the JS generated by ember cli isn’t being cached. That’s probably the easiest, most tool-agnostic solution I can come up with at the moment.

6

Here’s how I handle subdomains with ember-cli, I hope you find it helpful…

Dependencies

First, I’m using pow (http://pow.cx) for development. That must be set up first. My app is hosted locally on http://myapp.dev.

Pow allows you to use subdomains out of the box with no configuration.

##Setting up ember-cli

###Create a proxy ember generate http-proxy api-v1

###Modify the proxy

 //server/proxies/api-v1.js

var proxyPath = '/api/v1';

module.exports = function(app) {
  var proxy = require('http-proxy').createProxyServer({});

  proxy.on('error', function(err, req) {
    console.error(err, req.url);
  });

  app.use(proxyPath, function(req, res, next){
    req.url = proxyPath + '/' + req.url;
    proxy.web(req, res, { target: '' });
  });
};

###Running ember serve

ember serve --host myapp.dev

##Live Reload errors in the console The live reload js will muddy your console with warnings, if this bothers you like is does me, add the following to your environment.js:

reference: ember-cli-content-security-policy

// config/environment.js

if (environment === 'development' || environment === 'test') {
  ENV.contentSecurityPolicy = {
    'default-src': "'none'",
    'script-src': "'self' https://cdn.mxpnl.com http://*.myapp.dev:35729",
    'font-src': "'self' http://fonts.gstatic.com",
    'connect-src': "'self' https://api.mixpanel.com http://custom-api.local ws://*.myapp.dev:35729",
    'img-src': "'self'",
    'style-src': "'self' 'unsafe-inline' http://fonts.googleapis.com",http://fonts.googleapis.com 
    'media-src': "'self'"
  };
}
1 Like