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!

score 9 · Answer 1 · answered May 14 '14 at 00:46

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': [ 
                    ...
             ]
        });
     })
}

Robert Strohmeyer · Answer 2 · 2014-04-07T20:18:34.840

4

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

edited Apr 07 '14 at 20:18

answered Apr 01 '14 at 14:12

Robert Strohmeyer

502
4
12

Issue closed, instead of supporting api-stub, the server has been exposed. https://github.com/stefanpenner/ember-cli/pull/568 – givanse Jun 04 '14 at 03:15

score 4 · Answer 3 · edited May 23 '17 at 12:13

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.

intuitivepixel · Answer 4 · 2014-03-24T18:55:43.130

1

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.

edited Mar 24 '14 at 18:55

answered Mar 23 '14 at 08:03

intuitivepixel

23,302
3
57
51

I've updated the question to include package.json, which already had the APIMethod set to stub. As for the second bullet, I saw that instruction in the README as well, but am not clear which method I'm supposed to set to 'proxy' or where for that matter. It makes sense, just not clear where/how to do it. – Joe Mar 23 '14 at 15:54
Could you expound with the actual line of code and where it goes? I'd really appreciate it. – Joe Mar 23 '14 at 21:11
I'm having the same problem, and duplicating the proxyURL and proxyPath above isn't resolving it for me. I've copied and pasted the changes in the api-stub README.md verbatim, and suspect the problem may lie in my proxy settings. In my case, the ember server is running on port 4200. Should the proxyURL be on the same port? – Robert Strohmeyer Mar 29 '14 at 00:50

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

4 Answers4

Linked