How do I setup the api-stub in an ember-cli app?

Question

I’m setting up a basic app using ember-cli and am running into trouble with the api-stub with ember-data. I've referenced the api-stub README and have referenced the ember guides, but can't figure out what I'm missing. I’m a bit of a noob, so forgive any obvious oversights on my part.

Here's my setup...

/api-stub/routes.js

server.get('/listings', function(req, res) {
  var listing = {
    "listing": [{
      "id": 1,
      "title": "Sunny 1-bedroom",
      "unit_type": "1br / 1ba",
      "description": "Roomy 1-bedroom apartment in pre-war walkup. Gets great morning light from the south."
    },
    {
      "id": 2,
      "title": "Large 2-bedroom",
      "unit_type": "2br / 1.5ba",
      "description": "Roomy 2-bedroom apartment in pre-war walkup. Gets great morning light from the south."
    }]
  };

  res.send(listing);
});

/app/adapters/application.js

var ApplicationAdapter = DS.RESTAdapter.extend({
    namespace: 'api'
});

export default ApplicationAdapter;

/package.json

{
  ...
  "APIMethod": "stub",
  ...
}

/app/router.js

this.resource('listings', function() {
    this.resource('listing', { path: '/:listing_id' });
});

/app/routes/listings.js

var ListingsRoute = Ember.Route.extend({
    model: function() {
        return this.store.findAll('listing');
    }
});

export default ListingsRoute;

/app/models/listing.js

var attr = DS.attr,
    hasMany = DS.hasMany,
    belongsTo = DS.belongsTo;

var Listing = DS.Model.extend({
  title: attr(),
  unit_type: attr(),
  description: attr()
});

export default Listing

/app/templates/listing.hbs

<h2>{{title}}</h2>
<p>{{unit_type}}</p>
<p>{{description}}</p>

In console it shows a 404 for …/api/listings and ember inspector in chrome is showing no records.

Any help much appreciated!

Answer 1

As of recently, ember-cli now supports API stubbing. I also got it working with the following example setup (very similar to your original setup):

/app/adapters/application.js

var ApplicationAdapter = DS.RESTAdapter.extend({namespace: 'api'});

export default ApplicationAdapter;

/app/package.json

{
    ...
    "APIMethod": "stub",
    ...
}

/app/routes/application.js

export default Ember.Route.extend({
    model: function() {
        return Ember.RSVP.hash({
            foos: this.store.findAll('foo'),
            bars: this.store.findAll('bar')
        });
    },

    setupController: function(controller, models) {
        controller.set('foos', models.foos);
        controller.set('bars', models.bars);
    }
});

/app/router.js

var Router = Ember.Router.extend({
  location: ENV.locationType
});

Router.map(function() {
    this.resource('foos', function() {
        this.resource('foo', { path: '/:foo_id' });
    });

    this.resource('bars', function() {
        this.resource('bar', { path: '/:bar_id' });
    });
});

export default Router;

/app/server/routes/foos.js

module.exports = function(app) {
    app.get('/api/foos', function(req, res) {
        res.send({
            'foos': [ 
                    ...
             ]
        });
     })
}

/app/server/routes/bars.js

module.exports = function(app) {
    app.get('/api/bars', function(req, res) {
        res.send({
            'bars': [ 
                    ...
             ]
        });
     })
}

Answer 2

I asked Stefan Penner about this via Twitter, and here was his response:

@caretpi API stub does not work in cli. We hope to have it integrated soon though

— Stefan Penner (@stefanpenner) April 1, 2014

There's an issue open on GitHub: https://github.com/stefanpenner/ember-cli/issues/153

Answer 3

As of version 0.0.41 use the http-mock and http-proxy blueprints. See my answer here for using http-mock. Use http-proxy like so:

>ember g http-proxy projects http://localhost:8080/

After applying this fix (kudos @tstirrant) to the generated proxy code, it will work as expected. ie. it will proxy localhost:4200/projects to localhost:8080/projects

Update: In version 0.0.46 the generator includes 'the fix' so it's no longer needed.

Answer 4

To configure the stub API you need to edit package.json.

• Set the APIMethod to stub to use these express-server stub routes.
• Set the method to 'proxy' and define the proxyURL to pass all API requests to the proxy URL, eg. http://localhost:8000

Update - this is my working setup

api-stub/routes.js

server.namespace('/api', function() {
  server.get('/posts', function(req, res) {
    res.send([...]);
  });
});

package.json

...
"name": "myapp",
"namespace": "appkit",
"APIMethod": "stub",
"proxyURL": "http://localhost:8000",
"proxyPath": "/api",
...

Now, an ajax GET request to http://localhost:8000/api/posts responds with the mock array.

Hope this works for you.