Edit

Develop your apps with Teams Toolkit

  • Article

After you create your app in Teams Developer Portal, you can:

Teams Toolkit scaffolds the necessary files based on the feature and configurations you set in Teams Developer Portal. This makes a seamless transition between Teams Developer Portal and Teams Toolkit in Visual Studio Code and Visual Studio.

Open your app in Visual Studio Code

In Teams Developer Portal, you can open and launch your project (React app) in Visual Studio Code.

Following are the steps to open your app in Visual Studio Code:

  1. Select Develop > Open in Teams Toolkit > Open in Visual Studio Code (JS/TS).

    Screenshot shows the Developer Portal with Open in Teams Toolkit highlighted in red.

    A dialog is displayed.

    Note

    To enable your app to open, install the latest version of Teams Toolkit for Visual Studio Code.

  2. Select Open.

    Screenshot of browser with Open option highlighted in red.

    A dialog is displayed.

  3. Select Open.

    Screenshot shows Developer Preview page with Open option highlighted in red.

    If necessary, sign in to your Microsoft 365 account.

  4. Select your preferred programming language.

    Screenshot shows Teams Toolkit with Select a programming language highlighted in red.

  5. Select your workspace folder.

    Screenshot shows the Teams Toolkit with workspace folder highlighted in red

  6. Enter an app name.

    Screenshot of Teams Toolkit with Application name highlighted in red.

  7. Select your app and select OK.

    Teams Toolkit converts the URL you configured in Teams Developer Portal to a localhost address to work with the debugging process.

    Screenshot shows Teams Toolkit with OK option highlighted in red.

    Teams Toolkit scaffolds your project with all the necessary config and code files, now you're ready to start development.

    Screenshot shows you the scaffolding of your project in Visual Studio Code.

Open your app in Visual Studio

You can open your project in Visual Studio and scaffold your project in Visual Studio with Teams Toolkit. Ensure that you installed Visual Studio 2022 version 17.6 Preview 2.

Following are the steps to open your app in Visual Studio:

  1. Select Develop > Open in Teams Toolkit > Open in Visual Studio (.NET) (Preview).

    Screenshot shows the Developer Portal with Open in Teams Toolkit.

  2. Select Open to scaffold your project.

    Screenshot of browser with Open option in visual studio.

    If necessary, sign in to your Microsoft 365 account.

  3. Enter your project name, location, and solution name. Select Create.

    Screenshot shows you the details tab to set the app name.

  4. Select the application type and select Next.

    Teams Toolkit converts the app you configured in Teams Developer Portal to a localhost address to work with the debugging process.

    Screenshot shows you the type of app in visual studio.

    Teams Toolkit scaffolds your project with all the necessary config and code files, now you're ready to start development.

    Screenshot shows you the scaffolding of your project in visual studio.

After you open your app in Teams Toolkit, you can now develop and debug your Teams app in Teams Toolkit.

Note

You can work in Teams Toolkit through Developer Portal in preview version only.

See also

Publish your Teams apps using Developer Portal