Set up the Instantsearch JS Library
The first step to implement Algolia on the front end using Instantsearch : importing and setting up the library with your credentials. This is what will allow the library to initiate the connection to Algolia servers and the first step to complete before adding some useful widgets.
Instructor: [00:01] Here's our starter project. We have three files, index.html, style.css, and app.js. Index.html will hold our mockup. For the moment, it's basic HTML5 boilerplate that also imports our two other files, style.css and app.js.
[00:22] The style.css file is already completed, as it will not be the focus of this course. It simply holds the CSS rules that will take care of the layout and the custom look and feel of all of our widgets. The last file, app.js, is totally empty for now. It's where most of the fun will happen, where we will be playing with instantsearch and adding widgets.
[00:44] The first step is to import two libraries, algoliasearch, the JavaScript API client, and instantsearch, our front-end widget library. There are a few ways to do it. If you use a build system, npm or Yarn will help you install the packages. Then you can require or import them in your file.
[01:04] Here, we'll keep things simple, no build system. We will load the two libraries via a CDN into our HTML page with two simple script tags. This will expose algoliasearch and instantsearch that we will be using in our app.js file. Last thing to add for the now on this page is the default style for the instantsearch widgets with this link.
[01:26] Now let's head over to our app.js file. We'll create two variables. The first one, named searchClient, will hold the initialized API client. To do so, we need to pass it our application credentials, the app ID and the API key.
[01:43] For the API key, make sure to enter a search on the API key, as this will be visible on the front-end source code. You don't want to expose an API key with write access to your indices.
[01:54] We can now create our second variable that we will simply name search. This will hold the initialized instance of our InstantSearch library where we'll play with widgets. To initialize it, we call the instantsearch function, passing it the indexName we want to target and our previously created searchClient.
[02:15] The last step to finalize the setup of the lib is to call the start method on our search variable. Let's log our search object to check that everything is working fine.
[02:27] Let's open the index file in our browser. Nothing happens, which is totally expected for now. If we open the console tab, we can see our search object logged correctly. If something went wrong, like an invalid API key or a missing parameter, you'll see an error message.
[02:46] Let's remove the app ID to see what that would look like. There you go, a nice error. Let's put it back, and we're all set to start adding widgets.