sp-dev-fx-webparts/samples/react-azfunc-vimeo

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

• SharePoint Framework Developer
• Office 365 developer tenant

Contributors

• 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 artifacts
• dist/* - the bundled script, along with other resources
• deploy/* - 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.