Grunt Connect Prism Mock Server not recording requests

Question

My goals is to use grunt-connect-prism (as described here) to catch server requests from my AngularJS app to then use as mock data for protractor E2E tests.

Alternatively, I'm looking for suggestions for better server mock data libraries for Grunt.

This project is still in its infancy, however I thought I'd post my issue anyways: I can't get the mock data saving. When I start my grunt server, I can see the prism running, but it still doesn't save. I read from the comments in the authors post that people were trying to run the 'context' variable as the root which is where my server api runs from. So I tried only recording from the /campaigns endpoint, but with no luck.

$ grunt server

Running "server" task

...

Running "prism" task Prism created for: /campaigns/ to localhost:8888

...

Help!?!?

// Gruntfile.js

grunt.initConfig({
  connect: {
    server: {
      options: {
        keepalive: true,
        hostname: '*',
        port: 8888,
        base: '.tmp',

        middleware: function(connect, options) {
          return [
            require('grunt-connect-prism/middleware'), // will

            modRewrite(['!\\.?(js|css|html|eot|svg|ttf|woff|otf|css|png|jpg|gif|ico) / [L]']),
            mountFolder(connect, '.tmp'),
          ];
        }
      }
    }
  },

  prism: {
    options: {
      mode: 'record',
      mocksPath: './mocks',        
      // server
      host: 'localhost',
      port: 8888,
      https: false,
      // client
      context: '/campaigns/',
    }
  },

  // more stuff I removed

});    

// development
grunt.registerTask('server', function() {
  grunt.task.run([
    'stuff ...'
    'prism',
    'stuff ...',
  ]);
});        

// more stuff I removed

grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-connect-prism');

Answer 1

Solved my problem: first of all, I needed to whitelist another port in my Vagrant file...

Secondly I needed to start another grunt connect server to act as a proxy for my serverside calls to run through, separate from my clientside which runs on a different port.

Thirdly, I needed to add Access-Control headers to the server side proxy

// Adding the middleware
connect: {
  // clientside server
  server: {
    options: {
      keepalive: true,
      hostname: '*',
      port: 8888,
      base: 'public/',
      middleware: function(connect, options) {
        return [
          // ... dish static files
        ]
      }
    }
  },

  // serverside proxy
  proxy: {
    options: {
      hostname: '*',
      port: 9000,
      middleware: function(connect, options, middlewares) {
        middlewares.unshift(require('grunt-connect-prism/middleware'));

            // add REST stuff
            middlewares.unshift(function (req, res, next) {
              console.log('proxy', req.url);

              res.setHeader('Access-Control-Allow-Credentials', 'true');
              res.setHeader('Access-Control-Allow-Headers', 'accept, x-version, content-type, authorization');
              res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
              res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');
              res.setHeader('Access-Control-Expose-Headers', 'X-Version, X-Maintenance-Mode');
              res.setHeader('Access-Control-Max-Age', '1728000');

              next();      
            });
        return middlewares;
      }
    }
  }
},

// Adding prism configuration.
prism: {
  options: {
    mode: 'record',
    mocksPath: 'mocks',
    host: 'localhost',
    port: 3000,
    https: false,
    context: '/',
  }
},

// Running prism
grunt.registerTask('server', [
// ...

'connect:proxy', // proxy server that will log calls to mock
'prism:proxy', // initiates prism library
'connect:server' // client connect server to dish out client files
]);