Skip to main content

Step 1 - Simple Consumer calling Provider


Move to step 1

git checkout step1

npm install

Learning Objectives

StepTitleConcept CoveredLearning objectivesFurther Reading
step 1Create our consumer before the Provider API even existsConsumer-driven design
  • Understand use case

We need to first create an HTTP client to make the calls to our provider service:

Simple Consumer

The Consumer has implemented the product service client which has the following:

  • GET /products - Retrieve all products
  • GET /products/{id} - Retrieve a single product by ID

The diagram below highlights the interaction for retrieving a product with ID 10:

Sequence Diagram

You can see the client interface we created

in consumer/src/api.js:

export class API {

constructor(url) {
if (url === undefined || url === "") {
url = process.env.REACT_APP_API_BASE_URL;
if (url.endsWith("/")) {
url = url.substr(0, url.length - 1)
this.url = url

withPath(path) {
if (!path.startsWith("/")) {
path = "/" + path
return `${this.url}${path}`

async getAllProducts() {
return axios.get(this.withPath("/products"))
.then(r =>;

async getProduct(id) {
return axios.get(this.withPath("/products/" + id))
.then(r =>;

After forking or cloning the repository, we may want to install the dependencies npm install. We can run the client with npm start --prefix consumer - it should fail with the error below, because the Provider is not running.

Failed step1 page

Move on to step 2