Skip to content

Commit 6772756

Browse files
KellylorenebakerKellylorenebaker
authored
Merge pull request #102839 from ggailey777/quickstart-vscode
UX feedback updates
2 parents 6cea2e6 + db45148 commit 6772756

File tree

13 files changed

+108
-144
lines changed

13 files changed

+108
-144
lines changed

‎articles/azure-functions/functions-create-first-function-vs-code.md

Lines changed: 46 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,40 @@ In this article, you use Visual Studio Code to create a function that responds t
1313

1414
There is also a [CLI-based version](functions-create-first-azure-function-azure-cli.md) of this article.
1515

16-
## Prerequisites
16+
## Configure your environment
1717

18-
+ [Visual Studio Code](https://code.visualstudio.com/) on one of the [supported platforms](https://code.visualstudio.com/docs/supporting/requirements#_platforms).
19-
::: zone pivot="programming-language-csharp"
20-
+ The [C# extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp) for Visual Studio Code.
21-
::: zone-end
22-
::: zone pivot="programming-language-javascript,programming-language-typescript"
23-
+ [Node.js](https://nodejs.org/), Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended).
24-
::: zone-end
18+
Before you get started, make sure you have the following requirements in place:
19+
20+
+ An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?ref=microsoft.com&utm_source=microsoft.com&utm_medium=docs&utm_campaign=visualstudio).
21+
22+
::: zone pivot="programming-language-csharp,programming-language-powershell,programming-language-python"
23+
+ [Node.js](https://nodejs.org/), required by Windows for npm. Only [Active LTS and Maintenance LTS versions ](https://nodejs.org/about/releases/). Use the `npm --version` command to check your version.
24+
Not required for local development on MacOS and Linux.
25+
::: zone-end
26+
::: zone pivot="programming-language-javascript,programming-language-typescript"
27+
+ [Node.js](https://nodejs.org/), Active LTS and Maintenance LTS versions (10.14.1 recommended). Use the `npm --version` command to check your version.
28+
::: zone-end
2529
::: zone pivot="programming-language-python"
2630
+ [Python 3.7](https://www.python.org/downloads/release/python-375/) or [Python 3.6](https://www.python.org/downloads/release/python-368/), which as supported by Azure Functions. Python 3.8 isn't yet supported.
27-
28-
+ The [Python extension](https://marketplace.visualstudio.com/items?itemName=ms-python.python) for Visual Studio Code.
29-
::: zone-end
31+
::: zone-end
3032
::: zone pivot="programming-language-powershell"
3133
+ [PowerShell Core](/powershell/scripting/install/installing-powershell-core-on-windows)
3234

33-
+ The [.NET Core SDK 2.2+](https://www.microsoft.com/net/download)
34-
35-
+ The [PowerShell extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell).
36-
::: zone-end
35+
+ The [.NET Core SDK 2.2+](https://www.microsoft.com/net/download)
36+
::: zone-end
37+
+ [Visual Studio Code](https://code.visualstudio.com/) on one of the [supported platforms](https://code.visualstudio.com/docs/supporting/requirements#_platforms).
38+
::: zone pivot="programming-language-csharp"
39+
+ The [C# extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp) for Visual Studio Code.
40+
::: zone-end
41+
::: zone pivot="programming-language-python"
42+
+ The [Python extension](https://marketplace.visualstudio.com/items?itemName=ms-python.python) for Visual Studio Code.
43+
::: zone-end
44+
::: zone pivot="programming-language-powershell"
45+
+ The [PowerShell extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell).
46+
::: zone-end
3747

3848
+ The [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) for Visual Studio Code.
3949

40-
+ An [Azure account](../guides/developer/azure-developer-guide.md#understanding-accounts-subscriptions-and-billing) with an active subscription. If you don't have one, create a [free account](https://azure.microsoft.com/free/?ref=microsoft.com&utm_source=microsoft.com&utm_medium=docs&utm_campaign=visualstudio) before you begin.
41-
4250
## <a name="create-an-azure-functions-project"></a>Create your local project
4351

4452
In this section, you use Visual Studio Code to create a local Azure Functions project in your chosen language. Later in this article, you'll publish your function code to Azure.
@@ -55,111 +63,36 @@ In this section, you use Visual Studio Code to create a local Azure Functions pr
5563
1. Provide the following information at the prompts:
5664

5765
::: zone pivot="programming-language-csharp"
58-
59-
| Prompt | Value |
60-
| ------ | ----- |
61-
| Select a language for your function project | C# |
62-
| Select a version | Azure Functions v2 |
63-
| Select a template for your project's first function | HTTP trigger |
64-
| Provide a function name | HttpExample |
65-
| Provide a namespace | My.Functions |
66-
| Authorization level | Anonymous |
67-
| Select how you would like to open your project | Add to workspace |
68-
66+
+ **Select a language for your function project**: Choose `C#`.
6967
::: zone-end
70-
7168
::: zone pivot="programming-language-javascript"
72-
73-
| Prompt | Value |
74-
| ------ | ----- |
75-
| Select a language for your function project | JavaScript |
76-
| Select a version | Azure Functions v2 |
77-
| Select a template for your project's first function | HTTP trigger |
78-
| Provide a function name | HttpExample |
79-
| Authorization level | Anonymous |
80-
| Select how you would like to open your project | Add to workspace |
81-
69+
+ **Select a language for your function project**: Choose `JavaScript`.
8270
::: zone-end
83-
8471
::: zone pivot="programming-language-typescript"
85-
86-
| Prompt | Value |
87-
| ------ | ----- |
88-
| Select a language for your function project | TypeScript |
89-
| Select a version | Azure Functions v2 |
90-
| Select a template for your project's first function | HTTP trigger |
91-
| Provide a function name | HttpExample |
92-
| Authorization level | Anonymous |
93-
| Select how you would like to open your project | Add to workspace |
94-
72+
+ **Select a language for your function project**: Choose `TypeScript`.
9573
::: zone-end
96-
9774
::: zone pivot="programming-language-powershell"
98-
99-
| Prompt | Value |
100-
| ------ | ----- |
101-
| Select a language for your function project | PowerShell |
102-
| Select a version | Azure Functions v2 |
103-
| Select a template for your project's first function | HTTP trigger |
104-
| Provide a function name | HttpExample |
105-
| Authorization level | Anonymous |
106-
| Select how you would like to open your project | Add to workspace |
107-
75+
+ **Select a language for your function project**: Choose `PowerShell`.
10876
::: zone-end
109-
11077
::: zone pivot="programming-language-python"
78+
+ **Select a language for your function project**: Choose `Python`.
11179

112-
| Prompt | Value |
113-
| ------ | ----- |
114-
| Select a language for your function project | Python |
115-
| Select a version | Azure Functions v2 |
116-
| Select a Python alias to create a virtual environment | Python alias |
117-
| Select a template for your project's first function | HTTP trigger |
118-
| Provide a function name | HttpExample |
119-
| Authorization level | Anonymous |
120-
| Select how you would like to open your project | Add to workspace |
121-
80+
+ **Select a Python alias to create a virtual environment**: Choose the location of your Python interpreter. If the location isn't shown, type in the full path to your Python binary.
12281
::: zone-end
12382

124-
1. Visual Studio Code does the following:
125-
126-
+ Creates an Azure Functions project in a new workspace, which contains the [host.json](functions-host-json.md) and [local.settings.json](functions-run-local.md#local-settings-file) configuration files.
127-
128-
::: zone pivot="programming-language-csharp"
129-
130-
+ Creates an [HttpExample.cs class library file](functions-dotnet-class-library.md#functions-class-library-project) that implements the function.
131-
132-
::: zone-end
133-
134-
::: zone pivot="programming-language-javascript"
83+
+ **Select a template for your project's first function**: Choose `HTTP trigger`.
13584

136-
+ Creates a package.json file in the root folder.
137-
138-
+ Creates an HttpExample folder that contains the [function.json definition file](functions-reference-node.md#folder-structure) and the [index.js file](functions-reference-node.md#exporting-a-function), a Node.js file that contains the function code.
85+
+ **Provide a function name**: Type `HttpExample`.
13986

87+
::: zone pivot="programming-language-csharp"
88+
+ **Provide a namespace**: Type `My.Functions`.
14089
::: zone-end
141-
142-
::: zone pivot="programming-language-typescript"
143-
144-
+ Creates a package.json file and a tsconfig.json file in the root folder.
14590

146-
+ Creates an HttpExample folder that contains the [function.json definition file](functions-reference-node.md#folder-structure) and the [index.ts file](functions-reference-node.md#typescript), a TypeScript file that contains the function code.
147-
148-
::: zone-end
149-
150-
::: zone pivot="programming-language-powershell"
151-
152-
+ Creates an HttpExample folder that contains the [function.json definition file](functions-reference-python.md#programming-model) and the run.ps1 file, which contains the function code.
153-
154-
::: zone-end
155-
156-
::: zone pivot="programming-language-python"
157-
158-
+ Creates a project-level requirements.txt file that lists packages required by Functions.
159-
160-
+ Creates an HttpExample folder that contains the [function.json definition file](functions-reference-python.md#programming-model) and the \_\_init\_\_.py file, which contains the function code.
161-
162-
::: zone-end
91+
+ **Authorization level**: Choose `Anonymous`, which enables anyone to call your function endpoint. To learn about authorization level, see [Authorization keys](functions-bindings-http-webhook.md#authorization-keys).
92+
93+
+ **Select how you would like to open your project**: Choose `Add to workspace`.
94+
95+
1. Using this information, Visual Studio Code generates an Azure Functions project with an HTTP trigger. You can view the local project files in the Explorer. To learn more about files that are created, see [Generated project files](functions-develop-vs-code.md#generated-project-files).
16396

16497
::: zone pivot="programming-language-csharp,programming-language-javascript,programming-language-python"
16598

@@ -181,13 +114,15 @@ After you've verified that the function runs correctly on your local computer, i
181114

182115
## Run the function in Azure
183116

184-
1. Copy the URL of the HTTP trigger from the **Output** panel. Again, add the `name` query string as `?name=<yourname>` to the end of this URL and execute the request.
117+
1. Back in the **Azure: Functions** area in the side bar, expand the new function app under your subscription. Expand **Functions**, right-click (Windows) or Ctrl + click (MacOS) on **HttpExample**, and then choose **Copy function URL**.
185118

186-
The URL that calls your HTTP-triggered function should be in the following format:
119+
![Copy the function URL for the new HTTP trigger](./media/functions-create-first-function-vs-code/function-copy-endpoint-url.png)
187120

188-
http://<functionappname>.azurewebsites.net/api/httpexample?name=<yourname>
121+
1. Paste this URL for the HTTP request into your browser's address bar, add the `name` query string as `?name=Functions` to the end of this URL, and then execute the request. The URL that calls your HTTP-triggered function should be in the following format:
189122

190-
1. Paste this new URL for the HTTP request into your browser's address bar. The following example shows the response in the browser to the remote GET request returned by the function:
123+
http://<functionappname>.azurewebsites.net/api/httpexample?name=Functions
124+
125+
The following example shows the response in the browser to the remote GET request returned by the function:
191126

192127
![Function response in the browser](./media/functions-create-first-function-vs-code/functions-test-remote-browser.png)
193128

‎articles/azure-functions/functions-develop-vs-code.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ The Functions extension lets you create a function app project, along with your
7575

7676
![HTTP-triggered function template in Visual Studio Code](./media/functions-develop-vs-code/new-function-full.png)
7777

78+
### Generated project files
79+
7880
The project template creates a project in your chosen language and installs required dependencies. For any language, the new project has these files:
7981

8082
* **host.json**: Lets you configure the Functions host. These settings apply when you're running functions locally and when you're running them in Azure. For more information, see [host.json reference](functions-host-json.md).
@@ -84,6 +86,30 @@ The project template creates a project in your chosen language and installs requ
8486
>[!IMPORTANT]
8587
>Because the local.settings.json file can contain secrets, you need to exclude it from your project source control.
8688
89+
Depending on your language, these other files are created:
90+
91+
# [C\#](#tab/csharp)
92+
93+
* [HttpExample.cs class library file](functions-dotnet-class-library.md#functions-class-library-project) that implements the function.
94+
95+
# [JavaScript](#tab/nodejs)
96+
97+
* A package.json file in the root folder.
98+
99+
* An HttpExample folder that contains the [function.json definition file](functions-reference-node.md#folder-structure) and the [index.js file](functions-reference-node.md#exporting-a-function), a Node.js file that contains the function code.
100+
101+
<!-- # [PowerShell](#tab/powershell)
102+
103+
* An HttpExample folder that contains the [function.json definition file](functions-reference-python.md#programming-model) and the run.ps1 file, which contains the function code.
104+
105+
# [Python](#tab/python)
106+
107+
* A project-level requirements.txt file that lists packages required by Functions.
108+
109+
* An HttpExample folder that contains the [function.json definition file](functions-reference-python.md#programming-model) and the \_\_init\_\_.py file, which contains the function code.
110+
-->
111+
---
112+
87113
At this point, you can add input and output bindings to your function by [modifying the function.json file](#add-a-function-to-your-project) or by [adding a parameter to a C# class library function](#add-a-function-to-your-project).
88114

89115
You can also [add a new function to your project](#add-a-function-to-your-project).

‎articles/azure-functions/media/functions-create-first-function-vs-code/create-new-project.png

9.84 KB
Loading

‎includes/media/functions-publish-project-vscode/function-copy-endpoint-url.png renamed to ‎articles/azure-functions/media/functions-create-first-function-vs-code/function-copy-endpoint-url.png

File renamed without changes.

‎articles/azure-functions/media/functions-create-first-function-vs-code/functions-test-remote-browser.png

3.2 KB
Loading

‎includes/functions-publish-project-vscode.md

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,24 @@ In this section, you create a function app and related resources in your Azure s
1616

1717
1. Provide the following information at the prompts:
1818

19-
::: zone pivot="programming-language-csharp,programming-language-powershell"
20-
21-
| Prompt | Value | Description |
22-
| ------ | ----- | ----- |
23-
| Select subscription | Your subscription | Shown when you have multiple subscriptions. |
24-
| Select Function App in Azure | + Create new Function App | Publishing to an existing function app overwrites the content of that app in Azure. |
25-
| Enter a globally unique name for the function app | Unique name | Valid characters for a function app name are `a-z`, `0-9`, and `-`. |
26-
| Select a location for new resources | Region | Choose a [region](https://azure.microsoft.com/regions/) near you. |
19+
+ **Select subscription**: Choose the subscription to use. You won't see this if you only have one subscription.
2720

21+
+ **Select Function App in Azure**: Choose `+ Create new Function App` (not `Advanced`). This article doesn't support the [advanced publishing flow](../articles/azure-functions/functions-develop-vs-code.md#enable-publishing-with-advanced-create-options).
22+
23+
>[!IMPORTANT]
24+
> Publishing to an existing function app overwrites the content of that app in Azure.
25+
26+
+ **Enter a globally unique name for the function app**: Type a name that is valid in a URL path. The name you type is validated to make sure that it's unique in Azure Functions.
27+
28+
::: zone pivot="programming-language-python"
29+
+ **Select a runtime**: Choose the version of Python you've been running on locally. You can use the `python --version` command to check your version.
2830
::: zone-end
2931

30-
::: zone pivot="programming-language-javascript,programming-language-typescript,programming-language-python"
31-
32-
| Prompt | Value | Description |
33-
| ------ | ----- | ----- |
34-
| Select subscription | Your subscription | Shown when you have multiple subscriptions. |
35-
| Select Function App in Azure | + Create new Function App | Publishing to an existing function app overwrites the content of that app in Azure. |
36-
| Enter a globally unique name for the function app | Unique name | Valid characters for a function app name are `a-z`, `0-9`, and `-`. |
37-
| Select a runtime | Your version | Choose the language version you've been running on locally. |
38-
| Select a location for new resources | Region | Choose a [region](https://azure.microsoft.com/regions/) near you. |
39-
32+
::: zone pivot="programming-language-javascript,programming-language-typescript"
33+
+ **Select a runtime**: Choose the version of Node.js you've been running on locally. You can use the `node --version` command to check your version.
4034
::: zone-end
4135

36+
+ **Select a location for new resources**: For better performance, choose a [region](https://azure.microsoft.com/regions/) near you.
4237

4338
1. When completed, the following Azure resources are created in your subscription:
4439

@@ -50,10 +45,6 @@ In this section, you create a function app and related resources in your Azure s
5045

5146
A notification is displayed after your function app is created and the deployment package is applied.
5247

53-
1. Select **View Output** in this notification to view the creation and deployment results, including the Azure resources that you created.
48+
1. Select **View Output** in this notification to view the creation and deployment results, including the Azure resources that you created. If you miss the notification, select the bell icon in the lower right corner to see it again.
5449

5550
![Create complete notification](media/functions-publish-project-vscode/function-create-notifications.png)
56-
57-
1. Back in the **Azure: Functions** area in the side bar, expand the new function app under your subscription. Expand **Functions**, right-click (Windows) or Ctrl + click (MacOS) on **HttpExample**, and then choose **Copy function URL**.
58-
59-
![Copy the function URL for the new HTTP trigger](./media/functions-publish-project-vscode/function-copy-endpoint-url.png)

‎includes/functions-run-function-test-local-vs-code-ps.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,17 @@ Azure Functions Core Tools integrates with Visual Studio Code to let you run and
2323
Hello PowerShell
2424
```
2525
26-
You can also execute the GET request from a browser.
26+
You can also execute the GET request from a browser from the following URL:
2727
28-
When you call the HttpTrigger endpoint without passing a `name` parameter either as a query parameter or in the body, the function returns a [HttpStatusCode]::BadRequest error. When you review the code in run.ps1, you see that this error occurs by design.
28+
<http://localhost:7071/api/HttpExample?name=PowerShell>
2929
30-
1. To stop debugging, press Shift + F5.
30+
When you call the HttpTrigger endpoint without passing a `name` parameter either as a query parameter or in the body, the function returns a `BadRequest` error. When you review the code in run.ps1, you see that this error occurs by design.
31+
32+
1. Information about the request is shown in **Terminal** panel.
33+
34+
![Function execution in Terminal panel](./media/functions-run-function-test-local-vs-code-ps/function-execution-terminal.png)
35+
36+
1. To stop debugging, press Ctrl + C to stop Core Tools.
3137
3238
After you've verified that the function runs correctly on your local computer, it's time to publish the project to Azure.
3339

0 commit comments

Comments
 (0)