Skip to content

Latest commit

 

History

History
190 lines (129 loc) · 9.98 KB

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

File metadata and controls

190 lines (129 loc) · 9.98 KB
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
07/01/2021
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]

Use Visual Studio Code to create a JavaScript function that responds to HTTP requests. Test the code locally, then 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:

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

    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]

Deploy 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

Deploying 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:

    Prompt Selection
    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":::

    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]

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

Change the code and redeploy to Azure

  1. In the VSCode Explorer view, select the ./HttpExample/index.js file.

  2. Replace the file with the following code to construct a JSON object and return it.

    module.exports = async function (context, req) {
    
    try {
        context.log('JavaScript HTTP trigger function processed a request.');

        // Read incoming data
        const name = req.query.name;
        const sport = req.query.sport;
    
        // fail if incoming data is required
        if (!name || !sport) {

            context.res = {
                status: 400
            };
            return;
        }
        
        // Add or change code here
        const message = `${name} likes ${sport}`;
    
        // Construct response
        const responseJSON = {
            "name": name,
            "sport": sport,
            "message": message,
            "success": true
        }

        context.res = {
            // status: 200, /* Defaults to 200 */
            body: responseJSON,
            contentType: 'application/json'
        };
    } catch(err) {
        context.res = {
            status: 500
        };
    }
}

  3. Rerun the function app locally.

  4. In the prompt Enter request body change the request message body to { "name": "Tom","sport":"basketball" }. Press Enter to send this request message to your function.

  5. View the response in the notification:

    {
  "name": "Tom",
  "sport": "basketball",
  "message": "Tom likes basketball",
  "success": true
}

  6. Redeploy the function to Azure.

Troubleshooting

Use the table below to resolve the most common issues encountered when using this quickstart.

Problem Solution
Can't create a local function project? Make sure you have the Azure Functions extension installed.
Can't run the function locally? Make sure you have the Azure Functions Core Tools installed installed.
When running on Windows, make sure that the default terminal shell for Visual Studio Code isn't set to WSL Bash.
Can't deploy function to Azure? Review the Output for error information. The bell icon in the lower right corner is another way to view the output. Did you publish to an existing function app? That action overwrites the content of that app in Azure.
Couldn't run the cloud-based Function app? Remember to use the query string to send in parameters.

[!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. If you want to learn more about security, see Securing Azure Functions.

[!div class="nextstepaction"] Connect to Azure Cosmos DB Connect to Azure Queue Storage