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, Java, and Python functions. The steps in this article and the article that follows support only JavaScript and C# functions. To learn how to use Visual Studio Code to create and publish Python functions, see Deploy Python to Azure Functions. To learn how to use Visual Studio Code to create and publish PowerShell functions, see Create your first PowerShell function in Azure.

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 Functions extension

You can use the Azure Functions extension to create and test functions and deploy them to Azure.

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

  2. Select Install to install the extension for 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 your Functions project with a function

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, press F1 to open the command palette. In the command palette, search for and select Azure Functions: Create 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. Following the prompts, provide the following information:

    Prompt Value Description
    Select a language for your function app project C# or JavaScript This article supports C# and JavaScript. For Python, see this Python article, and for PowerShell, see this PowerShell article.
    Select a template for your project's first function HTTP trigger Create an HTTP triggered function in the new function app.
    Provide a function name HttpTrigger Press Enter to use the default name.
    Provide a namespace My.Functions (C# only) C# class libraries must have a namespace.
    Authorization level Function Requires a function key to call the function's HTTP endpoint.
    Select how you would like to open your project Add to workspace Creates the function app in the current 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.

A new HTTP triggered function is also created in the HttpTrigger folder of the function app project.

Run the function locally

Azure Functions Core Tools lets you run an Azure Functions project on your local development computer.

  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. This URL includes the function key, which is passed to the code query parameter.

    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.

  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 + F5.

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.

By default, Visual Studio Code creates all of the Azure resources required to create your function app. The names of these resources are based on the function app name you choose. If you need to have full control of the created resources, you can instead publish using advanced options.

This section assumes that you are creating a new function app in Azure.

Important

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

  1. In Visual Studio Code, press F1 to open the command palette. In the command palette, search for and select Azure Functions: Deploy to function app....

  2. If not signed-in, you are prompted to Sign in to Azure. You can also Create a free Azure account. After successful sign in from the browser, go back to Visual Studio Code.

  3. If you have multiple subscriptions, Select a subscription for the function app, then choose + Create New Function App in Azure.

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

    When you press Enter, the following Azure resources are created in your subscription:

    • Resource group: Contains all of the created Azure resources. The name is based on your function app name.
    • Storage account: A standard Storage account is created with a unique name that is based on your function app name.
    • Hosting plan: A consumption plan is created in the West US region to host your serverless function app.
    • Function app: Your project is deployed to and runs in this new function app.

    A notification is displayed after your function app is created and the deployment package is applied. Select View Output in this notification to view the creation and deployment results, including the Azure resources that you created.

  5. Back in the Azure: Functions area, expand the new function app under your subscription. Expand Functions, right-click HttpTrigger, and then choose Copy function URL.

    Copy the function URL for the new HTTP trigger

Run the 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. In the next article, you expand that function by adding an output binding. This binding writes the string from the HTTP request to a message in an Azure Queue Storage queue. The next article also shows you how to clean up these new Azure resources by removing the resource group you created.