Create a Web Api Using a Http Triggered Azure Function App With vs Code

A step by step guide on how to create and test a simple Web API using Azure Functions with Visual Studio Code.

How to create the function

1. If you haven’t allready set up a development environment with Visual Studio Code on your computer, there are some prerequisites to get started.

   1. Install VS Code
   2. Install the Azure Functions extension and Azure Tools
   3. Install Core Tools from Microsoft

2. Create a new folder for your project

3. After creating the new folder, trust the folder.

4. Choose “Create Function” from the Azure menu

5. Select the folder you created for your new project

6. Select the programming language to use for your new function. In this example I use C#.

7. Select the .NET runtime to use for your project. This example use .NET 6.0 LTS

8. Select to create a HTTP triggered function.

9. Provide a name for your function. In this example i simply name it HelloWorld.

10. Provide a namespace to use in your function app project. For instance HelloWorld.Function

11. Next, choose what access rights to use for the HTTP triggered function. Select “Function” to use a function key to access the function.

12. VS Code will now create your new Function project and generate some files and for the HelloWorld function project.

13. Among the files generated is HelloWorld.cs which contains the code for the HTTP triggered function:

14. Add a new class to your project – name it HelloWorldParameters.cs.

15. Add the following variables: FirstName, LastName and Age. These will be used as input parameters when making requests to the API.

namespace HelloWorld.Function
{
    public record HelloWorldParameters
    {
        public string FirstName {get; set;}
        public string LastName {get; set;}
        public int Age {get; set;}
    }
}

16. Next, we modify the HelloWorld function to use the HelloWorldParameters object as input. And only allow get requests. We then create a dynamic person object and assign the values received from the requests.

Also we modify the code to return the Person object as a JsonResult.

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using System.Dynamic;

namespace HelloWorld.Function
{
    public static class HelloWorld
    {
        [FunctionName("HelloWorld")]
        public static async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Function, "get", Route = null)] HelloWorldParameters parameters, HttpRequest req,
            ILogger log)
        {
            log.LogInformation("C# HTTP trigger function processed a request.");

            dynamic personObject = new ExpandoObject();
            personObject.Name = parameters.FirstName + " " + parameters.LastName;
            personObject.Age = parameters.Age;

            return new JsonResult(personObject);
        }
    }
}

Test your new Azure Function locally

1. Press F5 or choose “Start Debugging” from the Run menu.

2. In the terminal window you should now see that the function has started running. Take notice of the url for the function.

3. Send a HTTP request to your function. For testing REST requests, you can use tools like Postman or Insomnia

Create a new GET request and copy the URL to your function from VS code. In this example the url is http://localhost:7071/api/HelloWorld

Also, assign some values to the parameters:

http://localhost:7071/api/HelloWorld?firstname=Luke&lastname=Skywalker&Age=42

The json result received from the function should then correspond to parameter values.

{
    "Name": "Luke Skywalker",
    "Age": 42
}

Debug the function app

1. To debug the API, use the cursor and insert a breakpoint (click next to a line). In this case line 25. A red dot should then appear. Press F5 or choose “Start Debugging” from the Run menu.

2. With VS code and the function running i debug mode, make a new request from your api testing tool.

3. VS Code should now halt the function on the breakpoint you inserted in the code. You can then hover over the code to inspect the values sent from the Api testing tool.

Summary

We have now created a simple web api using Visual Studio Code, that runs an Azure Function locally.

The next step will be to get it running in Azure.

See also

• Key Takeaways from Azure AI Discovery Day
• How to create a blog running on Azure Static Web Apps and Hugo
• An Introduction to Azure AI Capabilities