Step 1 - Overview of adding search to a static web app with .NET
Article
This tutorial builds a website to search through a catalog of books and then deploys the website to an Azure static web app.
What does the sample do?
This sample website provides access to a catalog of 10,000 books. You can search the catalog by entering text in the search bar. While you enter text, the website uses the search index's suggestion feature to autocomplete the text. Once the query finishes, the list of books is displayed with a portion of the details. You 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.
Facets and filters - provides a faceted navigation structure that filters by author or language.
Paginated results - provides paging controls for scrolling through results.
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 code includes the following components:
App
Purpose
GitHub Repository Location
client
React app (presentation layer) to display books, with search. It calls the Azure Function app.
This tutorial doesn't run the Azure Function API locally but if you intend to run it locally, install azure-functions-core-tools.
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.
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.
At a Bash terminal, download your forked sample application to your local computer.
At the same Bash terminal, go into your forked repository for this website search example:
Bash
cd azure-search-static-web-app
Use the Visual Studio Code command, code . to open your forked repository. The remaining tasks are accomplished from Visual Studio Code, unless specified.
Build end-to-end solutions in Microsoft Azure to create Azure Functions, implement and manage web apps, develop solutions utilizing Azure storage, and more.
Learn how to create, load, and query your first search index by using the Import Data wizard in the Azure portal. This quickstart uses a fictitious hotel dataset for sample data.
Run the Create demo app wizard to generate HTML pages and script for an operational web app. The page includes a search bar, results area, sidebar, and typeahead support.
Use C# and the Azure SDK for .NET to create skillsets. This skillset applies AI transformations and analyses to create searchable content from images and unstructured text.