Using Grunt to Mock Endpoints

Question

I'm using Yeoman, Grunt, and Bower, to construct a platform for building a frontend independently of a a backend. The idea would be that all of my (AngularJS) controller, services, factories, etc live in this project, and get injected afterwards into my serverside codebase based off the result of grunt build.

My question is:

How can I mock endpoints so that the Grunt server responds to the same endpoints as my (Rails) App will?

At the moment I am using:

 angular.module('myApp', ['ngResource'])

 .run(['$rootScope', function ($rootScope) {
     $rootScope.testState = 'test';
  }]);

And then in each of my individual services:

   mockJSON = {'foo': 'myMockJSON'}

And on every method:

   if($rootScope.testState == 'test'){
    return mockJSON;
  }
  else {
    real service logic with $q/$http goes here
  }

Then after grunt build, testState = 'test' gets removed.

This is clearly a relatively janky architecture. How can I avoid it? How can I have Grunt respond to the same endpoints as my app (some of which have dynamic params) apply some logic (if necessary), and serve out a json file (possibly dependent on path params)?

Answer 1

I've fixed this issue by using express to write a server that responds with static json.

First I created a directory in my project called 'api'. Within that directory I have the following files:

package.json:

   {
     "name": "mockAPI",
     "version": "0.0.0",
     "dependencies": {
        "express": "~3.3.4"
      }
   }

Then I run npm install in this directory.

index.js:

    module.exports = require('./lib/server');

lib/server.js:

    express = require('express');
    var app = express();

    app.get('/my/endpoint', function(req, res){
        res.json({'foo': 'myMockJSON'});
   });

    module.exports = app

and finally in my global Gruntfile.js:

         connect: {
            options: {
               port: 9000,
               hostname: 'localhost',
            },
            livereload: {
              options: {
                 middleware: function (connect, options) {
                   return [
                     lrSnippet,
                     mountFolder(connect, '.tmp'),
                     mountFolder(connect, yeomanConfig.app),
                     require('./api')
                   ];
               }
            }
         },

Then the services make the requests, and the express server serves the correct JSON.

After grunt build, the express server is simply replaced by a rails server.