1 - Overview of adding search to a website

This tutorial builds a website to search through a catalog of books then deploys the website to an Azure Static Web App.

The application is available:

What does the sample do?

This sample website provides access to a catalog of 10,000 books. A user can search the catalog by entering text in the search bar. While the user enters text, the website uses the Search Index's suggest feature to complete the text. Once the query finishes, the list of books is displayed with a portion of the details. A user can select a book to see all the details, stored in the Search Index, of the book.

This sample website provides access to a catalog of 10,000 books. A user can search the catalog by entering text in the search bar. While the user enters text, the website uses the Search Index's suggest feature to complete the text. Once the search finishes, the list of books is displayed with a portion of the details. A user can select a book to see all the details, stored in the Search Index, of the book.

The search experience includes:

  • Search – provides search functionality for the application.
  • Suggest – provides suggestions as the user is typing in the search bar.
  • Document Lookup – looks up a document by ID to retrieve all of its contents for the details page.

How is the sample organized?

The sample includes the following:

App Purpose GitHub
Repository
Location
Client React app (presentation layer) to display books, with search. It calls the Azure Function app. /search-website/src
Server Azure Function app (business layer) - calls the Azure Cognitive Search API using JavaScript SDK /search-website/api
Bulk insert JavaScript file to create the index and add documents to it. /search-website/bulk-insert

Set up your development environment

Install the following for your local development environment.

Fork and clone the search sample with git

Forking the sample repository is critical to be able to deploy the Static Web App. The web apps determine the build actions and deployment content based on your own GitHub fork location. Code execution in the Static Web App is remote, with Azure Static Web Apps reading from the code in your forked sample.

  1. On GitHub, fork the sample repository.

    Complete the fork process in your web browser with your GitHub account. This tutorial uses your fork as part of the deployment to an Azure Static Web App.

  2. At a bash terminal, download the sample application to your local computer.

    Replace YOUR-GITHUB-ALIAS with your GitHub alias.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples
    
  3. In Visual Studio Code, open your local folder of the cloned repository. The remaining tasks are accomplished from Visual Studio Code, unless specified.

Create a resource group for your Azure resources

  1. In Visual Studio Code, open the Activity bar, and select the Azure icon.

  2. In the Side bar, right-click on your Azure subscription under the Resource Groups area and select Create resource group.

    In the Side bar, **right-click on your Azure subscription** under the `Resource Groups` area and select **Create resource group**.

  3. Enter a resource group name, such as cognitive-search-website-tutorial.

  4. Select a location close to you.

  5. When you create the Cognitive Search and Static Web App resources, later in the tutorial, use this resource group.

    Creating a resource group gives you a logical unit to manage the resources, including deleting them when you are finished using them.

Next steps