Teams App and SPFX fetch error with local hosted Azure Function


This is really a note for me so I can find it in the future. So, future me, if you are having the following problem, you are running a local dev environment that has an SPFX application (mine was a Teams App running in Teams workbench) and a local Azure Function.

For some reason, you are calling your API, but you keep getting a fetch error, no matter what you do. You read about various people complaining about CORS errors, but you think, “Nah, it’s nothing to do with that.”

Your API gets called successfully and you step through the function but between the return and switching back to your VS Code it errors.

Well, check your local.settings.json for the following entry and add it if missing.

  "Host": {
    "LocalHttpPort": 7165,
    "CORS": "*"
  }

The real hero is Eli, who provided the fix via her blog post, thanks Eli, I will be buying you a coffee!

A way to manually kick a Azure Function Timer Trigger Function when its been deployed


Introduction

At iThink 365 we have been building a few products around the Microsoft 365 Employee Experience. These products need to refresh information about the employees and so this is done using Azure Functions as Timer Trigger functions.

Something like this

Last week, I was chatting with one of my team and I showed them how they could manually kick off the timer trigger function. They exclaimed, “Woah, I had no idea you could do that!” I asked some more of the team and they said the same thing. So, I hope you have not either.

One of the attributes on the Timer Trigger is the RunOnStartup flag and it is important and seen as one of the best practices of Azure Functions to make sure that these are switched off,. This ensures that you don’t get your Azure Function firing randomly.

However, when developers are working on these Timer Triggers you want the Timer Trigger to run as soon as you start debugging the code. Having the RunOnStartUp flag off is a pain and often they get left on so that the code runs on startup. We do not want that behaviour where the flag gets left on.

Another scenario that you want to kick off the Timer Trigger is when a new customer joins and you want their user estate to be processed as soon as they subscribe to your product.

So, we need to be able to kick off the Timer Trigger function somehow.

How do we manually kick off a Timer Trigger function?

Solution

Well, it turns out you can call the Azure Function with a special endpoint and it is this one.

Using the URL:

https://%5Byour azure function url]/admin/functions/[YourAzureFunctionTimerTriggerFunctionName]

For our timer job above it would be like this:

https://doyfunction.azurewebsites.net/admin/functions/RefreshNewStartersCachesFunction

You can kick off the Timer Job, you also need either the master key or the function key from your Azure Function.

This can be retrieved by:

  • Browse to the Azure Portal (https://portal.azure.com)
  • Find your Azure Function
  • Click on App Keys under Functions
  • Copy the master key

Once we have the Azure Function function/master key, we need to call the endpoint. To do that we:

  • Using Postman
  • Create a request
  • Change the HTTP verb from GET to POST
  • Use your URL for your Trigger Function
  • Add a new header called
    • x-functions-key
  • use the function or master key as the value.
  • Click Send
  • You will receive an Accepted 202 response back if the request was successful.

That is it your timer job will have started.

An example is here:

If you receive an HTTP 404, and you are using an Application Setting to define your Timer Trigger schedule then check you have a valid value for the Application Setting in your configuration.

Hope you find this useful!