hey @david9922, using mirage in a deployed app would work fine if it fits your needs. Weâve actually considered using it as a demo version of our app so customers could play around with it. If you wanted to do this youâll need to set up a few things. Mirage is enabled by default in the development environment, but if youâre going to deploy it with the production builds youâd want to enable mirage in your production environment too.
// config/environment.js
...
if (environment === 'production') {
// enable mirage
ENV['ember-cli-mirage'].enabled = true;
..
}
...
Essentially what youâre doing is loading fixture data. Mirage is still a great choice for this, for a number of reasons, but depending on how complex your data needs, it may be overkill. The real power of mirage comes from easily generating or mocking lots of data, and being able to query it in various ways just like a backend server.
If you want to set up Mirage the quick and dirty way to accomplish what you want Iâd try something like this:
1. Set up a mirage model for âprojectâ (note that currently this is different from your ember data model). I donât even think you need to fill out any attributes in your mirage model:
// mirage/models/project.js
import { Model } from 'ember-cli-mirage';
export default Model.extend({
});
2. Edit your scenario to create the fixtures. Your mirage scenario is, more or less, where you put your mirage database setup code when NOT in testing mode (aka running in development environment). In your mirage/scenarios/default.js you can create some fixture data like this:
// mirage/scenarios/default.js
export default function( server ) {
// create some projects
var project1 = server.create('project', { id:'p1', image:"project1.jpg", description:"project 1 description"});
var project2 = server.create('project', { id:'p2', image:"project2.jpg", description:"project 2 description"});
}
3. If your data looks like what you already posted, you may want to make a mirage factory for the âprojectâ model:
// mirage/factories/project.js
import Mirage, {faker} from 'ember-cli-mirage';
export default Mirage.Factory.extend({
// mirage automatically passed the index of the model in, so you can use it to generate ids and such
id(i){return 'p'+i;},
image(i){return `project${i}.jpg`;},
description(i){return "project " + i + " description";},
// you can define static strings as well
// extra: "static string",
// you can also generate fake data like this:
// firstName: faker.name.firstName, // using faker
// lastName: faker.name.firstName,
// zipCode: faker.address.zipCode
});
and then in your scenario you can do this instead:
// mirage/scenarios/default.js
export default function( server ) {
// create the same two projects as the example above, but with one line, and you can make any amount by changing the number
var projects = server.createList('project', 2);
// you can also specify some data here, and the rest in the factory:
var projects = server.createList('project', 4, {category: "technical"}); // all four of these will have category attribute with "technical" value
}
4. Finally, in your mirage config, you can just use the shortcut definitions instead of having to do the longform ones like you were:
// mirage/config.js
...
this.get('/projects'); // returns all projects in the mirage database
this.get('/projects/:id'); // returns a specific project with the given id
...
Anyway, hope that helps. Let me know if you have any more mirage related questions and I may just be able to answer them.
