SPFX Consume Northwind Microsoft database from Azure using a Function App

Summary

This Webpart consume an anonymous Function App from an HTTP Triger using the templates from the Northwind Microsoft DBs You must create a database in azure and run the scripts

Used SharePoint Framework Version

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Get your own free development tenant by subscribing to Microsoft 365 developer program

Solution

Solution	Author(s)
react-azurefunction-northwind	Joao Livio @jlivio

Version history

Version	Date	Comments
1.0	August 15, 2022	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

---

Minimal Path to Awesome

• Clone this repository
• Ensure that you are at the solution folder
• in the command-line run:
  • npm install
  • gulp clean
  • gulp build serve

Features

• Consume a Function app from SQL Server
• No Authentication is active, only the url code for the Function, must change
• Uses react controls (Listview)

References

• Go and create a database in Azure
• Create your first Function
• Microsoft 365 Patterns and Practices

Function Code

• Code for your Function

Suggestion

• Use a Serveless Database
• Use a Pay as You Go Model in your function
• Choose Linux as your App Service, "can" save some money
• In Production use Key Vault for your Connection String

Secure your Function with AAD

• Securing Azure Functions
• Configure your App Service or Azure Functions app to use Azure AD login

aadHttpClientFactory

• Connect to Azure AD applications using the AadHttpClient