Developing Azure Functions with VS Code

Introduction

Azure functions are a component of Microsoft's Serverless Computing toolset on Azure. They provide the ability to perform actions based upon events such as in response to HTTP calls, or timed events, and can be written in a variety of languages such as .Net, JavaScript or Java. In this article we're going to see how we can use Visual Studio Code to easily create and debug JavaScript Azure functions and then how we can deploy them to the Azure cloud.

Setup

Azure Functions can be created in a variety of ways: in the Azure portal, from the command line, or though IDEs and editors. One of the easiest ways when getting started is to use VS Code together with the Azure Functions Plugin.

The plugin can be installed into VS Code via the Extensions. Search for Azure Functions and install it.

VS Code Azure Functions

After installing, a new icon will be available in the toolbar in VS code

VS Code Azure Functions

Before creating any Azure functions, we need to log into Azure. Select this option in the tool bar to be presented with the Azure Login / Create Account options.

Login to Azure

For this article, I'm going to assume that you have an Azure account. If not, you can select the Create a Free Azure Account... option to continue.

Select the Sign in to Azure... menu option. A browser window will now open allowing you to log in to your Azure site. Upon successful completion of the login, you will be returned to VS Code with a list of your active subscriptions displayed.

Create A Local Azure Function

Now that VS Code is configured, and you're logged into to Azure, select the Create Function icon

Create Azure Function

You will then be taken through a wizard where you have to answer several questions in order to create the Azure function.

Enter the values below:

Step 1 - Select a Language

The first option is to select a laguage in which to write the Azure functions. Options available are:

  • JavaScript
  • TypeScript
  • C#
  • Python
  • Java
  • PowerShell

For this article, select JavaScript

Step 2 - Select a Template

The next stage is to select a template for the application. This allows us to easily specify how the function will be triggered, and will create sample code for this trigger type.

Select HTTP trigger

Step 3 - Select Function Name

Next, we need to specify the name of the function to create.

Enter sayHello

Step 4 - Select Authorization Level

Azure functions support 3 different authorization levels:

  • Anonymous
  • Function
  • Admin

To create an Azure function that is available to everyone, select Anonymous

VS Code will now create a sample JavaScript Azure function which we can test locally before deploying to Azure. The function looks like:

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

    const name = (req.query.name || (req.body && req.body.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
    };
}

This is a very simple Azure function that simply returns a "Hello" message if no parameters are specified. If a name parameter is specified, a personalized greeting is supplied.

To test the function locally, simply select Run from within VS Code. You will see output in the VS Code console indicating that the function is starting up. Eventually, you will see a message indicating the URL for the local function.

Http Functions:

        sayHello: [GET,POST] http://localhost:7071/api/sayHello

Open up a terminal and execute a curl against this address to verify that the function works as expected.

$ curl 'http://localhost:7071/api/sayHello?name=Dude'
Hello, Dude. This HTTP triggered function executed successfully.

Deploy Azure Functions

Now that we've created and executed a local Azure function, let's see how we can deploy it to the Azure cloud.

Within VS Code, select the Deploy to function app icon.

Deploy Azure Function

We're now presented with a Wizard allowing us to define the Azure Function app.

Create Azure Function

Select Create new Function App in Azure...

A wizard will now be displayed asking for key information to deploy the function app.

Step 1 - Enter Function Name

Enter a globally unique function name (e.g. sayHelloVSCode). This will form the basis of the URL for the function so it has to be globally unique.

Step 2 - Select Runtime

Next we need to specify which runtime Azure should use to run the function. Since we created a JavaScript project, VS Code gives us the options of Node.js 10 and Node.js 8

Select Node.js 10

Step 3 - Select Location

Next we must select an Azure location for deploying the function. All of the available Azure regions are displayed here to select from.

Select East US

Upon completing this step, the Azure Function App and dependencies will be provisioned on Azure. This can take a couple of minutes to complete.

As before, the URL of the HTTP trigger for the function will be displayed within the VS Code console.

sayHelloVSCode: HTTP Trigger Urls:
  sayHello: https://sayhellovscode.azurewebsites.net/api/sayHello

Again, we can issue a curl against this URL to validate that the HTTP call triggers the function as expected.

% curl 'https://sayhellovscode.azurewebsites.net/api/sayHello?name=Dude'
Hello, Dude. This HTTP triggered function executed successfully.

Summary

In this article, we've seen how to configure and use VS Code to enable us to create and run local Functions. We then saw how to deploy these functions to the Azure cloud and invoke them via a HTTP call.

To make things easier to clean up on Azure, all of the resources created will be in a resource group with the same name as the project created. Remember to delete these resources when you have finished to ensure you don't incur any additional charges.

No Comments Yet