14

I have a simple (so far) ember-cli project, and right now just have one model with FIXTURE data. I would like to mock up API stuff, either with actual JSON files, or with http-mock, which is the ember-cli version 41 name of what used to be api-stub.

I'm pretty new to all this, so I really didn't know what to make of the info I found where people were able to get api-stub working, and it doesn't look like any docs on the ember-cli have been updated with http-mock info yet.

I did do ember generate http-mock project but I'm not sure really what to do from here.

Here's my current app/router.js:

Router.map(function() {
  this.resource('projects', { path: '/' });
  this.resource('project', {path: '/project/:project_id'}, function(){
    this.resource('milestones');
    this.resource('team');
    this.resource('budget');
  });
});

So I have a template for all my projects, and want to drill down to one, which need to be able to relate to the nested routes. My ideal would be something like the GitHub API where you can drill down from a user to a repo, to issues on that repo, etc.

Again, I'm still learning my way around ember and ember-cli, so explanations of "why" as well as "how" are hugely appreciated.

redOctober13
  • 3,662
  • 6
  • 34
  • 61
  • I am still figuring this out myself but there is some info [in this answer](http://stackoverflow.com/questions/22586703/how-do-i-setup-the-api-stub-in-an-ember-cli-app) that might help you. – Duncan Walker Sep 02 '14 at 04:21

1 Answers1

23

I'm fairly new to ember/ember-cli as well but I got a simple http-mock prototype working. After generating your http-mock project:

>ember g http-mock project

The generator should have created a 'server' folder within your project with your project.js mock in the 'mocks' subdirectory. If you open up that file (server/mocks/project.js) you should see something like this:

module.exports = function(app) {
  var express = require('express');
  var projectRouter = express.Router();
  projectRouter.get('/', function(req, res) {
    res.send({project:[]});
  });
  app.use('/api/project', projectRouter);
};

You'll want to update the res.send(...) with the json your api should respond with. eg:

res.send({project:{id: 1, number: 123, name: 'Fooshnickins'}});

You can prove to yourself this works by running your server:

>ember server

And curl'ing your api (note the content type):

>curl -H "ContentType:application/json" http://localhost:4200/api/project

Should respond with:

{project:{id: 1, number: 123, name: 'Fooshnickins'}}
GOULETGOULET
  • 451
  • 3
  • 6
  • Awesome, thanks. That does work. And then, do you know what I should do when I finally want to use an actual API? Do I just remove `"APIMethod": "stub"` from package.json and then add the host to the RESTAdapter? – redOctober13 Sep 04 '14 at 14:30
  • You no longer need the "APIMethod: stub" setting in package.json. If your api is "fully implemented" you could add the host to the adapter but if you want to use some mocks and some of your API the intent (I believe) is to use http-proxy. However I don't think it's yet working as intended. I believe you should be able to ">ember g http-proxy projects http://localhost:3000" and it should proxy any localhost:4200/projects requests to localhost:3000/projects but it currently proxies to localhost:3000/ (ignoring the path on the proxy target). – GOULETGOULET Sep 04 '14 at 20:25
  • Just chatted with tstirrat on irc. He provided [this simple fix](https://gist.github.com/tstirrat/7369faef52f6858caa86) for the 0.41 version of the proxy code generated by the http-proxy blueprint. It adds back the path to the request url which is then added to the proxy target. You can't just add the path to the target because it gets chomped by the proxy implementation (currently node-http-proxy). – GOULETGOULET Sep 04 '14 at 21:32
  • i'm having a problem in which if i have a host setting in my rest adapter, the mock will not catch the request, only after I remove the host setting it starts catching. any ideas anyone? – mobetta Sep 15 '14 at 21:03
  • I believe that's how it's intended to work. In development I would recommend using a combination of http-mock and http-proxy to build out your api in which case you wouldn't use the 'host' setting in the adapter but probably the 'namespace' setting. If your production environment requires something different you can configure it 'config/environment.js' and refer to the config in your app. The latest version (0.46) sets the router's location this way. – GOULETGOULET Sep 26 '14 at 01:52