Create your first function using Visual Studio Code

Azure Functions lets you execute your code in a serverless environment without having to first create a VM or publish a web application.

In this article, you learn how to use the Azure Functions extension for Visual Studio Code to create and test a "hello world" function on your local computer using Microsoft Visual Studio Code. You then publish the function code to Azure from Visual Studio Code.

Azure Functions code in a Visual Studio project

The extension currently supports C#, JavaScript, and Java functions. The steps in this article may vary depending on your choice of language for your Azure Functions project. The extension is currently in preview. To learn more, see the Azure Functions extension for Visual Studio Code extension page.

Prerequisites

To complete this quickstart:

If you don't have an Azure subscription, create a free account before you begin.

Install the Azure Function extension

The Azure Functions extension is used to create, test, and deploy functions to Azure.

  1. In Visual Studio Code, open Extensions and search for azure functions, or open this link in Visual Studio Code.

  2. Select Install to install the extension to Visual Studio Code.

    Install the extension for Azure Functions

  3. Restart Visual Studio Code and select the Azure icon on the Activity bar. You should see an Azure Functions area in the Side Bar.

    Azure Functions area in the Side Bar

Create an Azure Functions project

The Azure Functions project template in Visual Studio Code creates a project that can be published to a function app in Azure. A function app lets you group functions as a logical unit for management, deployment, and sharing of resources.

  1. In Visual Studio Code, select the Azure logo to display the Azure: Functions area, and then select the Create New Project icon.

    Create a function app project

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

    Note

    This article was designed to be completed outside of a workspace. In this case, do not select a project folder that is part of a workspace.

  3. Select the language for your function app project. In this article, JavaScript is used. Choose project language

  4. When prompted, choose Add to workspace.

Visual Studio Code creates the function app project in a new workspace. This project contains the host.json and local.settings.json configuration files, plus any language-specific project files. You also get a new Git repository in the project folder.

Create an HTTP triggered function

  1. From Azure: Functions, choose the Create Function icon.

    Create a function

  2. Select the folder with your function app project and select the HTTP trigger function template.

    Choose the HTTP trigger template

  3. Type HTTPTrigger for the function name and press Enter, then select Anonymous authentication.

    Choose anonymous authentication

    A function is created in your chosen language using the template for an HTTP-triggered function.

    HTTP triggered function template in Visual Studio Code

You can add input and output bindings to your function by modifying the function.json file. For more information, see Azure Functions triggers and bindings concepts.

Now that you've created your function project and an HTTP-triggered function, you can test it on your local computer.

Test the function locally

Azure Functions Core Tools lets you run an Azure Functions project on your local development computer. You're prompted to install these tools the first time you start a function from Visual Studio Code.

  1. To test your function, set a breakpoint in the function code and press F5 to start the function app project. Output from Core Tools is displayed in the Terminal panel.

  2. In the Terminal panel, copy the URL endpoint of your HTTP-triggered function.

    Azure local output

  3. Paste the URL for the HTTP request into your browser's address bar. Append the query string ?name=<yourname> to this URL and execute the request. Execution is paused when the breakpoint is hit.

    Function hitting breakpoint in Visual Studio Code

  4. When you continue the execution, the following shows the response in the browser to the GET request:

    Function localhost response in the browser

  5. To stop debugging, press Shift + F1.

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

Sign in to Azure

Before you can publish your app, you must sign in to Azure.

  1. In the Azure: Functions area, choose Sign in to Azure.... If you don't already have one, you can Create a free Azure account.

    Function localhost response in the browser

  2. When prompted, select Copy & Open, or copy the displayed code and open https://aka.ms/devicelogin in your browser.

  3. Paste the copied code in the Device Login page, verify the sign-in for Visual Studio Code, then select Continue.

  4. Complete the sign-in using your Azure account credentials. After you have successfully signed in, you can close the browser.

Publish the project to Azure

Visual Studio Code lets you publish your functions project directly to Azure. In the process, you create a function app and related resources in your Azure subscription. The function app provides an execution context for your functions. The project is packaged and deployed to the new function app in your Azure subscription.

This article assumes that you are creating a new function app. Publishing to an existing function app overwrites the content of that app in Azure.

  1. In the Azure: Functions area, select the Deploy to Function App icon.

    Function app settings

  2. Choose the project folder, which is your current workspace.

  3. If you have more than one subscription, choose the one you want to host your function app, then choose + Create New Function App.

  4. Type a globally unique name that identifies your function app and press Enter. Valid characters for a function app name are a-z, 0-9, and -.

  5. Choose + Create New Resource Group, type a resource group name, like myResourceGroup, and press enter. You can also use an existing resource group.

  6. Choose +Create New Storage Account, type a globally unique name of the new storage account used by your function app and press Enter. Storage account names must be between 3 and 24 characters in length and may contain numbers and lowercase letters only. You can also use an existing account.

  7. Choose a location in a region near you or near other services your functions access.

    Function app creation starts after you choose your location. A notification is displayed after your function app is created and the deployment package is applied.

  8. Select View Output in the notifications to view the creation and deployment results, including the Azure resources that you created.

    Function app creation output

  9. Make a note of the URL of the new function app in Azure. You use this to test your function after the project is published to Azure.

    Function app creation output

  10. Back in the Azure: Functions area, you see the new function app displayed under your subscription. When you expand this node, you see the functions in the function app, as well as application settings and function proxies.

    Function app settings

    From your function app node, type Ctrl and click (right-click) to choose to perform various management and configuration tasks against the function app in Azure. You can also choose to view the function app in the Azure portal.

Test your function in Azure

  1. Copy the URL of the HTTP trigger from the Output panel. As before, make sure to add the query string ?name=<yourname> to the end of this URL and execute the request.

    The URL that calls your HTTP-triggered function should be in the following format:

     http://<functionappname>.azurewebsites.net/api/<functionname>?name=<yourname> 
    
  2. Paste this new URL for the HTTP request into your browser's address bar. The following shows the response in the browser to the remote GET request returned by the function:

    Function response in the browser

Next steps

You have used Visual Studio Code to create a function app with a simple HTTP-triggered function. To learn more about developing functions in a specific language, see the language reference guides for JavaScript, .NET, or Java.

Next you may want to learn more about local testing and debugging from the Terminal or command prompt using the Azure Functions Core Tools.