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/static-apps/app-settings.md
+25-18Lines changed: 25 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Configure environment variables for Azure Static Web Apps
2
+
title: Configure application settings for Azure Static Web Apps
3
3
description: #Required; article description that is displayed in search results.
4
4
services: static-web-apps
5
5
author: burkeholland
@@ -9,31 +9,36 @@ ms.date: 05/08/2020
9
9
ms.author: buhollan
10
10
---
11
11
12
-
# Configure environment variables for Azure Static Web Apps
12
+
# Configure application settings for Azure Static Web Apps
13
13
14
-
Environment variables hold configuration settings for values that may change, such as database connection strings. Adding environment variables allows you to modify the configuration input to your app, without having to change application code.
14
+
Application settings hold configuration settings for values that may change, such as database connection strings. Adding application settings allows you to modify the configuration input to your app, without having to change application code.
15
15
16
-
Environment variables are:
16
+
Application settings are:
17
17
18
18
- Encrypted at rest
19
19
- Copied to [staging](review-publish-pull-requests.md) and production environments
20
20
21
-
Environment variables are also sometimes referred to as application settings.
21
+
Application settings are also sometimes referred to as environment variables.
22
+
23
+
> [!IMPORTANT]
24
+
> The application settings described in this article only apply to the backend API of an Azure Static Web App.
25
+
>
26
+
> For information on using environment variables with your frontend web application, see the docs for your [JavaScript framework](#javascript-frameworks-and-libraries) or [Static site generator](#static-site-generators).
There are typically two aspects to an Azure Static Web Apps application. The first is the web application, or static content, which is represented by HTML, CSS, JavaScript, and images. The second is the back-end API, which is powered by an Azure Functions application.
31
36
32
-
This article demonstrates how to manage environment variables for the back-end API in Azure Functions.
37
+
This article demonstrates how to manage application settings for the back-end API in Azure Functions.
33
38
34
-
Many front-end frameworks and static site generators allow the use of environment variables during development. At build time, these variables are replaced by their values in the generated HTML or JavaScript. Since data in HTML and JavaScript is easily discoverable by site visitor, you want to avoid putting sensitive information in the front-end application. Settings that hold sensitive data are best located in API app.
39
+
The application settings described in this article cannot be used or referenced in static web applications. However, many front-end frameworks and static site generators allow the use of environment variables during development. At build time, these variables are replaced by their values in the generated HTML or JavaScript. Since data in HTML and JavaScript is easily discoverable by site visitor, you want to avoid putting sensitive information in the front-end application. Settings that hold sensitive data are best located in the API portion of your application.
35
40
36
-
For more information about how to use environment variables with your JavaScript framework or library, refer to the following articles for more detail.
41
+
For information about how to use environment variables with your JavaScript framework or library, refer to the following articles for more detail.
37
42
38
43
### JavaScript frameworks and libraries
39
44
@@ -48,9 +53,9 @@ For more information about how to use environment variables with your JavaScript
APIs in Azure Static Web Apps are powered by Azure Functions, which allows you to define environment variables in the _local.settings.json_ file. This file defines environment variables in the `Values` property of the configuration.
58
+
APIs in Azure Static Web Apps are powered by Azure Functions, which allows you to define application settings in the _local.settings.json_ file. This file defines application settings in the `Values` property of the configuration.
54
59
55
60
The following sample _local.settings.json_ shows how to add a value for the `DATABASE_CONNECTION_STRING`.
56
61
@@ -75,9 +80,9 @@ The `local.settings.json` file is not tracked by the GitHub repository because s
75
80
76
81
Generally, uploading your settings is done infrequently, and isn't required with every build.
77
82
78
-
## Upload settings
83
+
## Uploading App settings
79
84
80
-
You can upload settings via the Azure Portal or with the Azure CLI.
85
+
You can configure application settings via the Azure Portal or with the Azure CLI.
81
86
82
87
### Using the Azure Portal
83
88
@@ -89,17 +94,19 @@ The Azure Portal provides an interface for creating, updating and deleting App S
89
94
90
95
1. Click on the **Configuration** option in the sidebar.
91
96
97
+
1. Select the environment that you want to apply the application settings to. Staging environments are automatically created when a pull request is generated, and are promoted into production once the pull request is merged. You can set application settings per environment.
98
+
92
99
1. Click on the **Add Button** to add a new app setting.
93
100
94
-
:::image type="content" source="media/environment-variables/configuration-env-variables.png" alt-text="Azure Static Web Apps configuration view":::
101
+
:::image type="content" source="media/app-settings/configuration-app-settings.png" alt-text="Azure Static Web Apps configuration view":::
95
102
96
103
1. Enter a **Name** and **Value**
97
104
98
105
1. Click **OK**
99
106
100
107
### Using the Azure CLI
101
108
102
-
You can use the `az rest` command to do bulk uploads of your settings to Azure. The command accepts environment variables as JSON objects in a parent property called `properties`.
109
+
You can use the `az rest` command to do bulk uploads of your settings to Azure. The command accepts application settings as JSON objects in a parent property called `properties`.
103
110
104
111
The easiest way to create a JSON file with the appropriate values is to create a modified version of your _local.settings.json_ file.
105
112
@@ -111,7 +118,7 @@ The easiest way to create a JSON file with the appropriate values is to create a
111
118
112
119
2. Next, make a copy of your _local.settings.json_ file and name it _local.settings.properties.json_.
113
120
114
-
3. Inside the new file, remove all other data from the file except for the environment variables and rename `Values` to `properties`.
121
+
3. Inside the new file, remove all other data from the file except for the application settings and rename `Values` to `properties`.
115
122
116
123
Your file should now look similar to the following example:
117
124
@@ -140,7 +147,7 @@ The Azure CLI command requires a number of values specific to your account to ru
140
147
> [!IMPORTANT]
141
148
> The "local.settings.properties.json" file must be in the same directory where this command is run. This file can be named anything you like. The name is not significant.
142
149
143
-
### View environment variables with the Azure CLI
150
+
### View application settings with the Azure CLI
144
151
145
152
Environment variables are available to view through the Azure CLI.
146
153
@@ -153,4 +160,4 @@ Environment variables are available to view through the Azure CLI.
0 commit comments