2. Create the local Functions app with the Visual Studio Code Functions extension

Create a local Azure Functions (serverless) application that contains an HTTP trigger function.

  1. Create a new directory on your local workstation, then open Visual Studio Code in this directory.

  2. In Visual Studio Code, select the Azure logo to open the Azure Functions explorer, then select the Create New Project command:

    Create a local Function app in VS Code

  3. At the first two prompts, select the current folder, then select JavaScript for the language.

  4. Use the following table to finish creating the local Azure Function project:

    Prompt Value Notes
    Select a language TypeScript
    Select a template for your project's first function HTTP Trigger API is invoked with an HTTP request.
    Provide a function name category API route is /api/category
    Authorization Level Function This locks the remote API to requests that pass the function key with the request. While developing locally, you won't need the function key.
    Select how you would like to open your project Open in current window.

    This process doesn't create cloud-based Azure Function resource. That step will come later.

  5. After a few moments, VS Code completes creation of the project. You have a folder named for the function, category, within which are three files:

    Filename Description
    index.js The source code that responds to the HTTP request.
    function.json The binding configuration for the HTTP trigger.
    sample.dat A placeholder data file to demonstrate that you can have other files in the folder. You can delete this file, if desired, as it's not used in this tutorial.

Install npm package dependencies from bash terminal

  1. In Visual Studio Code, open an integrated bash terminal, Ctrl + `.

  2. Install npm dependencies:

    npm install
    

Change the function's code

The basic code to respond to the HTTP request is provided for you. If you are familiar with the HTTP request (the req parameter) and response objects, the function should seem familiar. You return response information with the context object on the res property.

Create a new context.log message after the name variable and change it to appear more obvious when scanning the logs.

context.log(`*** HTTPExample name: ${name}`);

The new function code is:

import { AzureFunction, Context, HttpRequest } from "@azure/functions"

const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    context.log('HTTP trigger function processed a request.');
    const name = (req.query.name || (req.body && req.body.name));
    console.log(`*** HTTPExample name: ${name}`);
    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: responseMessage
    };

};

export default httpTrigger;

Next steps