How to setup development environment for Ember.js + Express

Question

I'm in the process of splitting into two different projects an Ember.js app and its Express REST API counterpart. I assumed that things would be cleaner this way.

Until then, my Express app was both serving REST endpoints and all static files like index.html and app.js. But now, ember-cli is in charge of serving the static files and the Express app handles authentication + REST.

The last issue I'm having is that I now have two different ports: ember-cli uses http://localhost:4200 and express uses http://localhost:3333. When I get the session cookie from Express upon authentication, it's never being sent on subsequent request because of same origin policy (see: How do I send an AJAX request on a different port with jQuery?).

Now if I understand correctly I have two solutions:

1. Setup Express to support JSONP and make sure Ember uses it too
2. Install a local Nginx or Apache and setup a proxy pass

The first solution is not ok because after deployment both apps will use the same domain/port. The second solution would probably work but it seems a bit ridiculous to ask developers to install a local web server to simply run an app.

I'm sure many of you have encountered that issue before. What would you suggest to make development easy?

Thanks!

Answer 1

Hmm. Seems like I found another solution:

Following instructions found there: http://discuss.emberjs.com/t/ember-data-and-cors/3690/2

export default DS.RESTAdapter.extend({
    host: 'http://localhost:3333',
    namespace: 'api',
    ajax: function(url, method, hash) {
        hash = hash || {}; // hash may be undefined
        hash.crossDomain = true;
        hash.xhrFields = { withCredentials: true };
        return this._super(url, method, hash);
    })
});

You will also need to add the following headers in the Express app:

// Add support for cross-origin resource sharing (localhost only)
app.all('*', function(req, res, next) {
    if (app.get('env') === 'development') {
        res.header('Access-Control-Allow-Origin', 'http://localhost:4200');
        res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
        res.header('Access-Control-Allow-Credentials', 'true');
        res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    }
    next();
});

That's it! Last step is to make sure that Ember uses CORS only in the dev environment.

UPDATE

Ember-cli now has an integrated proxy feature that makes all the above obsolete.

From documentation: "Use --proxy flag to proxy all ajax requests to the given address. For example ember server --proxy http://127.0.0.1:8080 will proxy all your apps XHR to your server running at port 8080."