Updates from: 07/03/2021 03:12:34
Service Microsoft Docs article Related commit history on GitHub Change details
platform Create A Bot Commands Menu https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/create-a-bot-commands-menu.md
A prerequisite to create a command menu for your bot is that you must edit an ex
![App Studio](./conversations/media/AppStudio.png)
-2. In **App Studio**, select the **Manifest editor** tab. If you do not have an existing app package, you can create or import an existing app. For more information, see [update an app package](~/tutorials/get-started-dotnet-app-studio.md#use-app-studio-to-update-the-app-package).
+2. In **App Studio**, select the **Manifest editor** tab. If you do not have an existing app package, you can create or import an existing app. For more information, see [update an app package](~/get-started/get-started-dotnet-app-studio.md#use-app-studio-to-update-the-app-package).
3. In the left pane of the **Manifest editor** and in the **Capabilities** section, select **Bots**.
platform Code Samples https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/code-samples.md
+
+ Title: App code samples
+description: Links and descriptions of sample applications for the Microsoft Teams developer platform
+localization_priority: Normal
+
+keywords: Microsoft Teams developer samples
+
+# Overview
+
+In this tutorial, you will learn how to create an app using React, Blazor, SPFx, C# or .NET, Node.js, and Yeoman Generator. You will also learn to create your first bot and messaging extension. This tutorial will take you through multiple Code Samples for Tabs, Bots, Messaging Extensions, Webhooks and Connectors, and Graph APIs that will help you to customize and configure your apps. In addition, you can also refer to the Microsoft Learn sections where you can extend the Teams developer platform capabilities by creating custom apps.
+
+## Getting started with Microsoft Learn
+
+| **Capability**| **Learn module**|
+|--|-|
+| Tabs ΓÇö embedded web experiences | [Create embedded web experiences with tabs for Microsoft Teams](/learn/modules/embedded-web-experiences/) |
+| Webhooks and connectors | [Connect web services to Microsoft Teams with webhooks and Office 365 Connectors](/learn/modules/msteams-webhooks-connectors/) |
+|Messaging extensions | [Task-oriented interactions in Microsoft Teams with messaging extensions](/learn/modules/msteams-messaging-extensions/) |
+| Task modules | [Collect input in Microsoft Teams with Task Modules](/learn/modules/msteams-task-modules/) |
+| Conversational bots | [Create interactive conversational bots for Microsoft Teams](/learn/modules/msteams-conversation-bots/) |
+
+## See also
+
+* [Create an app using React](first-app-react.md)
+* [Create an app using Blazor](first-app-blazor.md)
+* [Create an app using SPFx](first-app-spfx.md)
+* [Create an app using C# or .NET](get-started-dotnet-app-studio.md)
+* [Create an app using Node.js](get-started-nodejs-app-studio.md)
+* [Create an app using Yeoman generator](get-started-yeoman.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform First App Blazor https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-blazor.md
# Build and run your first Microsoft Teams app with Blazor
-In this tutorial, you will create a new Microsoft Teams app in .NET/Blazor that implements a simple personal app to pull information from the Microsoft Graph. (A *personal app* includes a set of tabs scoped for individual use.) During the tutorial, you will learn about the structure of a Teams app, how to run an app locally, and how to deploy the app to Azure.
+In this tutorial, you will learn how to create a new Microsoft Teams app in .NET/Blazor that implements a simple personal app to pull information from the Microsoft Graph. For example, a *personal app* includes a set of tabs for individual use. During the tutorial, you will learn about the structure of a Teams app, how to run an app locally, and how to deploy the app to Azure.
The app that is built displays basic user information for the current user. When permission is granted, the app will connect to the Microsoft Graph as the current user to get the complete profile. ## Before you begin
-Make sure your development environment is set up by installing the [prerequisites](prerequisites.md)
+Make sure your development environment is set up by installing the prerequisites.
> [!div class="nextstepaction"] > [Install prerequisites](prerequisites.md)
Use the Teams Toolkit to create your first project:
1. Select **Create a new project**.
-1. Select **Microsoft Teams App**, then press **Next**. To help you find the template, use the project type **Microsoft Teams**.
+1. Select **Microsoft Teams App**, then select **Next**. To help you find the template, use the project type **Microsoft Teams**.
-1. Give the project and solution a good name, then press **Next**.
+1. Enter a name and select **Next**.
-1. Provide the application name and company name, then press **Create**. The application name and company name are displayed to your end users.
+1. Enter the application name and company name.
-1. Your Teams app will be created within a few seconds. Once the project is created, set up single sign-on with M365:
+1. Select **Create**. The application name and company name are displayed to your end users. Your Teams app will be created within a few seconds. After the project is created, set up single sign-on with M365:
- - Select **Project** > **TeamsFx** > **Configure for SSO...**.
- - When prompted, sign in to your M365 administrator account.
+ 1. Select **Project** > **TeamsFx** > **Configure for SSO...**.
+ 1. When prompted, sign in to your M365 administrator account.
# [Command line](#tab/cli)
Use the Teams Toolkit to create your first project:
dotnet new teamsapp --shortName my-teams-app --companyName "My Company" ```
-1. Once scaffolded, configure the project for Teams deployment:
+1. After scaffolding, configure the project for Teams deployment:
``` bash teamsfx init ```
-You can now open the solution in Visual Studio for debugging.
+ You can now open the solution in Visual Studio for debugging.
You can now open the solution in Visual Studio for debugging.
If you wish to skip this section for now, you can [run your app locally](#run-your-app-locally).
-Once the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams. The project directories and files display in the Solution Explorer area of Visual Studio 2019.
+After the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams. The project directories and files display in the Solution Explorer area of Visual Studio 2019.
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-file-layout.png" alt-text="Screenshot showing app project files for a personal app in Visual Studio 2019.":::
Teams Toolkit allows you to run your app locally. This consists of several part
- A web API is hosted (via IIS Express) to assist with authentication tasks, acting as a proxy between the app and Azure Active Directory. - An app manifest is generated and exists in the Developer Portal for Teams. Teams uses the app manifest to tell connected clients where to load the app from.
-Once this is done, the app can be loaded within the Teams client. We use the Teams web client so that we can see the HTML, CSS, and JavaScript code within a standard web development environment.
+After this is done, the app can be loaded within the Teams client. We use the Teams web client so that we can see the HTML, CSS, and JavaScript code within a standard web development environment.
To build and run your app locally:
-1. From Visual Studio, press **F5** to run your application in debug mode.
+
+1. From Visual Studio Code, press the **F5** key to run your application in debug mode.
+ 1. If requested, install the self-signed SSL certificate for local debugging. :::image type="content" source="../assets/images/teams-toolkit-v2/ssl-prompt.png" alt-text="Screenshot showing how the prompt to install a SSL certificate to enable Teams to load your application from localhost."::: 1. Teams will be loaded in a web browser, and you will be prompted to sign in. If prompted to open Microsoft Teams, select Cancel to remain within the browser. Sign in with your M365 account.
-1. When prompted to install the app onto Teams, press **Add**.
-Your app will now be displayed:
+1. When prompted to install the app onto Teams, select **Add**.
+ Your app will now be displayed:
-You can do normal debugging activities as if this were any other web application (such as setting breakpoints). The app supports hot reloading. If you change any file within the project, the page will be reloaded.
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-completed-app.png" alt-text="Screenshot of the completed app":::
+
+ You can perform the debugging activities as if this were any other web application like setting breakpoints. The app supports hot reloading. If you change any file within the project, the page will be reloaded.
<!-- markdownlint-disable MD033 --> <details> <summary>Learn what happens when you run your app locally in the debugger.</summary>
-When you pressed F5, the Teams Toolkit:
+When you press the **F5** key, the Teams Toolkit:
-1. Registered your application with Azure Active Directory.
-1. Registered your application for "side loading" in Microsoft Teams.
-1. Started your application backend running locally.
-1. Started your application front-end hosted locally.
-1. Started Microsoft Teams in a web browser with a command to instruct Teams to side load the application (the URL is registered inside the application manifest).
+1. Registers your application with Azure Active Directory.
+1. Registers your application for "side loading" in Microsoft Teams.
+1. Starts your application backend running locally.
+1. Starts your application front-end hosted locally.
+1. Starts Microsoft Teams in a web browser with a command to instruct Teams to side load the application (the URL is registered inside the application manifest).
</details>
To successfully run your app in Teams, you must have a Microsoft 365 development
## Deploy your app to Azure
-Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning), then the code that makes up your app is copied into the created cloud resources.
+Deployment consists of two steps:
+
+1. Necessary cloud resources are created. This is also known as provisioning.
+1. Start coding and copy your app into the created cloud resources.
> **PREVIEW** >
Deployment consists of two steps. First, necessary cloud resources are created
## Provision and deploy your app to Azure App Service
-1. In Solution Explorer, right-click the project node and choose **Publish** (or use the **Build** > **Publish** menu item).
+1. In Solution Explorer, right-click the project node and select **Publish**. You can also use the **Build** > **Publish** menu item.
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish1.png" alt-text="Select the Publish operation on the project":::
-1. In the **Publish** window, select **Azure**. Press **Next**.
+1. In the **Publish** window, select **Azure** and selct **Next**.
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish2.png" alt-text="Select Azure as the publishing target":::
-1. Select **Azure App Service (Windows)**. Press **Next**.
+1. Select **Azure App Service (Windows)** and select **Next**.
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish3.png" alt-text="Select Azure App Service as the publishing target":::
Deployment consists of two steps. First, necessary cloud resources are created
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish4.png" alt-text="Create a new instance.":::
-1. In the **Create App Service (Windows)** dialog, the **Name**, **Subscription name**, **Resource Group**, and **Hosting Plan** entry fields are populated. If you have already got an App Service running, existing settings will be selected. You can opt to create a new resource group and hosting plan (Recommended). When ready, select **Create**.
+1. In the **Create App Service (Windows)** dialog, the **Name**, **Subscription name**, **Resource Group**, and **Hosting Plan** entry fields are populated. If you have already got an App Service running, existing settings are selected. You can opt to create a new resource group and hosting plan. When ready, select **Create**.
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish5.png" alt-text="Select hosting plan and subscription":::
Deployment consists of two steps. First, necessary cloud resources are created
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish6.png" alt-text="Select the new instance.":::
-1. Press the **Edit** (pencil) icon next to **Deployment Mode**, then select **Self-contained**.
+1. Select the **Edit** (pencil) icon next to **Deployment Mode**, and select **Self-contained**.
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish8.png" alt-text="Select self-contained deployment mode.":::
Deployment consists of two steps. First, necessary cloud resources are created
:::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish7.png" alt-text="Publish your app to app service":::
-Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser. Add `/tab` to the end of the URL to see your page.
+ Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser. Add `/tab` to the end of the URL to see your page.
-The project properties **Publish** pane shows the site URL and other details. Make a note of the site URL.
+ The project properties **Publish** pane shows the site URL and other details. Make a note of the site URL.
## Create an environment for your app
-The Developer Portal for Teams manages where the tabs for your app are loaded from with an **Environment**. To create an environment:
+The Developer Portal for Teams manages where the tabs for your app are loaded from with an **Environment**.
+
+**To create an environment:**
1. Open the [Developer Portal for Teams](https://dev.teams.microsoft.com). Sign in with your M365 administrative account.
The Developer Portal for Teams manages where the tabs for your app are loaded fr
1. Select **Create your first environment**.
-1. Enter a name for your environment, then press **Add**; for example _Production_.
+1. Enter a name for your environment and select **Add**. For example, `_Production_`.
-1. With the newly created environment selected, press **Create your first environment variable**.
+1. Select **Create your first environment variable**.
-1. Enter `azure_app_url` for the **Name**. Enter your Azure site URL (without the `https://`) as the **Value**.
+1. Enter `azure_app_url` for the **Name**. Enter your Azure site URL without the `https://` as the **Value**.
:::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments2.png" alt-text="Create environment variable":::
The Developer Portal for Teams manages where the tabs for your app are loaded fr
## Update the app manifest
-The app manifest is loading the tab from a `localhost` URL. In this section, you will adjust the app manifest to load the tab from the URL listed within the environment you just created.
+The app manifest loads the tab from a `localhost` URL. In this section, you will configure the app manifest to load the tab from the URL listed within the environment you just created.
1. From the sidebar, select **Basic information**. :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments3.png" alt-text="Select basic information":::
-1. There are several places within the manifest that list a `localhost:XXXXX` as part of a URL. Replace all occurrences with `{{azure_app_url}}` (including the curly braces).
+1. There are several places within the manifest that list a `locahost:XXXXX` as part of a URL. Replace all occurrences with `{{azure_app_url}}`, including the curly braces.
:::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments4.png" alt-text="Adjust basic information for the environment":::
-1. When complete, press **Save**.
+1. When complete, select **Save**.
1. From the sidebar, select **Capabilities**.
The app manifest is loading the tab from a `localhost` URL. In this section, yo
:::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments7.png" alt-text="Edit personal tab URLs":::
-1. Press **Update**.
+1. Select **Update**.
-1. Press **Save**.
+1. Select **Save**.
1. From the sidebar, select **Single Sign-On**.
The app manifest is loading the tab from a `localhost` URL. In this section, yo
:::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments8.png" alt-text="Edit single sign-on Application ID URI":::
-1. Press **Save**.
+1. Select **Save**.
-1. From the sidebar, press **Domains**.
+1. From the sidebar, select **Domains**.
-1. Press **Add a domain**.
+1. Select **Add a domain**.
-1. If `{{azure_app_url}}` is not listed as a valid domain, add it as a valid domain, then press **Add**.
+1. If `{{azure_app_url}}` is not listed as a valid domain, add it as a valid domain, then select **Add**.
:::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments9.png" alt-text="Add a domain":::
-You can now use the **Preview in Teams** button at the top of the page to launch your app within Teams.
+ You can now use the **Preview in Teams** option at the top of the page to launch your app within Teams.
## See also -- [Create a Teams app with React](first-app-react.md)-- [Create a Teams app as a SharePoint Web Part](first-app-spfx.md)-- [Create a conversational bot app](first-app-bot.md)-- [Create a messaging extension](first-message-extension.md)-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Create a Teams app as a SharePoint Web Part](first-app-spfx.md)
+* [Tutorials Overview](code-samples.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform First App Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-bot.md
# Build your first conversational bot for Microsoft Teams
-A bot acts as an intermediary between a Teams user and a web service. Users can chat with a bot to quickly get information, initiate workflows, or anything else your web service can do. In this tutorial, you will learn how to build, run, and deploy a Teams bot app.
+In this tutorial, you will learn how to build, run, and deploy a Teams bot app. A bot acts as an intermediary between a Teams user and a web service. Users can chat with a bot to quickly get information, initiate workflows, or anything else your web service can do.
## Before you begin
-Make sure your development environment is set up by installing the [Prerequisites](prerequisites.md)
+Make sure your development environment is set up by installing the Prerequisites.
> [!div class="nextstepaction"] > [Install Prerequisites](prerequisites.md)
Use the Teams Toolkit to create your first project:
# [Visual Studio Code](#tab/vscode) 1. Open Visual Studio code.
-1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:
+1. Select the Teams icon in the sidebar to open the Teams Toolkit.
:::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
Use the Teams Toolkit to create your first project:
:::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::
-1. On the **Select capabilities** step, select **Bot** and deselect **Tab**. Press **OK**.
+1. In the **Select capabilities** section, select **Bot**, deselect **Tab** and select **OK**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-capabilities-bot.png" alt-text="Screenshot showing how to add capabilities to your new app.":::
-1. On the **Bot registration** step, select **Create a new bot registration**.
+1. In the **Bot registration** section, select **Create a new bot registration**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-bot-registration.png" alt-text="Select create a new bot registration":::
-1. On the **Programming Language** step, select **JavaScript**.
+1. In the **Programming Language** section, select **JavaScript**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-programming-languages.png" alt-text="Screenshot showing how to select the programming language."::: 1. Select a workspace folder. A folder will be created within your workspace folder for the project you are creating.
-1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must contain only alphanumeric characters. Press **Enter** to continue.
Your Teams app will be created within a few seconds.
teamsfx new
The CLI walks through some questions to create the project. Each question will tell you how to answer it (for example, to use arrow keys to select an option). When you have answered the question, confirm your choice by pressing **Enter**. 1. Select **Create a new Teams app**.
-1. Select the **Bot** capability and deselect the **Tab** capability.
+1. Select **Bot** and deselect **Tab**.
1. Select **Create a new bot registration**. 1. Select **JavaScript** as the programming language. 1. Press **Enter** to select the default workspace folder. 1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters.
-Once all the questions have been answered, your project will be created.
+After all the questions have been answered, your project is created.
Teams Toolkit allows you to host your app locally. To do this:
To build and run your app locally:
-1. From Visual Studio Code, press **F5** to run your application in debug mode.
+1. From Visual Studio Code, press the **F5** key to run your application in debug mode.
> When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens when the build is complete. This can take 3-5 minutes to complete.
To build and run your app locally:
:::image type="content" source="../assets/images/teams-toolkit-v2/launch-web-browser-and-pick-webapp.png" alt-text="Screenshot showing how to pick the web version of teams when launched"::: 1. You may be prompted to sign in. If so, sign in with your M365 account.
-1. When prompted to install the app onto Teams, press **Add**.
+1. When prompted to install the app onto Teams, select **Add**.
-Once the app is loaded, you will be taken directly to a chat session with the bot. You can type `intro` to show an introduction card, and `show` to show your details from Microsoft Graph. (This will require an additional permissions approval).
+ After the app is loaded, you will be taken directly to a chat session with the bot. You can type `intro` to show an introduction card, and `show` to show your details from Microsoft Graph. (This will require an additional permissions approval).
-Debugging works as you normally would expect - try it yourself! Open the `bot/dialogs/rootDialog.js` file and locate the `triggerCommand(...)` method. Set a breakpoint on the default case. Then type some text.
+ Debugging works as you normally would expect - try it yourself! Open the `bot/dialogs/rootDialog.js` file and locate the `triggerCommand(...)` method. Set a breakpoint on the default case. Then type some text.
<!-- markdownlint-disable MD033 --> <details> <summary>Learn what happens when you run your app locally in the debugger.</summary>
-When you pressed F5, the Teams Toolkit:
+When you press the **F5** key, the Teams Toolkit:
-1. Registered your application with Azure Active Directory.
-1. Registered your application for "side loading" in Microsoft Teams.
-1. Started your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
-1. Started an ngrok tunnel so Teams can communicate with your app.
-1. Started Microsoft Teams with a command to instruct Teams to sideload the application.
+1. Registers your application with Azure Active Directory.
+1. Registers your application for "side loading" in Microsoft Teams.
+1. Starts your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
+1. Starts an ngrok tunnel so Teams can communicate with your app.
+1. Starts Microsoft Teams with a command to instruct Teams to sideload the application.
</details>
Before deployment, the application has been running locally:
1. The backend runs using _Azure Functions Core Tools_. 1. The application HTTP endpoint, where Microsoft Teams loads the application, runs locally.
-Deployment involves provisioning resources on an active Azure subscription and deploying (uploading) the backend and frontend code for the application to Azure. The backend uses a variety of Azure services, including Azure App Service and Azure Bot Service.
+ Deployment involves provisioning resources on an active Azure subscription and deploying (uploading) the backend and frontend code for the application to Azure. The backend uses a variety of Azure services, including Azure App Service and Azure Bot Service.
</details> ## See also -- [Create a Teams app with React](first-app-react.md)-- [Create a Teams app with Blazor](first-app-blazor.md)-- [Create a Teams app as a SharePoint Web Part](first-app-spfx.md) (Azure not required)-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Create a messaging extension](first-message-extension.md)
+* [Tutorials Overview](code-samples.md)
+* [Create an app using React](first-app-react.md)
+* [Create an app using Blazor](first-app-blazor.md)
+* [Create an app using SPFx](first-app-spfx.md)
+* [Create an app using C# or .NET](get-started-dotnet-app-studio.md)
+* [Create an app using Node.js](get-started-nodejs-app-studio.md)
+* [Create an app using Yeoman generator](get-started-yeoman.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform First App React https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-react.md
# Build and run your first Microsoft Teams app with React
-In this tutorial, you will create a new Microsoft Teams app in React that implements a simple personal app to pull information from the Microsoft Graph. For example, a *personal app* includes a set of tabs scoped for individual use. During the tutorial, you will learn about the structure of a Teams app, how to run an app locally, and how to deploy the app to Azure.
+In this tutorial, you will learn how to create a new Microsoft Teams app in React that implements a simple personal app to pull information from the Microsoft Graph. For example, a *personal app* includes a set of tabs for individual use. During the tutorial, you will learn about the structure of a Teams app, how to run an app locally, and how to deploy the app to Azure.
The app that is built displays basic user information for the current user. When permission is granted, the app will connect to the Microsoft Graph as the current user to get the complete profile. ## Before you begin
-Make sure your development environment is set up by installing the [prerequisites](prerequisites.md).
+Make sure your development environment is set up by installing the prerequisites.
> [!div class="nextstepaction"] > [Install prerequisites](prerequisites.md)
Use the Teams Toolkit to create your first project:
# [Visual Studio Code](#tab/vscode) 1. Open Visual Studio code.
-1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:
+1. Open the Teams Toolkit and select the Teams icon in the sidebar:
:::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
Use the Teams Toolkit to create your first project:
:::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::
-1. On the **Select capabilities** step, the **Tab** capability is already selected. Press **OK**.
+1. In the **Select capabilities** section, varify that **Tab** is selected and select **OK**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-capabilities.png" alt-text="Screenshot showing how to add capabilities to your new app.":::
-1. On the **Frontend hosting type** step, select **Azure**.
+1. In the **Frontend hosting type** section, select **Azure**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-hosting.png" alt-text="Screenshot showing how to select hosting for your new app.":::
-1. On the **Cloud resources** step, press **OK**. We do not need additional cloud resources for this tutorial.
+1. In the **Cloud resources** section, select **OK**. We do not need additional cloud resources for this tutorial.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-cloud-resources.png" alt-text="Screenshot showing how to add cloud resources for your new app.":::
-1. On the **Programming Language** step, select **JavaScript**.
+1. In the **Programming Language** section, select **JavaScript**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-programming-languages.png" alt-text="Screenshot showing how to select the programming language.":::
Use the Teams Toolkit to create your first project:
1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
-Your Teams app is created within a few seconds.
+ Your Teams app is created within a few seconds.
# [Command line](#tab/cli)
teamsfx new
The CLI walks through some questions to create the project. Each question will tell you how to answer it, for example, use arrow keys to select an option. When you have answered the question, confirm your choice by pressing **Enter**. 1. Select **Create a new Teams app**.
-1. Choose the **Tab** capability.
-1. Select **Azure** frontend hosting.
-1. Do not select any cloud resources.
+1. Select the **Tab** capability.
+1. Select **Azure** frontend hosting. Do not select any cloud resources.
1. Select **JavaScript** as the programming language. 1. Press **Enter** to select the default workspace folder. 1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters.
-Once all the questions have been answered, your project is created.
+ After all the questions have been answered, your project is created.
Once all the questions have been answered, your project is created.
If you wish to skip this section for now, you can [run your app locally](#run-your-app-locally).
-Once the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams. The project directories and files display in the Explorer area of Visual Studio Code.
+After the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams. The project directories and files display in the Explorer area of Visual Studio Code.
:::image type="content" source="../assets/images/teams-toolkit-v2/react-app-project.png" alt-text="Screenshot showing app project files for a personal app in Visual Studio Code.":::
Teams Toolkit allows you to run your app locally. This consists of several part
- The HTML, CSS, and JavaScript resources that make up the front end of the app are hosted on a local service. It can be accessed at `https://localhost:3000`. - An app manifest is generated and exists in the Developer Portal for Teams. Teams uses the app manifest to tell connected clients where to load the app from.
-Once this is done, the app can be loaded within the Teams client. We use the Teams web client so that we can see the HTML, CSS, and JavaScript code within a standard web development environment.
+After this is done, the app can be loaded within the Teams client. We use the Teams web client so that we can see the HTML, CSS, and JavaScript code within a standard web development environment.
### Build and run your app locally in Visual Studio Code
To build and run your app locally:
:::image type="content" source="../assets/images/teams-toolkit-v2/launch-web-browser-and-pick-webapp.png" alt-text="Screenshot showing how to pick the web version of teams when launched":::
-1. You may be prompted to sign in. If so, sign in with your M365 account.
+1. Sign in with your M365 account when prompted.
1. When prompted to install the app onto Teams, press **Add**. Your app is now displayed:
You can do normal debugging activities as if this were any other web application
<details> <summary>Learn what happens when you run your app locally in the debugger.</summary>
-When you pressed F5, the Teams Toolkit:
+When you press the **F5** key, the Teams Toolkit:
-1. Registered your application with Azure Active Directory.
-1. *Sideloaded* your app in Teams.
-1. Started your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
-1. Started your application front-end hosted locally.
-1. Started Microsoft Teams in a web browser with a command to instruct Teams to side load the application from `https://localhost:3000/tab`. This is the URL registered in the application manifest.
+* Registers your application with Azure Active Directory.
+* *Sideloads* your app in Teams.
+* Starts your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
+* Starts your application front-end hosted locally.
+* Starts Microsoft Teams in a web browser with a command to instruct Teams to side load the application from `https://localhost:3000/tab`. This is the URL registered in the application manifest.
</details>
To successfully run your app in Teams, you must have a Teams account that allows
Before deployment, the application has been running locally:
-1. The backend runs using **Azure Functions Core Tools**.
-1. The application HTTP endpoint, where Microsoft Teams loads the application, runs locally.
+* The backend runs using **Azure Functions Core Tools**.
+* The application HTTP endpoint, where Microsoft Teams loads the application, runs locally.
Deployment involves provisioning resources on an active Azure subscription and deploying or uploading the backend and frontend code for the application to Azure.
-1. The backend if configured uses a variety of Azure services, including Azure App Service and Azure Storage.
-1. The frontend application will be deployed to an Azure Storage account configured for static web hosting.
+* The backend if configured uses a variety of Azure services, including Azure App Service and Azure Storage.
+* The frontend application will be deployed to an Azure Storage account configured for static web hosting.
</details> ## See also -- [Create a Teams app with Blazor](first-app-blazor.md)-- [Create a Teams app as a SharePoint Web Part](first-app-spfx.md) (Azure not required)-- [Create a conversational bot app](first-app-bot.md)-- [Create a messaging extension](first-message-extension.md)-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Create a Teams app with Blazor](first-app-blazor.md)
+* [Tutorials Overview](code-samples.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform First App Spfx https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-spfx.md
# Build and run your first Microsoft Teams app with SharePoint Framework (SPFx)
-In this tutorial, you will create a new Microsoft Teams app in SharePoint Framework (SPFx) that implements a simple personal app. (A *personal app* includes a set of tabs scoped for individual use.) During the tutorial, you will learn about the structure of a Teams app, how to run the app locally, and how to deploy the app to SharePoint.
+In this tutorial, you will learn how to create a new Microsoft Teams app in SharePoint Framework SPFx that implements a simple personal app. For example, a *personal app* includes a set of tabs for individual use. During the tutorial, you will learn about the structure of a Teams app, how to run an app locally, and how to deploy the app to SharePoint.
## Before you begin
-Make sure your development environment is set up by installing the [prerequisites](prerequisites.md)
+Make sure your development environment is set up by installing the prerequisites.
> [!div class="nextstepaction"] > [Install prerequisites](prerequisites.md)
Use the Teams Toolkit to create your first project:
# [Visual Studio Code](#tab/vscode) 1. Open Visual Studio code.
-1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:
+1. Select the Teams icon in the sidebar to open the Teams Toolkit.
:::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
Use the Teams Toolkit to create your first project:
:::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::
-1. On the **Select capabilities** step, the **Tab** capability will already be selected. Press **OK**.
+1. In the **Select capabilities** section, select **Tab** and select **OK**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-capabilities.png" alt-text="Screenshot showing how to add capabilities to your new app.":::
-1. On the **Frontend hosting type** step, select **SharePoint Framework (SPFx)**.
+1. In the **Frontend hosting type** section, select **SharePoint Framework (SPFx)**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-hosting.png" alt-text="Screenshot showing how to select hosting for your new app.":::
-1. On the **Framework** step, select **React**.
+1. In the **Framework** section, select **React**.
:::image type="content" source="../assets/images/teams-toolkit-v2/spfx-which-framework.png" alt-text="Select Framework":::
Use the Teams Toolkit to create your first project:
1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
-Your Teams app will be created within a few seconds.
+ Your Teams app will be created within a few seconds.
# [Command line](#tab/cli)
teamsfx new
The CLI walks through some questions to create the project. Each question will tell you how to answer it (for example, to use arrow keys to select an option). When you have answered the question, confirm your choice by pressing **Enter**. 1. Select **Create a new Teams app**.
-1. Choose the **Tab** capability.
+1. Select **Tab**.
1. Select **SharePoint Framework (SPFx)** frontend hosting. 1. Select **React** framework. 1. Press **Enter** for the **Webpart Name**.
The CLI walks through some questions to create the project. Each question will
1. Press **Enter** to select the default workspace folder. 1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters.
-Once all the questions have been answered, your project will be created.
+ After all the questions have been answered, your project will be created.
Once all the questions have been answered, your project will be created.
If you wish to skip this section for now, you can [run your app locally](#run-your-app-locally).
-Once the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams that is hosted within the SharePoint Framework. The project directories and files display in the Explorer area of Visual Studio Code.
+After the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams that is hosted within the SharePoint Framework. The project directories and files display in the Explorer area of Visual Studio Code.
:::image type="content" source="../assets/images/teams-toolkit-v2/app-project-files-spfx.png" alt-text="Screenshot showing app project files for a personal app in Visual Studio Code.":::
Teams Toolkit allows you to host your app locally and run it through the [ShareP
To build and run your app locally:
-1. From Visual Studio Code, press **F5**.
+1. From Visual Studio Code, press the **F5** key.
:::image type="content" source="../assets/images/teams-toolkit-v2/spfx-debug-local.png" alt-text="Screenshot showing how to start an SPFx app in a local workbench."::: > [!NOTE] > When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens and loads the SharePoint Workbench when the build is complete. This can take 3-5 minutes to complete.
- Once the SharePoint Workbench is loaded.
+ After the SharePoint Workbench is loaded.
>[!NOTE] > The Toolkit will prompt you to install a local certificate if needed. This certificate allows Teams to load your application from `https://localhost`. Select yes when the following dialog appears: :::image type="content" source="../assets/images/teams-toolkit-v2/ssl-prompt.png" alt-text="Screenshot showing how the prompt to install a SSL certificate to enable Teams to load your application from localhost.":::
-1. Press one of the **Add Webpart** (+) icons to add your webpart.
+1. Select **Add Webpart +** icons to add your webpart.
:::image type="content" source="../assets/images/teams-toolkit-v2/spfx-workbench-addpart.png" alt-text="Screenshot showing the SPFx workbench running with the popup to add a webpart showing.":::
-1. Choose your webpart from the menu.
+1. Select your webpart from the menu.
:::image type="content" source="../assets/images/teams-toolkit-v2/spfx-workbench-addpart2.png" alt-text="Screenshot showing the SPFx workbench running with the popup to add a webpart selection.":::
-Your app should now be running. You can do normal debugging activities as if this were any other SPFx webpart (such as setting breakpoints).
+ Your app should now be running. You can do normal debugging activities as if this were any other SPFx webpart (such as setting breakpoints).
-> [!TIP]
-> Try placing breakpoints in the render method of `SPFx/src/webparts/{webpart}/{webpart}.ts` and reloading the browser window. VS Code will stop on breakpoints in your code.
+ > [!TIP]
+ > Try placing breakpoints in the render method of `SPFx/src/webparts/{webpart}/{webpart}.ts` and reloading the browser window. VS Code will stop on breakpoints in your code.
## Deploy your app to SharePoint
Ensure a SharePoint App Catalog exists in your deployment. If one does not exis
:::image type="content" source="../assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands":::
-1. You can monitor the progress by watching the dialogs in the bottom right corner. After a few seconds, you will see the following notice:
+ You can monitor the progress by watching the dialogs in the bottom right corner. After a few seconds, you will see the following notice:
:::image type="content" source="../assets/images/teams-toolkit-v2/provision-complete.png" alt-text="Screenshot showing the provisioning complete dialog.":::
-1. Once provisioning is complete, select **Deploy to the cloud**.
+1. After provisioning is complete, select **Deploy to the cloud**.
-1. Currently, automated deployment is not available. A dialog will pop up prompting you to build and deploy manually. Press **Build SharePoint Package**.
+1. Currently, automated deployment is not available. A dialog will pop up prompting you to build and deploy manually. Select **Build SharePoint Package**.
:::image type="content" source="../assets/images/teams-toolkit-v2/build-sharepoint-package.png" alt-text="Screenshot for the Build Sharepoint Package dialog":::
The SharePoint package is located in `SPFx/sharepoint/solution` within your proj
1. Log into the M365 Admin Console, then navigate to the SharePoint App Catalog.
- - Open `https://admin.microsoft.com/AdminPortal/Home`.
- - Under **Admin centers**, select the **SharePoint** admin center.
- - Select **More features** from the sidebar menu.
- - Press **Open** under **Apps**.
- - Select **App Catalog**.
+ 1. Open `https://admin.microsoft.com/AdminPortal/Home`.
+ 1. Under **Admin centers**, select the **SharePoint** admin center.
+ 1. Select **More features** from the sidebar menu.
+ 1. Press **Open** under **Apps**.
+ 1. Select **App Catalog**.
1. Select **Distribute apps for SharePoint**.
The SharePoint package is located in `SPFx/sharepoint/solution` within your proj
1. Select **Upload**.
-1. Press **Choose File**.
+1. Select **Choose File**.
-1. Locate your `{project}.sppkg` file, located in the `SPFx/sharepoint/solution` folder within your project. Press **Open**.
+1. Locate your `{project}.sppkg` file in the `SPFx/sharepoint/solution` folder within your project. Select **Open**.
-1. Press **OK**.
+1. Select **OK**.
-1. The SharePoint deployment process will automatically start. Ensure **Make this solution available to all sites in the organization** is checked, then press **Deploy**.
+1. The SharePoint deployment process will automatically start. Verify that **Make this solution available to all sites in the organization** is selected. Then select **Deploy**.
1. Select the **FILES** tab. :::image type="content" source="../assets/images/teams-toolkit-v2/spfx-appcatalog-filestab.png" alt-text="Select the files tab in the SharePoint App Catalog.":::
-1. select the package you deployed, then press **Sync to Teams** in the ribbon.
+1. select the package you deployed, then select **Sync to Teams** from the upper right corner.
> [!Note] > The Sync to Teams process can take a couple of minutes. You will see a message on the right-hand side of the browser indicating that the app has successfully synchronized to Teams.
-Open the Teams application (or sign in at `https://teams.microsoft.com`). Press the triple-dot on the sidebar, then select **All apps**. The app will be placed in the **Apps built for your org** category. You can add the app from there.
+ Open the Teams application (or sign in at `https://teams.microsoft.com`). Press the triple-dot on the sidebar, then select **All apps**. The app will be placed in the **Apps built for your org** category. You can add the app from there.
+ :::image type="content" source="../assets/images/teams-toolkit-v2/spfx-app-in-teams.png" alt-text="Screenshot showing the app within Teams":::
## See also -- [Create a Teams app with React](first-app-react.md)-- [Create a Teams app with Blazor](first-app-blazor.md)-- [Create a messaging extension](first-message-extension.md)-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Create a conversational bot app](first-app-bot.md)
+* [Tutorials Overview](code-samples.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform First Message Extension https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-message-extension.md
# Build and run your first messaging extension for Microsoft Teams
+In this tutorial, you will learn how to create a *search command* to search for external data and insert the results into a message.
+ There are two types of Teams **messaging extensions**: - [Search commands](../messaging-extensions/how-to/search-commands/define-search-command.md) allow you to search external systems and insert the results of that search into a message in the form of a card. - [Action commands](../messaging-extensions/how-to/action-commands/define-action-command.md) allow you present your users with a modal popup to collect or display information, then process their interaction and send information back to Teams.
-In this tutorial, you will create a *search command* to search for external data and insert the results into a message.
- ## Before you begin
-Make sure your development environment is set up by installing the [Prerequisites](prerequisites.md)
+Make sure your development environment is set up by installing the Prerequisites.
> [!div class="nextstepaction"] > [Install Prerequisites](prerequisites.md)
Use the Teams Toolkit to create your first project:
# [Visual Studio Code](#tab/vscode) 1. Open Visual Studio Code.
-1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:
+1. Select the Teams icon in the sidebar to open the Teams Toolkit.
:::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
Use the Teams Toolkit to create your first project:
:::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::
-1. On the **Select capabilities** step, select **Message Extension** and deselect **Tab**. Press **OK**.
+1. In the **Select capabilities** section, select **Message Extension**, deselect **Tab** and select **OK**.
:::image type="content" source="../assets/images/teams-toolkit-v2/msgextn-create-project-capabilities.png" alt-text="Screenshot showing how to add capabilities to your new app.":::
-1. On the **Bot registration** step, select **Create a new bot registration**.
+1. In the **Bot registration** section, select **Create a new bot registration**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-bot-registration.png" alt-text="Select create a new bot registration"::: > [!NOTE] > Messaging extensions rely on bots to provide a dialog between the user and your code.
-1. On the **Programming Language** step, select **JavaScript**.
+1. In the **Programming Language** section, select **JavaScript**.
:::image type="content" source="../assets/images/teams-toolkit-v2/create-project-programming-languages.png" alt-text="Screenshot showing how to select the programming language.":::
Use the Teams Toolkit to create your first project:
1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
-Your Teams app will be created within a few seconds.
+ Your Teams app will be created within a few seconds.
# [Command line](#tab/cli)
teamsfx new
The CLI walks through some questions to create the project. Each question will tell you how to answer it (for example, to use arrow keys to select an option). When you have answered the question, confirm your choice by pressing **Enter**. 1. Select **Create a new Teams app**.
-1. Select the **Message Extension** capability and deselect the **Tab** capability.
+1. Select the **Message Extension** and deselect **Tab**.
1. Select **Create a new bot registration**. 1. Select **JavaScript** as the programming language. 1. Press **Enter** to select the default workspace folder. 1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters.
-Once all the questions have been answered, your project will be created.
+ After all the questions have been answered, your project is created.
Teams Toolkit allows you to host your app locally. To do this:
To build and run your app locally:
-1. From Visual Studio Code, press **F5** to run your application in debug mode.
+1. From Visual Studio Code, press the **F5** key to run your application in debug mode.
> When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens when the build is complete. This can take 3-5 minutes to complete. 1. Teams will be loaded in a web browser, and you will be prompted to sign in. If prompted to open Microsoft Teams, select Cancel to remain within the browser. Sign in with your M365 account.
-1. Press **Add** to add the app to your account.
+1. Select **Add** to add the app to your account.
-Once the app is loaded, you will be taken directly to a search dialog:
+ After the app is loaded, you will be taken directly to a search dialog:
+ :::image type="content" source="../assets/images/teams-toolkit-v2/msgextn-completed-app.png" alt-text="Your Search-based messaging extension in action":::
-Type some text in the search box, then select one of the options. An adaptive card will be added to your input box.
+ Type some text in the search box, then select one of the options. An adaptive card will be added to your input box.
<!-- markdownlint-disable MD033 --> <details> <summary>Learn what happens when you run your app locally in the debugger.</summary>
-When you pressed F5, the Teams Toolkit:
+When you press the **F5** key, the Teams Toolkit:
-1. Registered your application with Azure Active Directory.
-1. Registered your application for "side loading" in Microsoft Teams.
-1. Started your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
-1. Started an ngrok tunnel so Teams can communicate with your app.
-1. Started Microsoft Teams with a command to instruct Teams to sideload the application.
+1. Registers your application with Azure Active Directory.
+1. Registers your application for "side loading" in Microsoft Teams.
+1. Starts your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
+1. Starts an ngrok tunnel so Teams can communicate with your app.
+1. Starts Microsoft Teams with a command to instruct Teams to sideload the application.
</details>
The Teams Search Auth Config for sample projects on GitHub, demonstrate how to c
## See also -- [Create a Teams app with React](first-app-react.md)-- [Create a Teams app with Blazor](first-app-blazor.md)-- [Create a Teams app as a SharePoint Web Part](first-app-spfx.md) (Azure not required)-- [Create a conversation bot](first-app-bot.md)
+* [Tutorials Overview](code-samples.md)
+* [Create an app using React](first-app-react.md)
+* [Create an app using Blazor](first-app-blazor.md)
+* [Create an app using SPFx](first-app-spfx.md)
+* [Create an app using C# or .NET](get-started-dotnet-app-studio.md)
+* [Create an app using Node.js](get-started-nodejs-app-studio.md)
+* [Create an app using Yeoman generator](get-started-yeoman.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform Get Started Dotnet App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/get-started-dotnet-app-studio.md
+
+ Title: Tutorial - Create your first app using C#
+description: Learn how to get started building Microsoft Teams apps with C# or .NET.
+keywords: getting started .net c# csharp
+
+localization_priority: Normal
+ Last updated : 11/09/2018++
+# Build your first Teams app using C#
+
+In this tutorial, you will learn how to build your very first Microsoft Teams app using .NET or C#. It also walks you through the steps to:
+
+1. [Prepare your environment](#prepare-your-environment)
+1. [Get prerequisites](#GetPrerequisites)
+1. [Download the sample](#DownloadSample)
+1. [Build and run the sample](#BuildRun)
+1. [Host the sample app](#hostsample)
+1. [Update the credentials for your hosted app](#updatecredentials)
+1. [Configure the app tab](#configureapptab)
+
+<a name="prepare-your-environment"></a>
+
+<a name="GetPrerequisites"></a>
+
+## Get prerequisites
+
+To complete this tutorial, you need to install the following tools:
+
+- [Install Git](https://git-scm.com/downloads)
+- [Install Visual Studio](https://www.visualstudio.com/downloads/)
+
+You can install the free community edition of Visual Studio. During installation, if there is an option to add `git` to the path, select it. In a terminal window, run the following command to verify your `git` installation:
+
+```bash
+$ git --version
+git version 2.17.1.windows.2
+
+```
+
+> [!NOTE]
+> Use a suitable terminal window on your platform. These examples use Git Bash but can be run on most platforms.
+
+Open the latest version of Visual Studio and install any updates.
+
+You can use the same terminal window to run the commands in this tutorial.
+
+<a name="DownloadSample"></a>
+
+## Download the sample
+
+You can get started with a simple [Hello, World!](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-hello-world/csharp) sample in C#. In a terminal window, run the following command to clone the sample repository to your computer:
+
+```bash
+git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
+```
+
+> [!TIP]
+> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/Microsoft-Teams-Samples) to modify and save your changes to GitHub.
+
+<a name="BuildRun"></a>
+
+## Build and run the sample
+
+You can build and run the smaple after it is cloned.
+
+**To build and run the cloned sample**
+
+1. Open the solution file **Microsoft.Teams.Samples.HelloWorld.sln** from the **Microsoft-Teams-Samples/samples/app-hello-world/csharp** directory of the sample.
+1. Select **Build Solution** from the **Build** menu.
+1. Select the **F5** key, or select **Start Debugging** from the **Debug** menu to run the sample.
+
+ When the app starts, a browser window opens with the root of the app launched. You can go to the following URLs to verify that all the app URLs are loading:
+
+ - `https://localhost:44327/`
+ - `https://localhost:44327/hello`
+ - `https://localhost:44327/first`
+ - `https://localhost:44327/second`
+
+ > [!Note]
+ > If you receive an error `Could not find a part of the path … bin\roslyn\csc.exe`, update the package with the command `Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r`. For more information, see [this question on Stack Overflow](https://stackoverflow.com/questions/32780315).
+
+ <a name="hostsample"></a>
+ ## Deploy your sample app
+
+ Apps in Microsoft Teams are web applications that provide one or more capabilities. For the Teams platform to load your app, your app must be available on the internet. To do this, you need to host your app. You can either host it in Microsoft Azure for free or create a tunnel to the local process on your computer using `ngrok`. After you host your app, make a note of its root URL, such as `https://yourteamsapp.ngrok.io` or `https://yourteamsapp.azurewebsites.net`.
+
+### Tunnel using ngrok
+
+For quick testing, you can run the app on your computer and create a tunnel to it through a web endpoint. [`ngrok`](https://ngrok.com) is a free tool with which you can get a web address, such as `https://d0ac14a5.ngrok.io`. You can [download and install](https://ngrok.com/download) ngrok and add it to a location in your `PATH`.
+
+After you install `ngrok`, open a new terminal window and run the following command to create a tunnel:
+
+```bash
+ngrok http 44327 -host-header=localhost:44327
+```
+
+`Ngrok` responds to requests from the internet and routes them to your app running on port 44327.
+
+**To verify the response**
+
+1. Open your browser and go to `https://d0ac14a5.ngrok.io/hello`. This will load your app's Hello page.
+1. Instead of the URL mentioned in Step 1, use the forwarding address displayed by `ngrok` in your console session.
+ > [!NOTE]
+ > If you have used a different port in the [build and run](#build-and-run-the-sample) step, ensure you use the same port number to setup the `ngrok` tunnel.
+ > [!TIP]
+ > It is a good idea to run `ngrok` in a different terminal window. This is done to keep `ngrok` from running without interfering with the app. You have to stop, rebuild, and rerun the app. The `ngrok` session provides useful debugging information in this window.
+
+ The app is only available during the current session on your computer. If the machine is shut down or goes to sleep, the service is no longer available. Remember this when you share the app for testing to other users. If you have to restart the service, the app returns a new address and you must update every location that uses that address. The paid version of `ngrok` does not have this limitation.
+
+### Host in Azure
+
+Microsoft Azure hosts your .NET application on a free tier using shared infrastructure. This is sufficient to run the `Hello World` sample. For more information, see [creating a new free Azure account](https://azure.microsoft.com/free/).
+
+Visual Studio has built-in support for app deployment to different providers, including Azure:
+
+<img width="530px" alt="Visual Studio" src="~/assets/images/get-started/publishtoazure1.png"/>
+
+**Update the app package**
+
+# [App Studio](#tab/AS)
++
+# [Developer Portal](#tab/DP)
+
+**To install Developer Portal (preview) in Teams**
++
+1. Select the **Apps** icon at the bottom of the left-hand bar, and search for **Developer Portal**.
+
+ <img width="430px" alt="Screenshot of TDP" src="~/assets/images/Screen1.png"/>
+
+1. Select **Developer Portal** and select **Open**.
+
+ <img width="430px" alt="Screenshot of TDP Open" src="~/assets/images/screen2.png"/>
+
+1. Select the Apps tab and select **Import an existing app**.
+
+ <img width="430px" alt="Screenshot of import app in tdp" src="~/assets/images/screen3.png"/>
+
+1. Select **Hello World** and select **Import**. The **Hello World** app is imported in Developer Portal.
+
+ You can configure your app using the Teams Developer Portal. The Manifest is found under Distribute. You can use the Manifest to configure capabilities, required resources, and other important attributes for your app. For more details on how to configure your app using Developer Portal, see [Teams Developer Portal](../concepts/build-and-test/teams-developer-portal.md).
+
+ <img width="430px" alt="Screenshot of configure tdp" src="~/assets/images/Screen4.png"/>
++
+<a name="updatecredentials"></a>
+## Update the credentials for your hosted app
+
+The sample app requires the environment variables to be set to the values that you saved in the text file.
+
+**To update the credentials for your hosted app**
+
+1. Open the `appsettings.json` file.
+1. Update the **MicrosoftAppId** value with your bot ID that you saved in the text file.
+1. Update the **MicrosoftAppPassword** with the bot password that you saved.
+
+ <img width="560px" alt="Setting the keys" src="~/assets/images/get-started/get-started-net-azure-add-keys.png"/>
+
+ After these changes are made, rebuild the app. If you are using ngrok, run the app locally, and if you are hosting in Azure, redeploy the app.
+
+<a name="configureapptab"></a>
+## Configure the app tab
+
+After you have installed the app into teams, you must configure it to display the content.
+
+**To configure the app tab**
+
+1. Go to a channel in the team where you installed the sample app and select the **'+'** button to add a new tab.
+1. Select **Hello World** from the **Add a tab** list. A configuration dialog box is displayed that enables you to select the tab to display in this channel.
+1. Select **Save**. The `Hello World` tab is loaded with the tab.
+
+ <img width="530px" alt="Screenshot of configure" src="~/assets/images/samples-hello-world-tab-configure.png" />
+
+### Test your bot in Teams
+
+You can now test the bot in Teams.
+
+**To test your bot**
+
+* Select a channel in the team where you registered your app and type `@your-bot-name`. This is called an **\@mention**. The bot replies to any message that you send.
+
+ <img width="450px" alt="Bot responses" src="~/assets/images/samples-hello-world-bot.png" />
+
+### Test your messaging extension
+
+**To test your messaging extension**
+1. Select **...** below the input box in your conversation view. A menu with the **'Hello World'** app is displayed.
+1. Select the menu, a set of random texts is displayed. You can select one of the random text and that is inserted into your conversation.
+
+ <img width="530px" alt="Messaging extension menu" src="~/assets/images/samples-hello-world-messaging-extensions-menu1.png" />
+
+ <img width="530px" alt="Messaging extension result" src="~/assets/images/samples-hello-world-messaging-extensions-result1.png" />
+
+1. Select one of the random text. A card formatted and ready to send with your own message is shown.
+
+ <img width="530px" alt="Messaging extension send" src="~/assets/images/samples-hello-world-messaging-extensions-send.png" />
+
+## See also
+
+* [Tutorials Overview](code-samples.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform Get Started Nodejs App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/get-started-nodejs-app-studio.md
+
+ Title: Tutorial - Create your first app using Node.js
+description: Learn how to get started building Microsoft Teams apps with Node.js.
+keywords: getting started node.js nodejs App Studio
+
+localization_priority: Normal
+++
+# Build your first Microsoft Teams app using Node.js
+
+In this tutorial, you will learn how to build your very first Microsoft Teams app using Node.js. It also walks you through the steps to:
+
+1. [Prepare your environment](#prepare-environment)
+1. [Get prerequisites](#GetPrerequisites)
+1. [Download the sample](#DownloadSample)
+1. [Build and run the sample](#BuildRun)
+1. [Host the sample app](#HostSample)
+1. [Update the credentials for your hosted app](#updatecredentials)
+1. [Configure the app tab](#ConfigureTheAppTab)
+
+<a name="prepare-environment"></a>
++
+<a name="GetPrerequisites"></a>
+
+### Download and host your app
+
+Follow these steps to download and host a simple "hello world" app in Teams.
+
+<a name="GetPrerequisites"></a>
+
+## Get prerequisites
+
+To complete this tutorial, you need the following tools. If you don't already have them you can install them from these links.
+
+- [Git](https://git-scm.com/downloads)
+- [Node.js and NPM](https://nodejs.org/)
+- Get any text editor or IDE. You can install and use [Visual Studio Code](https://code.visualstudio.com/download) for free.
+
+If you see options to add `git`, `node`, `npm`, and `code` to the PATH during installation, select the options.
+
+Verify that the tools are available by running the following in a terminal window:
+
+> [!NOTE]
+> Use the terminal window that you are most comfortable with on your platform. These examples use Bash (which is included in Git), but these scripts will run on most platforms.
+
+```bash
+$ git --version
+git version 2.19.0.windows.1
+
+$ node -v
+v8.9.3
+
+$ npm -v
+5.5.1
+
+$ gulp -v
+CLI version 2.3.0
+Local version 4.0.2
+```
+
+You may have a different version of these applications. This should not be a problem, except for gulp. For gulp you'll need to use version 4.0.0 or later.
+
+If you don't have gulp installed (or have the wrong version installed), do so now by running `npm install gulp` in your terminal window.
+
+If you have installed Visual Studio Code, you can verify the installation by running:
+
+```bash
+code --version
+1.28.2
+929bacba01ef658b873545e26034d1a8067445e9
+```
+
+You can continue to use this terminal window to run the commands that follow in this tutorial.
+
+<a name="DownloadSample"></a>
+
+## Download the sample
+
+We have provided a simple [Hello, World!](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-hello-world/nodejs) sample to get you started. In a terminal window, run the following command to clone the sample repository to your local machine:
+
+```bash
+git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
+```
+
+> [!TIP]
+> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/Microsoft-Teams-Samples) if you want to modify and check in your changes to your GitHub repo for future reference.
+
+<a name="BuildRun"></a>
+
+## Build and run the sample
+
+After the repository is cloned, run the change directory command in terminal to change the directory to the sample:
+
+```bash
+cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/
+```
+
+In order to build the sample, you need to install all its dependencies. Run the following command to do this:
+
+```bash
+npm install
+```
+
+You should see a bunch of dependencies getting installed. After installation you can run the app with the following command:
+
+```bash
+npm start
+```
+
+When the hello-world app starts, it displays `App started listening on port 3333` in the terminal window.
+
+> [!NOTE]
+> If you see a different port number displayed in the message above, it is because you have a PORT environment variable set. You can continue to use that port or
+> change your environment variable to 3333.
+
+At this point, you can open a browser window and navigate to the following URLs to verify that all the app URLs are loading:
+
+- `http://localhost:3333`
+- `http://localhost:3333/hello`
+- `http://localhost:3333/first`
+- `http://localhost:3333/second`
+
+<a name="HostSample"></a>
+
+## Deploy your sample app
+
+Remember that apps in Microsoft Teams are web applications exposing one or more capabilities. For the Teams platform to load your app, your app must be reachable from the internet. To make your app reachable from the internet, you need to *host* your app.
+
+For local testing you can run the app on your local machine and create a tunnel to it with a web endpoint. [ngrok](https://ngrok.com) is a free tool that lets you do just that. With *ngrok* you can get a web address such as `https://d0ac14a5.ngrok.io` (this URL is just an example). You can [download and install](https://ngrok.com/download) *ngrok* for your environment. Make sure you add it to a location in your `PATH`.
+
+After you install it, you can open a new terminal window and run the following command to create a tunnel. The sample uses port 3333, so be sure to specify it here:
+
+```bash
+ngrok http 3333 -host-header=localhost:3333
+```
+
+*Ngrok* will listen to requests from the internet and will route them to your app running on port 3333. You can verify by opening your browser and going to `https://d0ac14a5.ngrok.io/hello` to load your app's hello page. Please be sure to use the forwarding address displayed by *ngrok* in your console session instead of this URL.
+
+> [!NOTE]
+> If you have used a different port in the [build and run](#build-and-run-the-sample) step above, make sure you use the same port number to setup the *ngrok* tunnel.
+> [!TIP]
+> It is a good idea to run *ngrok* in a different terminal window to keep it running without interfering with the node app which you might later have to stop, rebuild and rerun. The *ngrok* session will return useful debugging information in this window.
+
+There is a paid version of *ngrok* that allows persistent names. If you use the free version your app will only be available during the current session on your development machine. If the machine is shut down or goes to sleep the service will no longer be available. Remember this when sharing the app for testing by other users. If you have to restart the service it will return a new address and you will have to update every place that uses that address.
+
+Make a note of the URL of your app. You will need this later when you register the app with Teams using App studio or Developer Portal.
+
+<a name="DeployToTeams"></a>
+
+## Deploy your app to Microsoft Teams
+
+At this point you have an app hosted on the internet, but you have no way yet of telling Teams where to look for it, or even what your app is called. To do this you now have to create an app package. This is little more than a text file that contains the app manifest and some icons that the Teams client will use to properly display and brand your app. You can manually create this app package, or you can use App Studio or Developer Portal, tools that run in Teams, that will simplify the process of registering the app. App Studio and Developer Portal are the recommended ways of creating and updating the app package.
+
+For either method you will need the following:
+
+- The URL where your app can be found on the internet.
+- Icons that Teams will use to brand your app. The sample comes with placeholder icons located in "src\static\images. App Studio also will provide default icons if needed.
+
+**Update the app package**
+
+# [App Studio](#tab/AS)
++
+# [Developer Portal](#tab/DP)
+
+**To install Developer Portal (preview) in Teams**
+
+1. Select the **Apps** icon at the bottom of the left-hand bar, and search for **Developer Portal**.
+
+ <img width="430px" alt="Screenshot of TDP" src="~/assets/images/Screen1.png"/>
+
+1. Select **Developer Portal** and select **Open**.
+
+ <img width="430px" alt="Screenshot of TDP Open" src="~/assets/images/screen2.png"/>
+
+1. Select the Apps tab and select **Import an existing app**.
+
+ <img width="430px" alt="Screenshot of import app in tdp" src="~/assets/images/screen3.png"/>
+
+1. Select **Hello World** and select **Import**. The **Hello World** app is imported in Developer Portal.
+
+ You can configure your app using the Teams Developer Portal. The Manifest is found under Distribute. You can use the Manifest to configure capabilities, required resources, and other important attributes for your app. For more details on how to configure your app using Developer Portal, see [Teams Developer Portal](../concepts/build-and-test/teams-developer-portal.md).
+
+ <img width="430px" alt="Screenshot of configure tdp" src="~/assets/images/Screen4.png"/>
++
+<a name="updatecredentials"></a>
+
+## Update the credentials for your hosted app
+
+The sample app requires the following environment variables to be set to the values you made a note of earlier:
+
+```
+MICROSOFT_APP_ID=<YOUR BOT'S APP ID>
+MICROSOFT_APP_PASSWORD=<YOUR BOT'S PASSWORD>
+WEBSITE_NODE_DEFAULT_VERSION=8.9.4
+```
+
+How you do that differs depending on how you hosted your app. The important thing about using environment variables is that these values are part of your environment - they can be accessed by the code for your app, but they are not exposed to third parties who might examine the files that make up your site.
+
+If you are running the app using ngrok you'll need to set up some local environment variables. There are many ways to do this, but the easiest, if you are using Visual Studio Code, is to add a [launch configuration](https://code.visualstudio.com/Docs/editor/debugging#_launch-configurations):
+
+```
+{
+ "type": "node",
+ "request": "launch",
+ "name": "Launch - Teams Debug",
+ "program": "${workspaceRoot}/src/app.js",
+ "cwd": "${workspaceFolder}/src",
+ "env": {
+ "BASE_URI": "https://yourNgrokURL.ngrok.io",
+ "MICROSOFT_APP_ID": "00000000-0000-0000-0000-000000000000",
+ "MICROSOFT_APP_PASSWORD": "yourBotAppPassword",
+ "NODE_DEBUG": "botbuilder",
+ "SUPPRESS_NO_CONFIG_WARNING": "y",
+ "NODE_CONFIG_DIR": "../config"
+ }
+}
+```
+
+Where:
+
+MICROSOFT_APP_ID and MICROSOFT_APP_PASSWORD is the ID and password, respectively, for your bot.
+NODE_DEBUG will show you what's happening in your bot in the Visual Studio Code debug console.
+NODE_CONFIG_DIR points to the directory at the root of the repository (by default, when the app is run locally, it looks for it in the src folder).
+
+> [!Note]
+> If you have not stopped npm from earlier in the tutorial, you'll need to run `npm stop` in order for Visual Studio Code to pickup your launch configuration variables correctly.
+
+<a name="ConfigureTheAppTab"></a>
+
+## Configure the app tab
+
+After you install the app into a team, you will need to configure it to show content. Go to a channel in the team and click on the **'+'** button to add a new tab. You can then choose `Hello World` from the **Add a tab** list. You will then be presented with a configuration dialog. This dialog will let you choose which tab to display in this channel. After you select the tab and click **Save** you can see the `Hello World` tab loaded with the tab you chose:
+
+<img width="430px" alt="Screenshot of configure" src="~/assets/images/samples-hello-world-tab-configure.png"/>
+
+### Test your bot in Teams
+
+You can now interact with the bot in Teams. Choose a channel in the team where you registered your app, and type `@your-bot-name`, followed by your message. This is called an **\@mention**. Whatever message you send to the bot will be sent back to you as a reply:
+
+<img width="450px" alt="Bot responses" src="~/assets/images/samples-hello-world-bot.png"/>
+
+<a name="ComposeRichMessages"></a>
+
+### Test your messaging extension
+
+**To test your messaging extension**
+1. Select the three dots below the input box in your conversation view. A menu with the **'Hello World'** app is displayed.
+1. Select the menu. A set of random texts is displayed. You can select one of the random text and that is inserted into your conversation.
+
+ <img width="430px" alt="Messaging extension menu" src="~/assets/images/samples-hello-world-messaging-extensions-menu1.png" />
+
+ <img width="430px" alt="Messaging extension result" src="~/assets/images/samples-hello-world-messaging-extensions-result1.png" />
+
+1. Select one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom:
+
+ <img width="430px" alt="Messaging extension send" src="~/assets/images/samples-hello-world-messaging-extensions-send.png" />
+
+ ## See also
+
+* [Tutorials Overview](code-samples.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform Get Started Yeoman https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/get-started-yeoman.md
+
+ Title: Tutorial - Create your first app using the Yeoman generator
+description: Learn how to get started building Microsoft Teams apps with the Yeoman generator.
+keywords: getting started node.js nodejs yeoman
+localization_priority: Normal
++++
+# Build your first Microsoft Teams app using the Yeoman generator
+
+> [!Note]
+> This tutorial comes from the [Yeoman generator for Teams wiki](https://github.com/OfficeDev/generator-teams/wiki/Build-Your-First-Microsoft-Teams-App).
+
+In this tutorial, you will learn how to build your very first Microsoft Teams app using the Microsoft Teams Yeoman generator. It also walks you through the process of upgrading your Teams using the Yeoman generator. Before you begin, you must have a Teams account that allows [app sideloading](~/concepts/build-and-test/prepare-your-o365-tenant.md).
+
+![yeoman generator git](~/assets/yeoman-demo.gif)
++
+<a name="GetPrerequisites"></a>
+
+## Get Prerequisites
+
+You need to install the following on your machine before starting to use the Yeoman generator:
+
+* Node.js
+
+ You need to have Node.js installed on your machine. You should use the latest [LTS version](https://nodejs.org).
+
+* A code editor
+
+ You need a code editor. Most of this documentation and images refer to using [Visual Studio Code](https://code.visualstudio.com). However, feel free to use whatever text editor you prefer.
+
+* Yeoman and Gulp CLI
+
+ To scaffold projects using the generator, you must install the Yeoman tool and Gulp CLI task manager.
+
+ Open up a command prompt and type the following:
+
+ ```bash
+ npm install yo gulp-cli --global
+ ```
+
+## Install the generator
+
+Install the Teams Yeoman generator with the following command:
+
+```bash
+npm init yo teams
+```
+
+Install the preview version of the generator with the following command:
+
+```bash
+npm init yo teams@preview
+```
+
+## Generate your project
+
+This section walks you through the steps to generate your project.
+
+**To generate your project**
+
+1. Open a command prompt and create a new directory where you want to create your project.
+1. Go to the directory, and run the command `yo teams`. The generator starts.
+1. Respond to the set of questions prompted by the generator:
+
+ ![yo teams](~/assets/yeoman-images/teams-first-app-1.png)
+
+ 1. Enter a name for your project. You can leave it as is by pressing Enter.
+ 1. Enter a path for the new directory if you want to create a new directory. As you are already in the directory you want, just press Enter.
+ 1. Enter the title of your project. This title will be used in the manifest and description of your app.
+ 1. Enter a company name which also will be used in the manifest.
+ 1. Enter the version of the manifest you want to use. For this tutorial select `v1.5`, which is the current general available schema.
+ 1. Select the items you want to add to your project. You can select a single one or any combination of items. For this tutorials, just select *a Tab*:
+
+ ![item selection](~/assets/yeoman-images/teams-first-app-2.png)
+
+1. Respond to the next set of follow-up questions that appear based on the items you selected in Step 2.
+1. Enter a URL for the location where you will host your solution.
+
+ > [!NOTE]
+ > The URL can be any URL, but by default the generator suggests an Azure web site URL.
+
+1. Confirm if you want to include unit-testing for your solution. The default response is **Yes**. If you opt to include unit-testing, the generated project will have a unit testing framework and some default unit tests for the different items being scaffolded.
+ > [!NOTE]
+ > * For this tutorial choose not to include a test framework.
+ > * The generator has a lot of built-in advanced features that you can opt-in or opt-out of.
+
+1. In order to make signing-in easy for you, you will also be asked if you want to use Azure Application Insights for signing-in. If you select **Yes**, you will need to provide an Azure Application Insights key.
+
+ > [!NOTE]
+ > For this tutorial opt-out of using Application Insights.
+
+ The next set of questions will be based on the previously selected items. For a tab you only need to provide a name and optionally choose if you want to be able to use this app as a SharePoint Online web part. After you provide the name the generator will generate the project and install all dependencies. This will take a minute or two.
+
+## Add code to your tab
+
+After the generator is done you can open up the solution in your favorite code editor. Take a minute or two and familiarize yourself with how the code is organized. For more information, see [Project Structure](https://github.com/OfficeDev/generator-teams/wiki/Project-Structure) documentation.
+
+Your tab is in the `./src/app/scripts/myFirstAppTab/MyFirstAppTab.tsx` file. This is the TypeScript React-based class for your tab.
+
+1. Locate the `render()` method and add a line of code inside the `<PanelBody>` control so it looks like this:
+
+ ``` TypeScript
+ <PanelBody>
+ <div style={styles.section}>
+ Hello World! Yo Teams rocks!
+ </div>
+ </PanelBody>
+ ```
+1. Save the file and return to the command prompt.
+
+## Build your app
+
+You can now build your project. This is done in two steps.
+
+1. Create the Teams App manifest file for the app that you uploaded into Microsoft Teams. This is done by the Gulp task `gulp manifest`. This will validate the manifest and create a zip file in the `./package` directory.
+1. Run the `gulp build` command to build the solution. This will transpile your solution into the `./dist` folder.
+
+## Run your app
+
+To run your app, use the `gulp serve` command. This will build and start a local web server for you to test your app. The command will also rebuild the application whenever you save a file in your project.
+
+You should now be go to `http://localhost:3007/myFirstAppTab/` and ensure that your tab is rendering. However, it is not in Microsoft Teams yet.
+
+**To render your tab in Microsoft Teams**
+
+![view your site in a browser](~/assets/yeoman-images/teams-first-app-3.png)
+
+### Run your app in Microsoft Teams
+
+Microsoft Teams does not allow you to have your app hosted on localhost, so you need to either publish it to a public URL or use a proxy such as ngrok. Good news is that the scaffolded project has this built-in.
+
+**To run your app in Teams**
+
+1. Run `gulp ngrok-serve` in Terminal. When you run `gulp ngrok-serve` the ngrok service will be started in the background, with a unique and public DNS entry and it will also package the manifest with that unique URL and then do the exact same thing as `gulp serve`.
+1. Create a new Microsoft Teams team.
+1. Select the Team name > Teams Settings > Apps.
+1. From the lower right corner, select **Upload a custom app**.
+1. Go to the `package` folder under your project folder.
+1. Select the zip file in that folder and select open.
+ Your App is now sideloaded into Microsoft Teams:
+
+ ![sideloaded app](~/assets/yeoman-images/teams-first-app-4.png)
+1. Go back to the **General** channel and select **+** to add a new Tab. You should see your tab in the list of tabs:
+ ![configure tab](~/assets/yeoman-images/teams-first-app-5.png)
+1. Select your tab and follow the instructions to add it. Notice that you have a custom configuration dialog, for which you can edit the source. Select *Save* to add your tab to the channel. Your tab is now loaded inside Microsoft Teams!
+
+ ![running tab in teams](~/assets/yeoman-images/teams-first-app-6.png)
+
+### Upgrade Microsoft Teams
+
+You can also upgrade your current Microsoft Teams version to the latest version using the Microsoft Teams Yeoman generator.
+
+**To upgrade Microsoft Teams**
+
+1. Get current version of Teams with the following command:
+
+ ```PowerShell
+ yo teams --version
+ ```
+2. Use the following command to select and update your generator:
+
+ ```PowerShell
+ yo
+ ```
+3. Use the arrow keys to select **Update your Generators**:
+
+ ![image of YoSelectUpdatGen](~/assets/images/Update-Teams/YoSelectUpdateGen.png)
+
+4. Select the generator you want from the list of generators:
+ > [!NOTE]
+ > Use the space bar to select or clear a selected Teams version from the available options.
+
+ ![image of UseSpaceToSelectGenerators](~/assets/images/Update-Teams/UseSpaceToSelectGenerators.png)
+
+
+ > [!NOTE]
+ > It takes few seconds to minutes for Teams installation to complete.
+
+5. After the installation is complete, use the following command to check the installed version:
+
+ ```PowerShell
+ yo teams --version
+ ```
+ Congrats! You built and deployed your first Microsoft Teams app. You also upgraded Microsoft Teams.
+
+ ## See also
+
+* [Tutorials Overview](code-samples.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform Prerequisites https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/prerequisites.md
# Prerequisites: Get started with Microsoft Teams app development
-Before you create your first Teams app, you must install a few tools and set up your development environment.
+Before you begin with creating your first Teams app, you must install a few tools and set up your development environment.
## Install required tools Some of the tools you need depend on how you prefer to build your Teams app: - [Node.js](https://nodejs.org/en/download/) (use the latest v14 LTS release)-- A browser with developer tools - such as [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/)
+- A browser with developer tools, such as, [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/)
- If you are developing with JavaScript, TypeScript, or the SharePoint Framework (SPFx), install [Visual Studio Code](https://code.visualstudio.com/download), version 1.55 or later. - If you are developing with .NET, install [Visual Studio 2019](https://visualstudio.com/download). Ensure you install the **ASP.NET and web development** or **.NET Core cross-platform development** workload.
The Teams Toolkit helps simplify the development process with tools to provision
# [Visual Studio Code](#tab/vscode) 1. Open Visual Studio Code.
-1. Select the Extensions view (**Ctrl+Shift+X** / **⌘⇧-X** or **View > Extensions**).
+1. Select the **Extensions** view (**Ctrl+Shift+X** / **⌘⇧-X** or **View > Extensions**).
1. In the search box, enter **Teams Toolkit**.
-1. Select the green install button next to the Teams Toolkit.
+1. Select **Install** next to the Teams Toolkit.
You also can find the Teams Toolkit on the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension).
To install the Teams Toolkit extension:
1. Open Visual Studio 2019. 1. Select **Extensions** > **Manage Extensions**. 1. In the search box, enter **Teams Toolkit**.
-1. Select the Teams Toolkit extension and select **Download**.
-
-The extension can be downloaded. Close Visual Studio 2019 to install the extension.
+1. Select the Teams Toolkit extension and select **Download**. The extension is downloaded.
+1. Close Visual Studio 2019 to install the extension.
# [Command line](#tab/cli)
With the Developer Portal for Teams, you can configure, manage, and distribute y
## Enable sideloading
-During development, you must load your app within Teams without distributing it. This is known as "sideloading".
+During development, you must load your app within Teams without distributing it. This is known as sideloading.
-1. If you have a Teams account, verify if you can sideload apps in Teams:
+If you have a Teams account, verify if you can sideload apps in Teams:
- 1. In the Teams client, select **Apps**.
- 1. Look for an option to **Upload a custom app**.
+1. In the Teams client, select **Apps**.
+1. Select **Upload a custom app**.
:::image type="content" source="~/assets/images/teams-toolkit-v2/upload-custom-app-closeup.png" alt-text="Illustration showing where in Teams you can upload a custom app.":::
If you cannot see the sideload option, or you do not have a Teams account, you c
1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program). 1. Select **Join Now** and follow the onscreen instructions.
-1. When you get to the welcome screen, select **Set up E5 subscription**.
-1. Set up your administrator account. Once you finish, you should see a screen like this.
+1. In the welcome screen, select **Set up E5 subscription**.
+1. Set up your administrator account. After you finish, you should see a screen like this.
:::image type="content" source="~/assets/images/build-your-first-app/dev-program-subscription.png" alt-text="Example of what you see after signing up for the Microsoft 365 developer program.":::
-1. Sign in to Teams using the administrator account you just set up.
-1. Verify if you now have the **Upload a custom app** option.
+1. Sign in to Teams using the administrator account you just set up. Verify that you have the **Upload a custom app** option.
## Get a free Azure account
If you wish to host your app or access resources within Azure, you must have an
You must have access to two accounts: - Your Microsoft 365 account credentials. This is the account that you use to sign in to Teams. If you're using a Microsoft 365 developer program tenant, this is the admin account you set up when you registered for the program.-
+- Your Azure credentials. This is the account that you use to access the Azure Portal and for provisioning new cloud resources to support your app.
# [Visual Studio Code](#tab/vscode)
You must have access to two accounts:
:::image type="content" source="~/assets/images/teams-toolkit-v2/account-commands.png" alt-text="Location of the Accounts section used to sign-in.":::
-1. The sign-in process starts using your normal web browser. Complete the sign-in process for your M365 account. You are prompted when you can close the browser and return to Visual Studio Code.
+ The sign-in process starts using your normal web browser. Complete the sign-in process for your M365 account. When you are prompted, you can close the browser and return to Visual Studio Code.
1. Return to the Teams Toolkit within Visual Studio Code. 1. Select **Sign in to Azure**. > [!TIP] > If you have the Azure Account extension installed and are using the same account, you can skip this step. Use the same account as you are using in other extensions.
-1. The sign-in process starts using your normal web browser. Complete the sign-in process for your Azure account. You are prompted when you can close the browser and return to Visual Studio Code.
+1. The sign-in process starts using your normal web browser. Complete the sign-in process for your Azure account. When are prompted, you can close the browser and return to Visual Studio Code.
-When complete, the **ACCOUNTS** section of the sidebar shows the two accounts separately, together with the number of usable Azure subscriptions available to you. Ensure you have at least one usable Azure subscription available. If not, sign out and use a different account.
+ When complete, the **ACCOUNTS** section of the sidebar shows the two accounts separately, together with the number of usable Azure subscriptions available to you. Ensure you have at least one usable Azure subscription available. If not, sign out and use a different account.
# [Visual Studio 2019](#tab/vs)
Visual Studio 2019 prompts you to log in to each service as required. You do not
The sign-in process starts using your normal web browser. Complete the sign-in process for your Azure account. You are prompted when you can close the browser.
-The account logins are shared between Visual Studio Code and the TeamsFx CLI.
+ The account logins are shared between Visual Studio Code and the TeamsFx CLI.
-
-Now that your development environment is configured, you can create, build, and deploy your first Teams app.
-## See also
+ Now that your development environment is configured, you can create, build, and deploy your first Teams app.
-- [Create your first Teams app with Blazor](first-app-blazor.md)-- [Create your first Teams app using SharePoint Framework (SPFx)](first-app-spfx.md)-- [Create a conversational bot app](first-app-bot.md)-- [Create a messaging extension](first-message-extension.md)-
-## Next step
+## See also
-> [!div class="nextstepaction"]
-> [Create your first Teams app using React](first-app-react.md)
+* [Tutorials Overview](code-samples.md)
+* [Create an app using React](first-app-react.md)
+* [Create an app using Blazor](first-app-blazor.md)
+* [Create an app using SPFx](first-app-spfx.md)
+* [Create an app using C# or .NET](get-started-dotnet-app-studio.md)
+* [Create an app using Node.js](get-started-nodejs-app-studio.md)
+* [Create an app using Yeoman generator](get-started-yeoman.md)
+* [Create a conversational bot app](first-app-bot.md)
+* [Create a messaging extension](first-message-extension.md)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/whats-new.md
keywords: teams what's new latest
# What's new for developers in Microsoft Teams
-Discover Microsoft Teams platform features that are introduced in Microsoft Build 2021, generally available (GA), and in developer preview.
-
-## Microsoft Build 2021
-
-# [Features in developer preview](#tab/devpreview)
-
-| **Date** | **Features** | **Changed topics** |
-| -- | | |
-|06/16/2021| Resource-specific consent for chats. |[Resource-specific consent](graph-api/rsc/resource-specific-consent.md), [Test resouce-specific consent permissions in Teams](graph-api/rsc/test-resource-specific-consent.md)|
-|05/26/2021| Build tabs with Adaptive Cards. |[Build tabs](tabs/how-to/build-adaptive-card-tabs.md)|
-|05/25/2021| Updated Teams Toolkit for [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) and [Visual Studio](https://marketplace.visualstudio.com/items?itemName=msft-vsteamstoolkit.vsteamstoolkit&ssr=false#overview). | [Get started with Teams app development](~/get-started/prerequisites.md) |
-|05/25/2021| New Developer Portal for Teams introduced for managing your Teams apps. | [Developer Portal for Teams](concepts/build-and-test/teams-developer-portal.md) |
-|05/25/2021| Custom Together Mode scenes feature combines participants into a single virtual scene and places their video streams in pre-determined seats. | [Custom Together Mode scenes](~/apps-in-teams-meetings/teams-together-mode.md) |
-|05/24/2021| Bots can be enabled to receive all channel messages using resource-specific consent (RSC).|[Receive all messages with RSC](~/bots/how-to/conversations/channel-messages-with-rsc.md), [bot conversation overview](~/bots/how-to/conversations/conversation-basics.md), [channel and group conversations](~/bots/how-to/conversations/channel-and-group-conversations.md), and [developer preview manifest schema](~/resources/schem) |
-|05/21/2021| Tabs link unfurling and stage view. |[Tabs link unfurling and stage view](tabs/tabs-link-unfurling.md) |
-
-> [!NOTE]
-> For more information on features available in developer preview, see [public developer preview for Teams](~/resources/dev-preview/developer-preview-intro.md).
-
-# [Features in GA](#tab/GA)
-
-| **Date** | **Features** | **Changed topics** |
-| -- | | |
-|04/29/2021 | Universal Actions for Adaptive Cards. | [Universal Actions for Adaptive Cards](task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview.md) |
-|04/29/2021 | User Specific Views for Adaptive Cards. | [User Specific Views](task-modules-and-cards/cards/universal-actions-for-adaptive-cards/User-Specific-Views.md) |
-|04/29/2021 | Sequential Workflows for Adaptive Cards. | [Sequential Workflows](task-modules-and-cards/cards/universal-actions-for-adaptive-cards/Sequential-Workflows.md) |
-|04/29/2021 | Up to date cards. | [Up to date cards](task-modules-and-cards/cards/universal-actions-for-adaptive-cards/Up-To-Date-Views.md) |
-|04/08/2021| App customization.|[Design teams app overview](concepts/design/enable-app-customization.md), [App studio overview](concepts/build-and-test/app-studio-overview.md#connectors), and [Manifest schema](resources/schem) |
-|03/29/2021 | Format cards in Teams. | [Format cards in Teams](task-modules-and-cards/cards/cards-format.md) |
-|02/19/2021|Added location capabilities. <br/> Location capabilities information is added in the device capabilities overview, native device permissions, integrate media capabilities, and QR or barcode scanner capability files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md), [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md), [Integrate location capabilities](concepts/device-capabilities/location-capability.md) |
--
+Discover Microsoft Teams platform features that are generally available (GA) and in developer preview.
## GA features