Contents
data/authors/Paul Logan.json

Creating an employee self-service mobile app Pt 2

Software 438 words 3 minutes

Part 1 : “Creating a public-facing employee app using Azure SWA and Entra External ID” Part 2 : “Adding ServiceBus Function API to SWA” - this post.

Add an Azure Managed Function API

  • Enable the Azure Static Web App extension
  • Install\Enable the Azure Functions extension
  • F1 => Azure Static Web Apps: Create HTTP function => Function auth
  • Update YAML file => api_location: “./api”
  • Commit, Push and test after deployment complete (browser will show error in console due to the function’s default response being a string instead of json)
  • F1 => Azure Functions: Add New Setting => add a setting for the DB connection string (🔗)
  • F1 => Azure Functions: Download Remote Settings

ServiceBus: cd api dotnet add package Microsoft.Azure.Functions.Worker.Extensions.ServiceBus –version 5.14.1

Debugging the function within VS Code generated the following errors:

Build Error
Only one output binding is supported when using a binding assigned to ‘$return’

Solution
dotnet add package Microsoft.Azure.Functions.Worker.Sdk –version 1.16.3
Build Error
Azure.Messaging.ServiceBus: The connection string could not be parsed; either it was malformed or contains no well-known tokens.
Solution
I needed to add the ServiceBus Queue settings to the local.settings.json file. https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-service-bus-trigger?tabs=python-v2%2Cisolated-process%2Cnodejs-v4%2Cextensionv5&pivots=programming-language-csharp#attributes

Add an Azure Bring Your Own Function API

  • Azure Portal => Create a Function App, selecting the “App Service Plan” in the “Hosting options and plans” section.

You need to clear the link between the SWA and the managed function API before you can link to a new backend

  • SWA CI/CD YAML file => Change api_location from “./api” to ""
  • Azure Portal => SWA resource => APIs => Link
  • Select the function app created above
  • Remove all refernces to the default api in the VS Code project (or create a new project without the API - cleaner)

Code up the Azure Function in VS Code

I picked .Net 8 for the Function App, so I needed to (download)(https://dotnet.microsoft.com/en-us/download) the .net 8 SDK Ensure you restart your computer after installing and do so before creating the function app in VS Code. I initially ignored this advice and received multiple “The name ‘AuthorizationLevel / HttpTrigger / AuthorizationLevel / ILogger’ does not exist in the current context” build errors. “The type or namespace name ‘HttpTriggerAttribute’ could not be found”

  • Azure extension => Azure Functions icon => Deploy to function app

Azure Extension => Local Projext => Functions => Double-click “Start debugging to update this list” => Install coreclr Extension Install/Enable(Workspace) C# Extension Install/Enable(Workspace) C# Dev Kit Extension Install/Enable(Workspace) Azure Functions COre Tools Extension

SWA messaging function receives 401 error. Change public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Function, “get”, “post”)] HttpRequestData req) to public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, “get”, “post”)] HttpRequestData req)

https://stackoverflow.com/a/61220114 https://github.com/Azure/static-web-apps/issues/857#issuecomment-1658829011 https://learn.microsoft.com/en-us/answers/questions/734597/how-to-use-auth-me-reliably

Credits

SWAAzureFunction