Teams Toolkit makes creating Teams Tabs/Azure applications easier.
Add Teams Toolkit Extension to Visual Studio Code
Click the Teams Toolkit to open Wizard
Configure Quick Start items
Sign-in to M365 account
Sign-in to Azure
Click Create New Project link
Start from a sample
Select the Todo List with backend on Azure sample
Download the sample code from Github
Notice that the sample code is a work in progress
Open Command Palette
Use Team: Provision in the Cloud command to configure Azure
Enter a hard to guess database administrator account name
Configures Azure Services
Provisioning progress
Newly created resource group
Open SQL Database to copy "Server name"
Open Azure Data Studio and enter SQL Server connection details
Ensure that Azure firewall rule is added
Use a Query tab in Azure Data Studio to create the Todo list
Use Teams: Deploy to the Cloud command
Deploy the React code and the Azure Function (API)
Use Teams: Build Teams Package command
Use Teams: Publish to Teams command
Install to organization
Open Microsoft Teams admin center. Locate app "pending approval"
Publish app
Click the Publish button
App has been added to Microsoft Teams
Use Add to a team button
Select a Team (click Set up a tab)
View tab configuration page
Welcome page click Start to progress
An extract from Tab.js
Profile.js
Login is required
An extract from Tab.js
Provide consent
If no tasks to display
An extract from Tab.js
Add task (press enter)
An extract from Tab.js
using map to render all of the tasks
An extract from Tab.js
A row has been added to the database
The function app is used to implement a REST api
index.js
Tab.js
.svg){kind=link}