What is the best way to replace HttpClient in Aurelia?

Question

What is the best way to replace HttpClient in Aurelia?

I am completely new to Aurelia.

How can I modify the code below in order to implement a dummy HttpClient, such as a json reader, that will provide a static set of json data without the need for a server during development?

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class Users {
  heading = 'Sample Users';
  users = [];

  constructor(http) {
    http.configure(config => {
      config
        .useStandardConfiguration()
        .withBaseUrl('https://api.github.com/');
    });

    this.http = http;
  }

  activate() {
    // Instead of fetching real data from 'users', we can change it to fetch static JSON data here
    return Promise.resolve([{ name: 'John Doe', age: 30 }, { name: 'Jane Smith', age: 25 }])
      .then(users => this.users = users);
  }
}

javascript json aurelia

Answer 1

Answer №1

To adapt the demo code in your initial post for substituting HttpClient implementations, there are a few steps to follow.

Step 1

Firstly, remove the configuration code from the class constructor...

The lines to be removed from users.js:

...
http.configure(config => {
  config
    .useStandardConfiguration()
    .withBaseUrl('https://api.github.com/');
});
...

These lines should be relocated to the main.js file:

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  configureContainer(aurelia.container); 

  aurelia.start().then(a => a.setRoot());
}

function configureContainer(container) {
  let http = new HttpClient();
  http.configure(config => {
    config
      .useStandardConfiguration()
      .withBaseUrl('https://api.github.com/');
  });
  container.registerInstance(HttpClient, http);
}

Once this adjustment is made, the contents of users.js should appear as follows:

users.js

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class Users {
  heading = 'Github Users';
  users = [];

  constructor(http) {
    this.http = http;
  }

  activate() {
    return this.http.fetch('users')
      .then(response => response.json())
      .then(users => this.users = users);
  }
}

Step 2:

Create a mock for the HttpClient.

The user.js module relies solely on the fetch method which returns a Response object featuring a json method. Below is a basic mock setup:

let mockUsers = [...todo: create mock user data...];

let httpMock = {
  fetch: url => Promise.resolve({
    json: () => mockUsers
  })
};

Step 3:

Adjust the container to utilize the http mock:

In step 1, we introduced a configureContainer function within the main.js module that registered a configured HttpClient instance into the container. To switch to our mock version, modify the configureContainer function as illustrated below:

main.js

...

let mockUsers = [...todo: create mock user data...];

let httpMock = {
  fetch: url => Promise.resolve({
    json: () => mockUsers
  })
};

function configureContainer(container) {      
  container.registerInstance(HttpClient, httpMock);
}

Further information on configuring the container can be found here: https://github.com/aurelia/dependency-injection/issues/73

Answer 2

To adapt the demo code in your initial post for substituting HttpClient implementations, there are a few steps to follow.

Step 1

Firstly, remove the configuration code from the class constructor...

The lines to be removed from users.js:

...
http.configure(config => {
  config
    .useStandardConfiguration()
    .withBaseUrl('https://api.github.com/');
});
...

These lines should be relocated to the main.js file:

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  configureContainer(aurelia.container); 

  aurelia.start().then(a => a.setRoot());
}

function configureContainer(container) {
  let http = new HttpClient();
  http.configure(config => {
    config
      .useStandardConfiguration()
      .withBaseUrl('https://api.github.com/');
  });
  container.registerInstance(HttpClient, http);
}

Once this adjustment is made, the contents of users.js should appear as follows:

users.js

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class Users {
  heading = 'Github Users';
  users = [];

  constructor(http) {
    this.http = http;
  }

  activate() {
    return this.http.fetch('users')
      .then(response => response.json())
      .then(users => this.users = users);
  }
}

Step 2:

Create a mock for the HttpClient.

The user.js module relies solely on the fetch method which returns a Response object featuring a json method. Below is a basic mock setup:

let mockUsers = [...todo: create mock user data...];

let httpMock = {
  fetch: url => Promise.resolve({
    json: () => mockUsers
  })
};

