Mocking a REST API Back-End for Your Angular App with JSON-Server and Faker.js

In this tutorial, we’ll learn, with a quick example, how to mock a REST API back-end for your Angular 8 application which you can consume using Angular HttpClient even before your real back-end is ready.

We'll use two powerful open source packages, json-server and faker.js and we assume that you have an Angular project ready.

Please note that both json-server and faker.js are framework agnostic i.e you can use them with any JavaScript framework such as Vue.js or React but in this example we'll use them in the context of an Angular project.

Why Mocking a REST API Back-End?

More often than not, modern web development involves multiple developers working in separate front-end and back-end applications. This approach has many advantages, such as the separation of concerns but also introduces a few challenges such as the difficulties in coordination between the front-end and back-end developers. Here comes the role of tools such as JSON-Server to ease these difficulties. As a front-end developer, JSON-Server is such a great tool that allows you to spin up a REST API server with a fully-working API with zero coding.

Read this tutorial for a real REST API example. But, as far as Angular concerned, there is no difference between consuming a mocked or real REST API.

How to Mock A REST API Back-End?

Let's now see how to mock a RESTful API back-end using json-server.

Go to a new terminal, navigate to your Angular project and install json-server from npm:

$ cd ~/angular-example
$ npm install --save json-server

Next, create a database.json file inside a server folder with the following object:

{    
    "products": []
}

We need to add data to this file that will be returned from our REST API endpoints. We can use Faker.js for automatically generating big amounts of data that looks realistic.

Head over to your terminal, go to the root of your Angular project, and install Faker.js from npm:

$ cd ..
$ npm install faker --save

Now, create a generateData.js file and add the following code:

var faker = require('faker');

var database = { products: []};

for (var i = 1; i<= 300; i++) {
  database.products.push({
    id: i,
    name: faker.commerce.productName(),
    description: faker.lorem.sentences(),
    price: faker.commerce.price(),
    imageUrl: "https://source.unsplash.com/1600x900/?product",
    quantity: faker.random.number()
  });
}

console.log(JSON.stringify(database));

Next, add the generateData and runServer scripts to the package.json file:

{
  "name": "angulardemo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate": "node ./server/generate.js > ./server/database.json",
    "server": "json-server --watch ./server/database.json"
  },

Next, go to your terminal and let’s create some data for our REST API:

$ npm run generateData

Finally, run the REST API server using:

$ npm run runServer

Your REST API server will be available from the [http://localhost:3000/](http://localhost:3000/) address.

These are the available API endpoints that we ca consume using Angular HttpClient:

  • GET /products for getting the products,
  • GET /products/<id> for getting a single product by id,
  • POST /products for creating a new product,
  • PUT /products/<id> for updating a product by id,
  • PATCH /products/<id> for partially updating a product by id,
  • DELETE /products/<id> for deleting a product by id.

You can make use of the _page and _limit parameters to retrieve pages of data. In the Link header of the HTTP response you'll have the first, prev, next and last links.

Conclusion

Thanks to json-server you can boost your productivity when developing your Angular front-end without waiting for the back-end features to be ready. Since json-server is based on Express.js, it's even possible to add advanced features to your mocked back-end such as authentication and route protection. Check out this tutorial for an example with authentication or also this npm package.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status