This sample is a React template for Azure Cognitive Search. It leverages the Azure SDK for Javascript/Typescript and Azure Static Web Apps to make it easy to get up and running with a simple web application.

This version of the template is focussed on using semantic search for retail. This repo was derrived from https://github.com/dereklegenzoff/azure-search-react-template.

You can view a similar web application here: https://brave-meadow-0f59c9b1e.1.azurestaticapps.net/

You can easily deploy the sample onto Azure or run it locally by following the steps below.

To run the sample locally, follow the steps below.

• A GitHub account
• Node.js and Git
• Visual Studio Code installed
• The Azure Functions extension installed
• The Azure Functions Core Tools installed

1. Clone (or Fork and Clone) this repository

2. Rename the api/local.settings.json.rename file to api/local.settings.json.

The local.settings.json file holds all of the keys that the application needs.

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "SearchApiKey": "",
    "SearchServiceName": "",
    "SearchIndexName": "",
    "SearchFacets": ""
  }
}

This project can be run anywhere, but VS Code is required for local debugging.

1. Open the application with VS Code.

1. Install front-end dependencies...

   npm install

2. Run the front-end project in the browser (automatically opens a browser window).

   npm start

1. From VS Code, press F5

• A GitHub account
• An Azure subscription

To start off, fork this repo.

Next, you need to create a Static Web App in the Azure portal. Click the button below to create one:

This will walk you through the process of creating the web app and connecting it to your GitHub repo.

After connecting to the repo, you'll be asked to include some build details. Set the Build Presets to React and then leave the other default values:

Once you create the static web app, it will automatically deploy the web app to a URL you can find within the portal.

The last thing you need to do is select configuration and then edit the application settings to add the credentials from local.settings.json. It may take a few minutes for this blade to become available in the portal.

Additional documentation can be found in the docs folder.