Step 3:

Adjust the container to utilize the http mock:

In step 1, we introduced a configureContainer function within the main.js module that registered a configured HttpClient instance into the container. To switch to our mock version, modify the configureContainer function as illustrated below:

main.js

...

let mockUsers = [...todo: create mock user data...];

let httpMock = {
  fetch: url => Promise.resolve({
    json: () => mockUsers
  })
};

function configureContainer(container) {      
  container.registerInstance(HttpClient, httpMock);
}

Further information on configuring the container can be found here: https://github.com/aurelia/dependency-injection/issues/73

Answer 3

Answer №2

An alternative approach to providing static data for application development is by utilizing Navigation Skeleton with Gulp and BrowserSync to simulate API calls.

For example, if you are loading JSON data from a virtual directory like /api, you can fake the API call:

GET /api/products

To achieve this, you only need to do two things:

Store mock data in files

Create an /api folder in the root directory of your Aurelia app.

In the /api/products subfolder, create a new file named GET.json containing the desired JSON structure, such as:

GET.json

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

Configure BrowserSync to simulate API calls

Edit the serve.js file located in the /build/tasks folder. Update the serve task definition with 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', '*');

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

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

          var jsonResponse = require('../..' + jsonResponseUri);

          req.url = jsonResponseUri;
          req.method = 'GET';
        }

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

Upon running gulp serve, BrowserSync will emulate the API calls by serving data from static files on disk.

For a practical example, visit my GitHub repository. More insights can be found in my article on Mocking API calls in Aurelia.

Answer 4

An alternative approach to providing static data for application development is by utilizing Navigation Skeleton with Gulp and BrowserSync to simulate API calls.

For example, if you are loading JSON data from a virtual directory like /api, you can fake the API call:

GET /api/products

To achieve this, you only need to do two things:

Store mock data in files

Create an /api folder in the root directory of your Aurelia app.

In the /api/products subfolder, create a new file named GET.json containing the desired JSON structure, such as:

GET.json

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

Configure BrowserSync to simulate API calls

Edit the serve.js file located in the /build/tasks folder. Update the serve task definition with 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', '*');

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

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

          var jsonResponse = require('../..' + jsonResponseUri);

          req.url = jsonResponseUri;
          req.method = 'GET';
        }

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

Upon running gulp serve, BrowserSync will emulate the API calls by serving data from static files on disk.

For a practical example, visit my GitHub repository. More insights can be found in my article on Mocking API calls in Aurelia.

What is the best way to replace HttpClient in Aurelia?

Answer №1

Step 1

Step 2:

Step 3:

Answer №2

Store mock data in files

Configure BrowserSync to simulate API calls

Similar questions

Utilizing Firebase Cloud Messaging for push notifications in Twilio Conversations

Managing and updating arrays in VueJS2: Conditionally push new items and update only if their properties have changed

Validation of 'e' Symbol in Input Type Number Using jQuery Validator

Here is a way to retrieve the name of a ref object stored in an array using Vue.js 3 and Typescript

Maintain component state in a React app when the page is re

A guide on incorporating oAuth 2.0 into Tizen

How to Modify the Data in a Dynamic Object within the Vuex Store in a Nuxt Application

How can I extract values from an array stored in an external text file using Jquery?

JavaScript that Implements MVC Architecture Using C#

Update the network name in the Axios request

How to determine the presence of 'document' in Typecsript and NextJS

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

The latest version of Material UI icons caused compatibility issues with React-Select

Encountering a JS_Parse_Error error while trying to update the TypeScript target to ES6 using aurelia-b

What is the best way to load the nested array attributes in an HTML table dynamically with AngularJS?

document ready function in the Microsoft AJAX client side library

What is the process for loading this image?

Adding a button to a shadow root that already exists is not the proper procedure

Tips for optimizing the processing speed of large XML files using jQuery, Javascript, and PHP

Steps for rearranging the order of CSS grid layout