6.8 KiB
Local Azure Function and SPFx Web Part Development to consume third party APIs
This sample shows how to consume third-party APIs through an Azure Functions by a Web Part. In this scenario, Vimeo is the representative third party API. This project contains two separate project folders:
- VimeoRequest - contain the Azure Function written in JavaScript
- VimeoWebPart - contain the web part consuming the local running Azure Function
Compatibility
⚠️ Important |
---|
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node. |
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility. |
Applies to
Solution
Solution | Author(s) |
---|---|
react-azfunc-vimeo | Stefan Bauer - n8d (@stfbauer) |
Version history
Version | Date | Comments |
---|---|---|
1.0 | July 24, 2018 | Initial release |
Build Azure Function
To install and run the Azure Function navigate to the folder: VimeoRequest and execute the following command.
npm install
This will install all the required NPM packages to run the Azure function
Additional Configuration Vimeo Azure Function
The folder VimeoRequest contains a Azure Function generated with the Azure Function Core Tools. The access videos stored on this platform first a new application needs to be created first. To create a new Application navigate to the following website https://developer.vimeo.com/apps/new?source=topnav After the creation of a new Application, the created AppID and Secret must get stored in the local Azure function configuration. This configuration file can be found in the root folder of the Azure Function Host and is named local.settings.json.
{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "",
"VimeoAPI": "<Enter APP ID here>",
"VimeoSecret": "<Enter App Secret here>",
"VimeoEndPoint": "https://api.vimeo.com"
}
}
A detailed step by step guide on this Azure Function can be found on the blog post: An Azure Function for a Web Part.
Run Azure Function
To run this Azure Function execute the following command from inside the VimeoRequest folder.
func start --useHttps --cert server.pfx --password 'password' --cors '*'
To check if the Azure Function is running and returns a result navigate to the following URL in your browser.
https://localhost:7071/api/Search?q=Hello%20World
Run Vimeo Web Part
To run the web part execute the following command:
git clone the repo
npm i
npm i -g gulp
gulp serve
This package produces the following:
lib/*
- intermediate-stage commonjs build artifactsdist/*
- the bundled script, along with other resourcesdeploy/*
- all resources which should be uploaded to a CDN.
Further information
- Overall Overview: A smart stupid web part for SharePoint - Part 1
- Details to Azure function implementation: An Azure Function for an smart stupid web part – Part 2
- Web Part Details: A smart stupid web part consumes a third party API through Azure Functions – Part 3
Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
You can try looking at issues related to this sample to see if anybody else is having the same issues.
You can also try looking at discussions related to this sample and see what the community is saying.
If you encounter any issues while using this sample, create a new issue.
For questions regarding this sample, create a new question.
Finally, if you have an idea for improvement, make a suggestion.
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.