Rediger

Del via

Quickstart: Create a function in Azure with TypeScript using Visual Studio Code

  • Artikkel

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

Important

The content of this article changes based on your choice of the Node.js programming model in the selector at the top of the page. The v4 model is generally available and is designed to have a more flexible and intuitive experience for JavaScript and TypeScript developers. Learn more about the differences between v3 and v4 in the migration guide.

Completion of 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:

  • Node.js 18.x or above. Use the node --version command to check your version.

  • TypeScript 4.x. Use the tsc -v command to check your version.

Create your local project

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

  1. In Visual Studio Code, press F1 to open the command palette and search for and run the command Azure Functions: Create New Project....

  2. Choose the directory location for your project workspace and choose Select. You should either create a new folder or choose an empty folder for the project workspace. Don't choose a project folder that is already part of a workspace.

  1. Provide the following information at the prompts:

    Prompt Selection
    Select a language for your function project Choose TypeScript.
    Select a TypeScript programming model Choose Model V3
    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. For more information, see Authorization level.
    Select how you would like to open your project Choose Open in current window.

    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.

  1. Provide the following information at the prompts:

    Prompt Selection
    Select a language for your function project Choose TypeScript.
    Select a TypeScript programming model Choose Model V4
    Select a template for your project's first function Choose HTTP trigger.
    Provide a function name Type HttpExample.
    Select how you would like to open your project Choose Open in current window

    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 Azure Functions TypeScript developer guide.

Run the function locally

Visual Studio Code integrates with Azure Functions Core tools to let you run this project on your local development computer before you publish to Azure.

  1. To start the function locally, press F5 or the Run and Debug icon in the left-hand side Activity bar. The Terminal panel displays the Output from Core Tools. Your app starts in the Terminal panel. You can see the URL endpoint of your HTTP-triggered function running locally.

    Screenshot of the Local function VS Code output.

    If you have trouble running on Windows, make sure that the default terminal for Visual Studio Code isn't set to WSL Bash.

  2. With Core Tools still running in Terminal, choose the Azure icon in the activity bar. In the Workspace area, expand Local Project > Functions. Right-click (Windows) or Ctrl - click (macOS) the new function and choose Execute Function Now....

    Execute function now from Visual Studio Code

  3. In Enter request body you see the request message body value of { "name": "Azure" }. Press Enter to send this request message to your function.

  4. When the function executes locally and returns a response, a notification is raised in Visual Studio Code. Information about the function execution is shown in Terminal panel.

  5. With the Terminal panel focused, press Ctrl + C to stop Core Tools and disconnect the debugger.

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.

Sign in to Azure

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

  1. If you aren't already signed in, in the Activity bar, select the Azure icon. Then under Resources, select Sign in to Azure.

    Screenshot of the sign in to Azure window in Visual Studio Code.

    If you're already signed in and can see your existing subscriptions, go to the next section. If you don't yet have an Azure account, select Create an Azure Account. Students can select Create an Azure for Students Account.

  2. When you are prompted in the browser, select your Azure account and sign in by using your Azure account credentials. If you create a new account, you can sign in after your account is created.

  3. After you successfully sign in, you can close the new browser window. The subscriptions that belong to your Azure account are displayed in the side bar.

Create the function app in Azure

In this section, you create a function app and related resources in your Azure subscription. Many of the resource creation decisions are made for you based on default behaviors. For more control over the created resources, you must instead create your function app with advanced options.

  1. In Visual Studio Code, select F1 to open the command palette. At the prompt (>), enter and then select Azure Functions: Create Function App in Azure.

  2. At the prompts, provide the following information:

    Prompt Action
    Select subscription Select the Azure subscription to use. The prompt doesn't appear when you have only one subscription visible under Resources.
    Enter a globally unique name for the function app Enter a name that is valid in a URL path. The name you enter is validated to make sure that it's unique in Azure Functions.
    Select a runtime stack Select the language version you currently run locally.
    Select a location for new resources Select an Azure region. For better performance, select a region near you.

    In the Azure: Activity Log panel, the Azure extension shows the status of individual resources as they're created in Azure.

    Screenshot that shows the log of Azure resource creation.

  3. When the function app is created, the following related resources are created in your Azure subscription. The resources are named based on the name you entered for your function app.

    • A resource group, which is a logical container for related resources.
    • A standard Azure Storage account, which maintains state and other information about your projects.
    • A function app, which provides the environment for executing your function code. A function app lets you group functions as a logical unit for easier management, deployment, and sharing of resources within the same hosting plan.
    • An Azure App Service plan, which defines the underlying host for your function app.
    • An Application Insights instance that's connected to the function app, and which tracks the use of your functions in the app.

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

    Tip

    By default, the Azure resources required by your function app are created based on the name you enter for your function app. By default, the resources are created with the function app in the same, new resource group. If you want to customize the names of the associated resources or reuse existing resources, publish the project with advanced create options.

Deploy the project to Azure

Important

Deploying to an existing function app always overwrites the contents of that app in Azure.

  1. In the command palette, enter and then select Azure Functions: Deploy to Function App.

  2. Select the function app you just created. When prompted about overwriting previous deployments, select Deploy to deploy your function code to the new function app resource.

  3. When deployment is completed, select View Output 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.

    Screenshot of the View Output window.

Run the function in Azure

  1. Press F1 to display the command palette, then search for and run the command Azure Functions:Execute Function Now.... If prompted, select your subscription.

  2. Select your new function app resource and HttpExample as your function.

  3. In Enter request body type { "name": "Azure" }, then press Enter to send this request message to your function.

  4. When the function executes in Azure, the response is displayed in the notification area. Expand the notification to review the full response.

Clean up resources

When you continue to the next step and add an Azure Storage queue binding to your function, you'll need to keep all your resources in place to build on what you've already done.

Otherwise, you can use the following steps to delete the function app and its related resources to avoid incurring any further costs.

  1. In Visual Studio Code, press F1 to open the command palette. In the command palette, search for and select Azure: Open in portal.

  2. Choose your function app and press Enter. The function app page opens in the Azure portal.

  3. In the Overview tab, select the named link next to Resource group.

    Screenshot of select the resource group to delete from the function app page.

  4. On the Resource group page, review the list of included resources, and verify that they're the ones you want to delete.

  5. Select Delete resource group, and follow the instructions.

    Deletion may take a couple of minutes. When it's done, a notification appears for a few seconds. You can also select the bell icon at the top of the page to view the notification.

For more information about Functions costs, see Estimating Consumption plan costs.

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 Azure Storage. To learn more about connecting to other Azure services, see Add bindings to an existing function in Azure Functions.

Connect to an Azure Storage queue