Using VS Code Teams Toolkit Extension for Teams App Development
Tags: msteams, m365, vscode, tutorial
Published: 2021-07-21 22:12:08

In my previous posts related to the Microsoft Teams developer platform, I introduced a few of Teams app types and how to build your first [tabs](https://dev.to/azure/beginners-guide-to-ms-teams-development-1-tabs-4e9k/?WT.mc_id=m365-9173-timura), [bots](https://dev.to/azure/beginners-guide-to-ms-teams-development-2-bots-590m/?WT.mc_id=m365-9173-timura), and [message extensions](https://dev.to/azure/beginners-guide-to-ms-teams-development-3-messaging-action-5ejc?WT.mc_id=m365-9173-timura). These tutorials instructed you to use **App Studio** for manual configurations and minimal local setup, to focus on familiarizing you with the concept of Teams app features.

However, in this tutorial, I am showing another way to develop, using a newly introduced developer tool, called [**Teams Toolkit** (Preview)](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension&WT.mc_id=m365-35901-timura) for VS Code, which was created to help you build and deploy Teams apps with integrated identity, access to cloud storage, data from [Microsoft Graph](https://docs.microsoft.com/en-us/graph/?WT.mc_id=m365-35901-timura), and other services in Azure and M365. 

---

Before you begin, let's check if you have set up your working environment to develop on Teams. 

## 📓 Prerequisites

First, make sure if your Teams client allows you to "sideload" custom apps. Check [Enable custom Teams apps and turn on custom app uploading](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading/?WT.mc_id=m365-35901-timura) before you begin.  

Or you can sign up for [**Microsoft 365 developer program**](https://developer.microsoft.com/en-us/microsoft-365/dev-program/?WT.mc_id=m365-35901-timura), a free, renewable subscription that comes with a developer tenant sandbox and sample data pack, like mock user data!

And if you haven't using it already, get the latest version of [Visual Studio Code](https://code.visualstudio.com/download). (Earlier versions might not work with the toolkit.) 


## 🖥 Installing Teams Toolkit

Launch VS Code and now install an extension that helps you develop Teams apps.  

Select **Extensions** icon on the left Activity Bar and install the **Microsoft Teams Toolkit**. If you see two different versions of Teams, Toolkit, make sure to select the "Preview" version 2.x for this tutorial: 

![Screenshot - Find Toolkit extension in VS Code and install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oepw07irtbmr2gasa8mv.png)

### 🔧 Optional Tools

The following tools will be installed by the Teams Toolkit extension as you need. *However, if using Linux (including WSL), you need to install these tools before using*:

- [Azure Functions Core Tools](https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local/?WT.mc_id=m365-9173-timura)
- [ngrok](https://ngrok.com/download)

## 🧰 Creating New Project with Toolkit 

Select **Microsoft Teams** icon on the left Activity Bar and click **Create New Project**. At the popup, select **Create a new Teams app** : 

![Screenshot - Create a new app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhx19vq46ir3xemavuoh.png)

In the Select capabilities section, select one. For this tutorial (and for [the next tutorial](https://dev.to/azure/fetching-teams-user-info-from-microsoft-graph-with-teamsfx-sdk-301c)), let's pick **Bot**, and deselect Tab and select **OK**.

![Screenshot - Create a bot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7xaqwjpc1nb1svqvnwu.png)

In the Bot registration section, select **Create a new bot registration**:

![Screenshot - register a bot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91zqldpk9843yuxa02m5.png)

In the Programming Language section, select **JavaScript**:

![Screenshot - select JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv1o2j28xzi1pct4wsf2.png)

Select a workspace. A new folder will be created within your workspace for the project:

![Screenshot - select workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j3fwp8z8ol2m5mtblty.png)

Enter some name for your app. Press Enter to continue:

![Screenshot - enter app name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/beextn5rcy9eyxtofalq.png)

It will take some time to set it up for you.

In this setup process, the toolkit is preparing these for you:
- registering an Azure Active Directory Application within the M365 tenant
- creating an app manifest
- running API locally using Azure Functions Core Tools to support your app
- installing and setting up *ngrok*, to securely tunnel from your localhost to the Teams client

## 🤖 Running a Sample Bot Locally

Once your project is set up, take a look around and see how the template app looks like:

![Screenshot - code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqxamoak9u43z293wls0.png)

But for now, let's just build this sample app and run it locally. 

Press **F5** key to enable the debug mode. 

Alternatively, click the debug icon from the side menu:

![Screenshot - debug and run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay6zkkyuzm0q3qwlzkjx.png)

This can take up a few minutes to complete as all dependencies are downloaded and the app is built for the first time.

Once it is done, Teams web client will be automatically opened in a browser window. Install it locally by clicking **Add**:

![Screenshot - Teams app being installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgi67d55de01zpucu0fs.png)

Once the app is installed, try the bot by typing a command or pick from the menu:

![Screenshot - Teams app running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz6purzuchvxw2cloa5u.png)

### 🔏 Granting User Permissions

When you try `show` command, you should notice the app asks your permission to display your information like this:

![Screenshot - Teams app permission](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d2068p9bdq1amrntq5k.png)

and once you hit **Continue**, it will open an authorization screen:

![Alt Text - user authorization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r80t4cvr4fdxt9vyx3k.png)

So, it means that your app (and any 3rd party apps!) just cannot automatically grab a user's information without the user's consent!

---

In next tutorial, I will explain about Microsoft Graph to access user information and how you can implement it for Teams, so stay tuned 👋