How do you substitute HttpClient in Aurelia?

Question

I\'m brand new to Aurelia.

How would you change the following code to provide a dummy HttpClient, e.g. a json reader instead that would provide just a static set of

Answer 1

There is another possibility to provide static data for the application during development. Navigation Skeleton already comes with Gulp and BrowserSync, so we used those to fake API calls.

Let's say you load JSON data from /api virtual directory, so e.g.

GET /api/products

In this case your just need two things to fake it.

Put your mock data into files

Go to the root folder of your Aurelia app and create an /api folder.

Create a /api/products subfolder and put a new file called GET.json. This file should contain the JSON, e.g.

GET.json

[ { "id": 1, "name": "Keyboard", "price": "60$" },
  { "id": 2, "name": "Mouse", "price": "20$" },
  { "id": 3, "name": "Headphones", "price": "80$" }
]

Configure BrowserSync to mock your API calls

Navigate to /build/tasks folder and edit the serve.js file. Change the definition of serve task to the following code:

gulp.task('serve', ['build'], function(done) {
  browserSync({
    online: false,
    open: false,
    port: 9000,
    server: {
      baseDir: ['.'],
      middleware: function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');

        // Mock API calls
        if (req.url.indexOf('/api/') > -1) {
          console.log('[serve] responding ' + req.method + ' ' + req.originalUrl);

          var jsonResponseUri = req._parsedUrl.pathname + '/' + req.method + '.json';

          // Require file for logging purpose, if not found require will 
          // throw an exception and middleware will cancel the retrieve action
          var jsonResponse = require('../..' + jsonResponseUri);

          // Replace the original call with retrieving json file as reply
          req.url = jsonResponseUri;
          req.method = 'GET';
        }

        next();
      }
    }
  }, done);
});

Now, when your run gulp serve, BrowserSync will be handling your API calls and serving them from the static files on disk.

You can see an example in my github repo and more description in my Mocking API calls in Aurelia.