Mock backend for Angular / Gulp app

Question

I would like to mock the backend for quicker development by providing json response without reling on the real backend. The frontend app is an Angular app and we use Gulp as a development and build tool.

E.g. have a specific api (.../custumers/123) return a static json result.

Is there perhaps already a gulp tool for this?

Answer 1

I recommend you check out https://github.com/wongatech/angular-multimocks. This allows you to create mock responses for your apis and allows you to switch between them in real time via the url in your app.

We originally created it where I work to solve this exact issue and it is now being used in multiple large tech companies in London.

You define each of your mocks like below, you can create multiple different response for a resource and then arrange them into scenarios. The file mockResources.json defines the available scenarios and describes which version of each resource should be used for each scenario.

Mock example:

{
  "httpMethod": "GET",
  "statusCode": 200,
  "uri": "/customer/cart",
  "response": {
    "id": "foo"
  }
}

Scenario Listing Example:

{
  "_default": [
    "root/_default.json",
    "account/anonymous.json",
    "orders/_default.json"
  ],
  "loggedIn": [
    "account/loggedIn.json"
  ]
}

It allows you to mock different rest verbs, different uris, add delays to responses (for either testing slow responses, or just too give you app a more live like feel).

It's a core part of our development and strongly integrated with our acceptance testing.

Checkout the demo @ http://tech.wonga.com/angular-multimocks, the project readme gives detailed instructions on setup happy to help with any further questions.

Answer 2

I went with json-server and gulp-json-srv which I think had some benefits of simplicity and quick setup.

gulpfile.js config to start json-server and to proxy the http calls using a "gulp mock" task:

gulp.task('mock', ['connect-mock'], function () {
    jsonServer.start({
        data: 'db.json',
        port: 8087
    });
});

gulp.task('connect-mock', function () {
    connect.server({
        port: 8085,
        livereload: true,
        middleware: function (connect, o) {
            return [(function () {
                var url = require('url');
                var proxy = require('proxy-middleware');
                var options = url.parse('http://127.0.0.1:8087');
                options.route = '/v2';
                return proxy(options);
            })()];
        }
    });
});

db.json with mocked data:

{
    "customers": [
        { "id": 1, "name": "Johnny B" },
        { "id": 2, "name": "Steve G" },
        { "id": 3, "name": "Glenn H" }
    ]