Creating a Fake API with Hapi For Your Client-Side Application

[00:00] When developing client-side applications, you may find yourself in a situation where the endpoint or the API hasn't been completed yet. HAPI dummy API was created for this exact reason, and it enables you to create client-side applications before the real API is done.

[00:15] In this lesson, I'm going to show you how to query an API and return some fake data, to allow you to continue creating your client-side application. Using npm, let's install HAPI dummy API plus its dependency of HAPI.

[00:27] Within an API directory, let's create a new file called server.js for all our server configuration setup. Import HAPI, and once HAPI's imported, import the HAPI dummy API. Then we need to create a new server object using new Hapi.server.

[00:44] Let's create our first server connection. We use the connection method on the server instance, and provide an object which will have some simple configuration options. Initially, we'll just provide a port of the value of 8,000.

[00:57] Next, we need to register our dummy plugin using the Register method. Register method accepts an argument of an array, which are all the plugins that we want to register, and second, a callback. That callback will provide an error if there is one, and if there is, then we're just going to throw an error for the moment.

[01:12] If there isn't, we can proceed to actually start the server. Using the start method, it also accepts a callback. That callback will also provide an error as above. If there is an error, then we'll throw an error once again. If there isn't, then we'll just use a console log to show that the server has actually started.

[01:27] If you go to the command line now just for clarification purposes and run node api/server.js, you'll see server running a local host is outputted. Excellent. Next, we need some data. Being a superhero fan, I've actually copied a load of data for the Marvel API. Which I've put as a js, which you can actually clone using the following URL.

[01:45] We'll clone this into an API options directory, and the file will be called superheroes.js. If we look at that file now, you see that there's an array of data of superhero names and ID. If you scroll to the bottom of this file, you'll see two key values.

[01:59] We've got root URL, which is the RESTful resource URL, and then ID property, to access an individual resource by its ID. Now, we have all our data. We can go ahead and register it in Register method.

[02:11] In the empty array, we add an object, and we need to register the dummy API first. Secondly, we need to then provide a configuration options. Those options are provided within this external superheroes js file that I provided, and we can simply require that.

[02:25] Let's test this fake data API. Create an index.html file, and require jQuery. Using the jQuery shorthand method getJSON, we can load our JSON data from our fake API. We just simply need to provide the URL that we've defined within our superheroes js file, and then a callback function expecting the data.

[02:45] We're just [inaudible] the data out, and then we'll open up index html in the browser. If you actually want to see some data, start the server first. Because we're running this from a local file, we're going to see some Cross-Origin issues.

[03:00] The main thing here is the CORS header is saying that the Access-Control-Allow-Origin is missing. This is usually solved with HAPI js. So we need to go back to the server.js file, to the configuration connection object, and we need to provide two objects.

[03:14] One is Roots, and within that, we have a CORS object. For the CORS object, we add additional headers which the server will provide when we run this resource. We just need to add the Access-Control-Allow-Origin.

[03:28] On restarting the server, we notice that there's an array of objects being returned, which are our superheroes. Perfect. If we'd actually go back to our superheroes.js file, you'll remember there was an ID property that we provided.

[03:40] If we just copy this 1482, which would return a zombie, go back into our browser, type in localhost port 8,000 API superheroes and provide the ID of 1482, it should return a zombie object. Which it does.