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

Enhance the speed of my Tumblr page by using JavaScript for personalized styling tweaks

Failing to include a valid string in the path will result in an

Ways to enlarge the parent container and reveal a concealed child element upon hovering without impacting neighboring containers

Repeated tweets detected within real-time Twitter stream

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

"Encountering a problem with a function showing an undefined error

When converting to .glb format, the material becomes invisible unlike in .gltf files

Having trouble with importing files from a different folder in a React Typescript project

Looking for nested objects within an array in JavaScript

Comparing SHA and Python hashlib outputs show discrepancies with identical inputs

Having an issue with button onClick functionality not working in Javascript

Apply a class to each element that contains the specified name attribute

The $http function would refresh and store new data in localStorage on a weekly

Are the elements in the second array the result of squaring each element in the first array? (CODEWARS)

Is it possible to implement a single lightbox modal that can display multiple images?

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

Launching the node application using `node` as the starting command is successful, however, using `/usr/bin/node` as the starting

Get the Vue.js package from Node.js by downloading the zip file

Issue with resetting the state of a react-select component remains unresolved

Obtain a string in JSON format upon clicking in Angular 2