Ember-cli-mirage not showing any data with get - ember.js

Question

I am learning Ember and I am getting stuck on making the mock api with ember-cli-mirage. I modified the config file as specified in the ember tutorial as well as on the ember-cli-mirage site, but everytime I hit the endpoint I get nothing. Here is my current config file
export default function() {
this.get('/api/users', function() {
return {
users: [
{id: 1, name: 'Zelda'},
{id: 2, name: 'Link'},
{id: 3, name: 'Epona'},
]
}
});
}
Like I said, when I go to /api/users it is just a blank page. Am I missing something here?
Thanks!

Answer 1

First thing first, install Ember inspector extension (for Chrome or Firefox) and look in the browser console to see if Mirage is giving you some errors. If nothing is written in there, you are not hitting the endpoint with your ember application. Basically, Mirage proxies all the request from your ember application.
So you need to generate a user model
ember g model user
and put in there the name attribute.
Create a route and in the model hook write
return this.get('store').findAll('user');
(look at the quick start tutorial if something is not clear)
So now, leveraging Ember Data, your app will request all users hitting on /users.
Now let's start with mirage, generate a mirage model
ember g mirage-model user
and follow the mirage quickstart, just adapt it to your needs :)
Start your application with ember s and you should see the request to /users.
If you want to put your api on the same domain, but with the /api prefix, then i suggest you to read about endpoint path customization

Answer 2

In app/mirage/config.js you can set up mock endpoints for your users:
export default function() {
this.get('/users');
this.post('/users');
this.put('/users/:id');
this.del('/users/:id');
}
You can set up your mock data by configuring fixtures in app/mirage/fixtures/users.js:
export default [
{id: 1, name: 'Zelda'},
{id: 2, name: 'Link'},
{id: 3, name: 'Epona'},
];

Answer 3

Mirage isn't an actual server, so you won't be able to hit the API from your browser directly. It's a mock server that lives in JavaScript memory, and is instantiated when your Ember app boots up.
To test out your mocks, have your Ember app make an API request, e.g.
// routes/application.js
export default Ember.Route.extend({
model() {
return Ember.$.getJSON('/api/users');
}
});
If everything's hooked up correctly, you should now see Mirage handling this request and logging the response data in your console.