Robert Strohmeyer
Robert Strohmeyer

Reputation: 512

Ember-CLI api-stub 404 error

Using the default instructions in the README.md file for a freshly generated Ember-CLI 0.0.20 app, I'm getting a 404 error. I'd love to be able to use the API Stub for offline development.

FWIW, I realize this is a duplicate of How do I setup the api-stub in an ember-cli app?, but the answer on that one isn't working for me, and hasn't been marked as accepted by the asker.

Here's what api-stub/README.md says to do:

API Stub
========

The stub allows you to implement express routes to fake API calls.
Simply add API routes in the routes.js file. The benefit of an API
stub is that you can use the REST adapter from the get go. It's a
way to use fixtures without having to use the fixture adapter.

As development progresses, the API stub becomes a functioning spec
for the real backend. Once you have a separate development API
server running, then switch from the stub to the proxy pass through.

To configure which API method to use edit **package.json**.

* Set the **APIMethod** to 'stub' to use these express stub routes. 

* Set the method to 'proxy' and define the **proxyURL** to pass all API requests to the proxy URL.

Default Example
---------------- 

1. Create the following models:

        app/models/post.js

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

        var Post = DS.Model.extend({
          title: attr(),
          comments: hasMany('comment'),
          user: attr(),
        });

        export default Post;
        ```

        app/models/comment.js

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

        var Comment = DS.Model.extend({
          body: attr()
        });

        export default Comment;
        ```

2. Setup the REST adapter for the application:

        app/adapters/application.js

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

        export default ApplicationAdapter;
        ```

3. Tell the Index router to query for a post:

        app/routes/index.js

        ```
        var IndexRoute = Ember.Route.extend({
          model: function() {
            return this.store.find('post', 1);
          }
        });

        export default IndexRoute;
        ```


4. Expose the model properties in the index.hbs template

        app/templates/index.hbs

        ```
        <h2>{{title}}</h2>
        <p>{{body}}</p>
        <section class="comments">
            <ul>
            {{#each comment in comments}}
              <li>
                <div>{{comment.body}}</div>
              </li>
            {{/each}}
            </ul>
        </section>
        ```

When Ember Data queries the store for the post, it will make an API call to
http://localhost:8000/api/posts/1, to which the express server will respond with
some mock data:

```
{
  "post": {
    "id": 1,
    "title": "Rails is omakase",
    "comments": ["1", "2"],
    "user" : "dhh"
  },

  "comments": [{
    "id": "1",
    "body": "Rails is unagi"
  }, {
    "id": "2",
    "body": "Omakase O_o"
  }]
}
```

api-stub/routes.js:

/* global module */
module.exports = function(server) {

  // Create an API namespace, so that the root does not 
  // have to be repeated for each end point.
  server.namespace('/api', function() {

    // Return fixture data for '/api/posts/:id'
    server.get('/posts/:id', function(req, res) {
      var post = {
        "post": {
          "id": 1,
          "title": "Rails is omakase",
          "comments": ["1", "2"],
          "user" : "dhh"
        },

        "comments": [{
          "id": "1",
          "body": "Rails is unagi"
        }, {
          "id": "2",
          "body": "Omakase O_o"
        }]
      };

      res.send(post);
    });
  });
};

app/adapters/application.js:

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

export default ApplicationAdapter;

app/models/post.js:

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

var Post = DS.Model.extend({
  title: attr(),
  comments: hasMany('comment'),
  user: attr(),
});

export default Post;

app/models/comment.js:

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

var Comment = DS.Model.extend({
  body: attr()
});

export default Comment;

app/routes/index.js:

var IndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('post', 1);
  }
});

export default IndexRoute;

app/router.js:

var Router = Ember.Router.extend(); // ensure we don't share routes between all Router instances

Router.map(function() {
  this.route('index', {path: '/'});
  this.route('component-test');
  this.route('helper-test');
  // this.resource('posts', function() {
  //   this.route('new');
  // });
});

export default Router;

app/templates/index.hbs:

<h2>{{title}}</h2>
<p>{{body}}</p>
<section class="comments">
    <ul>
    {{#each comment in comments}}
      <li>
        <div>{{comment.body}}</div>
      </li>
    {{/each}}
    </ul>
</section>

package.json:

...
  "name": "cli2test",
  "APIMethod": "stub",
  "version": "0.0.0",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "test"
...

Upvotes: 1

Views: 1024

Answers (1)

Robert Strohmeyer
Robert Strohmeyer

Reputation: 512

The short-term answer on this, from Stefan Penner via Twitter:

@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

Upvotes: 2

Related Questions