3 - Deploy the search-enabled website

Article
11/01/2022
6 minutes to read

Deploy the search-enabled website as an Azure Static Web Apps site. This deployment includes both the React app and the Function app.

The Static Web app pulls the information and files for deployment from GitHub using your fork of the samples repository.

Create a Static Web App in Visual Studio Code

Select Azure from the Activity Bar, then open Resources from the Side bar.
Right-click Static Web Apps and then select Create Static Web App (Advanced).
If you see a pop-up window in VS Code asking which branch you want to deploy from, select the default branch, usually master or main.

This setting means only changes you commit to that branch are deployed to your static web app.
If you see a pop-up window asking you to commit your changes, don't do this. The secrets from the bulk import step shouldn't be committed to the repository.

To roll back the changes, in VS Code select the Source Control icon in the Activity bar, then select each changed file in the Changes list and select the Discard changes icon.

Follow the prompts to provide the following information:

Prompt	Enter
Select a resource group for new resources.	Use the resource group you created for this tutorial.
Enter the name for the new Static Web App.	Create a unique name for your resource. For example, you can prepend your name to the repository name such as, `joansmith-azure-search-dotnet-samples`.
Select a SKU	Select the free SKU for this tutorial.
Select a location for new resources.	Select a region close to you.
Choose build preset to configure default project structure.	Select Custom
Select the location of your application code	`search-website-functions-v4/client` This is the path, from the root of the repository, to your static web app.
Enter the path of your build output...	`build` This is the path, from your static web app, to your generated files.

The resource is created and a notification window appears.

When the resource is created, it creates a GitHub action file on GitHub.
Select Open Actions in GitHub from the Notifications. This opens a browser window pointed to your forked repo.

Wait until the workflow completes before continuing. This may take a minute or two to finish.
Pull the new GitHub action file to your local computer by synchronizing your local fork with your remote fork:
```
git pull origin main
```
- origin refers to your forked repo.
- main refers to the default branch.

In Visual Studio file explorer, find and open the workflow file in the ./.github/workflows/ directory. The file path and name looks something .github\workflows\azure-static-web-apps-lemon-mushroom-0e1bd060f.yml.

The part of the YAML file relevant to the static web app is shown below:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RANDOM_WORDS_1234 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "search-website-functions-v4/client" # App source code path
          api_location: "search-website-functions-v4/api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RANDOM_WORDS_1234 }}
          action: "close"

Edit your action file to contain the api_location property. If your local file doesn't have the property, add it below the app_location property.
```
api_location: "search-website-functions-v4/api"
```

Commit changes to your local repository.

git add *.yml && git commit -m "update action for static web app"

Push changes to GitHub.
```
git push origin main 
```
The updated action in your remote fork creates a new build and deploy to your static web app. Wait until the workflow completes before continuing. This may take a minute or two to finish.

Get Cognitive Search query key in Visual Studio Code

In Visual Studio Code, open the Activity bar, and select the Azure icon.
In the Side bar, select your Azure subscription under the Azure: Cognitive Search area, then right-click on your Search resource and select Copy Query Key.
Keep this query key, you'll need to use it in the next section. The query key is able to query your Index.

Add configuration settings in Azure portal

The Azure Function app won't return Search data until the Search secrets are in settings.

Select Azure from the Activity Bar.
Right-click on your Static Web Apps resource then select Open in Portal.
Select Configuration then select + Add.
Add each of the following settings:

Setting Your Search resource value

SearchApiKey Your Search query key

SearchServiceName Your Search resource name

SearchIndexName good-books

SearchFacets authors*,language_code

Azure Cognitive Search requires different syntax for filtering collections than it does for strings. Add a * after a field name to denote that the field is of type Collection(Edm.String). This allows the Azure Function to add filters correctly to queries.
Select Save to save the settings.
Return to VS Code.
Refresh your static web app to see the application settings.

Setting	Your Search resource value
SearchApiKey	Your Search query key
SearchServiceName	Your Search resource name
SearchIndexName	`good-books`
SearchFacets	`authors*,language_code`

Use search in your static web app

In Visual Studio Code, open the Activity bar, and select the Azure icon.
In the Side bar, right-click on your Azure subscription under the Static Web Apps area and find the static web app you created for this tutorial.
Right-click the static web app name and select Browse site.
Select Open in the pop-up dialog.
In the website search bar, enter a search query such as code, so the suggest feature suggests book titles. Select a suggestion or continue entering your own query. Press enter when you've completed your search query.
Review the results then select one of the books to see more details.

Troubleshooting

If the web app didn't deploy or work, use the following list to determine and fix the issue:

Did the deployment succeed?

In order to determine if your deployment succeeded, you need to go to your fork of the sample repo and review the success or failure of the GitHub action. There should be only 1 action and it should have static web app settings for the app_location, api_location, and output_location. If the action didn't deploy successfully, dive into the action logs and look for the last failure.
Does the client (front-end) application work?

You should be able to get to your web app and it should successfully display. If the deployment succeeded but the website doesn't display, this may be an issue with how the static web app is configured for rebuilding the app, once it is on Azure.
Does the API (serverless back-end) application work?

You should be able to interact with the client app, searching for books and filtering. If the form doesn't return any values, open the browser's developer tools, and determine if the HTTP calls to the API were successful. If the calls weren't successful, the most likely reason if the static web app configurations for the API endpoint name and Search query key are incorrect.

Clean up resources

To clean up the resources created in this tutorial, delete the resource group.

In Visual Studio Code, open the Activity bar, and select the Azure icon.
In the Side bar, right-click on your Azure subscription under the Resource Groups area and find the resource group you created for this tutorial.
Right-click the resource group name then select Delete. This deletes both the Search and Static Web Apps resources.
If you no longer want the GitHub fork of the sample, remember to delete that on GitHub. Go to your fork's Settings then delete the fork.

Next steps

Understand Search integration for the search-enabled website