Welcome to weblogs.com.pk Sign in | Join | Help

Getting Started with Ember-CLI-Mirage

In the previous post; Getting Started with Ember-CLI; we got introduced to Mirage; a client side mock server for development. Lets use it bit further; it has factories; collection of js files that gets called in the config.js; there is a sample contact.js factory, that we can use for our model. It also comes with faker JS library that we can use to generate fake data. Lets implement invoice factory for our model like so. To “seed” data into the Mirage in memory database; we need to add the code in scenarios\default.js. Using the server variable that gets passed we invoke the factory number of times specified as a parameter. In my example I am calling it five times.

image

If you note carefully; we need to return the JSON data from Mirage using data { id, type, attributes {} } pattern. We can do that in the mirage\config.js file. I am also specifying the namespace and adding 1sec delay for API calls that Mirage will simulate. We use setting the namespace when the server side developer tells the front end developer URL of its backend API. Having version numbers in the URL is recommended convention. By default Ember calls our api with same url as our route; we need to add api/v1 prefix and for this we need to customize the adapter. Given the default adapter JS doesn't exist yet, we can create it using Ember CLI with >ember generate adapter application command like so and customize it accordingly

image

  • Note how we have replaced the hard coded data with function(db, request) to use Mirage in memory database. We can access the factory using the db parameter
  • Note how we are creating the return data type using the map() according to the JSONAPI format that Ember expects by default. We already have customized the serializer in the previous post for camel cased attributes
Published Tuesday, March 01, 2016 10:09 PM by khurram
Filed under: ,

Comments

No Comments

New Comments to this post are disabled