You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/search/includes/tutorial-add-search-website-create-app.md
+11-9Lines changed: 11 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,20 +1,20 @@
1
1
---
2
2
ms.topic: include
3
-
ms.date: 09/21/2023
3
+
ms.date: 04/25/2024
4
4
author: HeidiSteen
5
5
ms.author: heidist
6
6
ms.service: cognitive-search
7
7
ms.custom:
8
8
- ignite-2023
9
9
---
10
10
11
-
Deploy the search-enabled website as an Azure Static Web Apps site. This deployment includes both the React app and the Function app.
11
+
Deploy the search-enabled website as an Azure Static Web Apps site. This deployment includes both the React app for the web pages, and the Function app for search operations.
12
12
13
13
The static web app pulls the information and files for deployment from GitHub using your fork of the samples repository.
14
14
15
15
## Create a Static Web App in Visual Studio Code
16
16
17
-
1. In Visual Studio Code, open a folder at the repository root (for example, `azure-search-javascript-samples`).
17
+
1. In Visual Studio Code, make sure you're at the repository root, and not the bulk-insert folder (for example, `azure-search-javascript-samples`).
18
18
19
19
1. Select **Azure** from the Activity Bar, then open **Resources** from the side bar.
20
20
@@ -40,7 +40,7 @@ The static web app pulls the information and files for deployment from GitHub us
40
40
|Select a location for new resources. | For Node.js: Select `West US 2` during the Azure Function programming model (PM) v4 preview. For C# and Python, select a region near you. |
|Select the location of your client application code |`search-website-functions-v4/client`<br><br>This is the path, from the root of the repository, to your static web app. |
43
-
|Select the location of your Azure Functions code |`search-website-functions-v4/api`<br><br>This is the path, from the root of the repository, to your static web app. If there are no other functions in the repository, you won't be prompted for the function code location. Currently, you'll need to perform extra steps to ensure the function code location is correct. These steps are performed after the resource is created and are documented in this article. |
43
+
|Select the location of your Azure Functions code |`search-website-functions-v4/api`<br><br>This is the path, from the root of the repository, to your static web app. If there are no other functions in the repository, you won't be prompted for the function code location. *Currently, you'll need to perform extra steps to ensure the function code location is correct. These steps are performed after the resource is created and are documented in this article.*|
44
44
|Enter the path of your build output... |`build`<br><br>This is the path, from your static web app, to your generated files.|
45
45
46
46
If you get an error about an incorrect region, make sure the resource group and static web app resource are in one of the supported regions listed in the error response.
@@ -55,7 +55,7 @@ The static web app pulls the information and files for deployment from GitHub us
55
55
56
56
:::image type="content" source="../media/tutorial-javascript-static-web-app/visual-studio-code-azure-activity-log.png" alt-text="Screenshot of the Activity Log in Visual Studio Code." border="true":::
57
57
58
-
1. Currently, the YML file is created with erroneous path syntax for the Azure function code. Use this workaround to correct the syntax. You can perform this step as soon as the YML file is created. A new workflow will launch as soon as you push the updates:
58
+
1.*Currently, the YML file is created with erroneous path syntax for the Azure function code*. Use this workaround to correct the syntax and rerun the workflow. You can perform this step as soon as the YML file is created. A new workflow launches as soon as you push the updates:
59
59
60
60
1. In Visual Studio Code explorer, open the `./.github/workflows/` directory.
61
61
@@ -113,7 +113,7 @@ The static web app pulls the information and files for deployment from GitHub us
113
113
114
114
1. Keep this query key to use in the next section. The query key authorizes read access to a search index.
115
115
116
-
## Add configuration settings in Azure portal
116
+
## Add environment variables in Azure portal
117
117
118
118
The Azure Function app won't return search data until the search secrets are in settings.
119
119
@@ -122,9 +122,9 @@ The Azure Function app won't return search data until the search secrets are in
122
122
123
123
:::image type="content" source="../media/tutorial-javascript-static-web-app/open-static-web-app-in-azure-portal.png" alt-text="Screenshot of Visual Studio Code showing Azure Static Web Apps explorer with the Open in Portal option shown.":::
124
124
125
-
1. Select **Configuration** then select **+ Add**.
125
+
1. Select **Environment variables** then select **+ Add application setting**.
126
126
127
-
:::image type="content" source="../media/tutorial-javascript-static-web-app/add-new-application-setting-to-static-web-app-in-portal.png" alt-text="Screenshot of Visual Studio Code showing the Azure Static Web Apps explorer with the Configuration option shown.":::
127
+
:::image type="content" source="../media/tutorial-javascript-static-web-app/add-new-application-setting-to-static-web-app-in-portal.png" alt-text="Screenshot of the static web app's environment variables page in the Azure portal.":::
128
128
129
129
1. Add each of the following settings:
130
130
@@ -137,7 +137,7 @@ The Azure Function app won't return search data until the search secrets are in
137
137
138
138
Azure AI 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.
139
139
140
-
1. Select **Save** to save the settings.
140
+
1. Check your settings to make sure they look like the following screenshot.
141
141
142
142
:::image type="content" source="../media/tutorial-javascript-static-web-app/save-new-application-setting-to-static-web-app-in-portal.png" alt-text="Screenshot of browser showing Azure portal with the button to save the settings for your app.":::
143
143
@@ -147,6 +147,8 @@ The Azure Function app won't return search data until the search secrets are in
147
147
148
148
:::image type="content" source="../media/tutorial-javascript-static-web-app/visual-studio-code-extension-fresh-resource-2.png" alt-text="Screenshot of Visual Studio Code showing the Azure Static Web Apps explorer with the new application settings." border="true":::
149
149
150
+
If you don't see the application settings, revisit the steps for updating and relaunching the GitHub workflow.
151
+
150
152
## Use search in your static web app
151
153
152
154
1. In Visual Studio Code, open the [Activity bar](https://code.visualstudio.com/docs/getstarted/userinterface), and select the Azure icon.
0 commit comments