Skip to content

Latest commit

 

History

History
123 lines (69 loc) · 7.44 KB

create-first-function-vs-code-node.md

File metadata and controls

123 lines (69 loc) · 7.44 KB
Raw
title description ms.topic ms.date adobe-target adobe-target-activity adobe-target-experience adobe-target-content
Create a JavaScript function using Visual Studio Code - Azure Functions
Learn how to create a JavaScript function, then publish the local Node.js project to serverless hosting in Azure Functions using the Azure Functions extension in Visual Studio Code.
quickstart
11/03/2020
true
DocsExp–386541–A/B–Enhanced-Readability-Quickstarts–2.19.2021
Experience B
./create-first-function-vs-code-node_uiex

Quickstart: Create a JavaScript function in Azure using Visual Studio Code

[!INCLUDE functions-language-selector-quickstart-vs-code]

In this article, you use Visual Studio Code to create a JavaScript function that responds to HTTP requests. After testing the code locally, you deploy it to the serverless environment of Azure Functions.

Completing this quickstart incurs a small cost of a few USD cents or less in your Azure account.

There's also a CLI-based version of this article.

Configure your environment

Before you get started, make sure you have the following requirements in place:

Create your local project

In this section, you use Visual Studio Code to create a local Azure Functions project in JavaScript. Later in this article, you'll publish your function code to Azure.

  1. Choose the Azure icon in the Activity bar, then in the Azure: Functions area, select the Create new project... icon.

    Choose Create a new project

  2. Choose a directory location for your project workspace and choose Select.

    [!NOTE] These steps were designed to be completed outside of a workspace. In this case, do not select a project folder that is part of a workspace.

  3. Provide the following information at the prompts:

    • Select a language for your function project: Choose JavaScript.

    • Select a template for your project's first function: Choose HTTP trigger.

    • Provide a function name: Type HttpExample.

    • Authorization level: Choose Anonymous, which enables anyone to call your function endpoint. To learn about authorization level, see Authorization keys.

    • Select how you would like to open your project: Choose Add to workspace.

  4. 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.

[!INCLUDE functions-run-function-test-local-vs-code]

After you've verified that the function runs correctly on your local computer, it's time to use Visual Studio Code to publish the project directly to Azure.

[!INCLUDE functions-sign-in-vs-code]

Publish the project to Azure

In this section, you create a function app and related resources in your Azure subscription and then deploy your code.

Important

Publishing to an existing function app overwrites the content of that app in Azure.

  1. Choose the Azure icon in the Activity bar, then in the Azure: Functions area, choose the Deploy to function app... button.

    Publish your project to Azure

  2. Provide the following information at the prompts:

    • Select folder: Choose a folder from your workspace or browse to one that contains your function app. You won't see this if you already have a valid function app opened.

    • Select subscription: Choose the subscription to use. You won't see this if you only have one subscription.

    • Select Function App in Azure: Choose + Create new Function App. (Don't choose the Advanced option, which isn't covered in this article.)

    • 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.

    • 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.

    • Select a location for new resources: For better performance, choose a region near you.

    The extension shows the status of individual resources as they are being created in Azure in the notification area.

    :::image type="content" source="../../includes/media/functions-publish-project-vscode/resource-notification.png" alt-text="Notification of Azure resource creation":::

  3. When completed, the following Azure resources are created in your subscription, using names based on your function app name:

    [!INCLUDE functions-vs-code-created-resources]

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

    [!INCLUDE functions-vs-code-create-tip]

  4. 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.

    Create complete notification

[!INCLUDE functions-vs-code-run-remote]

[!INCLUDE functions-cleanup-resources-vs-code.md]

Next steps

You have used Visual Studio Code to create a function app with a simple HTTP-triggered function. In the next article, you expand that function by connecting to either Azure Cosmos DB or Azure Storage. To learn more about connecting to other Azure services, see Add bindings to an existing function in Azure Functions.

[!div class="nextstepaction"] Connect to a database [!div class="nextstepaction"] Connect to an Azure Storage queue