Exercise - Create a function app

Completed

The Express server runs the API on a server. You can create an Azure Functions project to run the APIs instead.

Create a new function app

In this exercise, you'll create the Azure Functions application using the Visual Studio Code Extension for Azure Functions. Install the extension and follow these steps to create an Azure Functions app on your computer.

  1. In Visual Studio Code, open the command palette by pressing F1

  2. Type and select Azure Functions: Create New Project

    Screenshot of VS Code when creating a new function app.

  3. Choose Browse to find the folder to create the functions

  4. Create a new folder in your project called functions

  5. Select TypeScript

  6. When prompted to create a function, select Skip for Now

Congratulations, you just created an Azure Function app!

Note

You created the function app in the functions folder, which separates it from the Angular app in the same project. You can decide how to structure your application, but for this sample it helps to see them all in one place.

The Azure Functions app is what serves the application's API endpoints.

Next you'll create the function that will fetch and return the list of vacations.

Create a new function

You may recall that there are four endpoints in the Node.js Express app. In this exercise, you'll create the function for the first of these endpoints. We'll come back and create the other endpoints in a future exercise.

Create a new function in your Azure Functions application.

  1. In Visual Studio Code, open the command palette by pressing F1

  2. Type and select Azure Functions: Create Function

    Screenshot of VS Code when creating a new function.

  3. Choose HTTP Trigger as the type of function

  4. Enter vacations-get as the name of the function

  5. Select Anonymous as the authentication level

Set the HTTP method and route endpoint names

Notice that there's now a folder functions/vacations-get that contains a few files.

The function.json contains the configuration for the function.

  1. Open the file functions/vacations-get/function.json
  2. Notice the methods allow both GET and POST
  3. Change the methods array to only allow GET requests
  4. Go to the bindings section's req properties
  5. Add a route: "vacations" entry

By convention, the route endpoint has the same name as the folder that contains the function. Since the function is created in the vacations-get folder, the route endpoint is generated as vacations-get. By adding the route property, the route now matches the expected vacations route in the Node.js Express app.

Now the function is executed when an HTTP GET on /vacations is requested.

Your function.json should look like the following code.

{
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "vacations"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ],
  "scriptFile": "../dist/vacations-get/index.js"
}

The other important file here in the functions/vacations-get folder is index.ts. This file contains the logic that runs when the route endpoint is requested. The Node.js Express app already includes the logic that you'll move into this file.