How to create Azure Function App using JavaScript SDK

Question

I'm having some trouble creating a Function App with the Azure JavaScript SDK. I'm able to create the app, but there are no configuration variables added, and the runtime isn't set either.

I'm using @azure/arm-appservice and trying to follow the same creation pattern used in vscode-azurefunctions since I can't find any other code examples.

My understanding is you first create a WebSiteManagementClient using some credentials and the subscriptionId.

const subscriptionId = '<subscriptionId>'
const webSiteClient = new WebSiteManagementClient(new DefaultAzureCredential(), subscriptionId);

After that you use the WebApps.beginCreateOrUpdateAndWait function to create the Function App resource. However, the documentation for "siteEnvelope" parameter doesn't seem to match the code in the vscode-extension. I also don't see where you would pass along the App Function configuration. Here's what I have so far.

const resourceGroupName = "my-resource-group";
const siteName = "my-new-function";
const serverFarmPath = "<id_from_portal>";
const serverFarmId = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Web/serverFarms/${serverFarmPath}`;

const createAppResult = await webSiteClient.webApps.beginCreateOrUpdateAndWait(
  resourceGroupName,
  siteName,
  {
    name: siteName,
    kind: 'functionapp',
    location: 'East US 2',
    serverFarmId: serverFarmId,
    clientAffinityEnabled: false,
    siteConfig: [
      {
        name: 'AzureWebJobsStorage',
        value: '<connection_string>'
      },
      {
        name: 'FUNCTIONS_EXTENSION_VERSION',
        value: '~4'
      },
      {
        name: "FUNCTIONS_WORKER_RUNTIME",
        value: "node"
      },
      {
        name: "WEBSITE_NODE_DEFAULT_VERSION",
        value: "~14"
      },
      {
        name: "APPINSIGHTS_INSTRUMENTATIONKEY",
        value: '<key>'
      },
      {
        name: 'APPLICATIONINSIGHTS_CONNECTION_STRING',
        value: '<connection_string>'
      },
      {
        name: 'WEBSITE_CONTENTAZUREFILECONNECTIONSTRING',
        value: '<connection_string>'
      },
      {
        name: 'MY_CUSTOM_ENV_VARIABLES',
        value: 'some value'
      }
    ],
    reserved: true // The secret property - must be set to true to make it a Linux plan. Confirmed by the team who owns this API.
  }
);

The code above will execute and create the resource, but the resulting Function App won't have any configuration variables set.

From what I can tell, this code is basically the same structure used by the vscode-azurefunctions. See here for the relevant code sample in commands/createFunctionApp/FunctionAppCreateStep.ts

What am I doing wrong here?

Answer 1

I was missing the "appSettings" property on the siteConfig object. After adding that field, my Function App was created and had all of the necessary configuration fields.

const resourceGroupName = "my-resource-group";
const siteName = "my-new-function";
const serverFarmPath = "<id_from_portal>";
const serverFarmId = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Web/serverFarms/${serverFarmPath}`;

const createAppResult = await webSiteClient.webApps.beginCreateOrUpdateAndWait(
  resourceGroupName,
  siteName,
  {
    name: siteName,
    kind: 'functionapp',
    location: 'East US 2',
    serverFarmId: serverFarmId,
    clientAffinityEnabled: false,
    siteConfig: {
      appSettings: [
        {
          name: 'AzureWebJobsStorage',
          value: '<connection_string>'
        },
        {
          name: 'FUNCTIONS_EXTENSION_VERSION',
          value: '~4'
        },
        {
          name: "FUNCTIONS_WORKER_RUNTIME",
          value: "node"
        },
        {
          name: "WEBSITE_NODE_DEFAULT_VERSION",
          value: "~14"
        },
        {
          name: "APPINSIGHTS_INSTRUMENTATIONKEY",
          value: '<key>'
        },
        {
          name: 'APPLICATIONINSIGHTS_CONNECTION_STRING',
          value: '<connection_string>'
        },
        {
          name: 'WEBSITE_CONTENTAZUREFILECONNECTIONSTRING',
          value: '<connection_string>'
        },
        {
          name: 'MY_CUSTOM_ENV_VARIABLES',
          value: 'some value'
        }
      ]
    },
    reserved: true // The secret property - must be set to true to make it a Linux plan. Confirmed by the team who owns this API.
  }
);