- Create your app project
Use the Microsoft Teams Toolkit in Visual Studio Code to set up your first app project.
In Visual Studio Code, select Microsoft Teams on the left Activity Bar and choose Create a new Teams app.
When prompted, sign in with your Microsoft 365 development account.
On the Add capabilities screen, select Tab then Next. Screenshot showing how to configure your app project with the Visual Studio Code Teams Toolkit.
Enter a name for your Teams app. (This is the default name for your app and also the name of the app project directory on your local machine.)
Check only the Personal tab option and select Finish at the bottom of the screen to configure your project.
- Understand important app project components
Once the toolkit configures your project, you have the components to build a basic personal tab for Teams. The project directories and files display in the Explorer area of Visual Studio Code.
Screenshot showing app project files for a personal tab in Visual Studio Code.
App scaffolding
The toolkit automatically creates scaffolding for you in the src directory based on the capabilities you added during setup.
If you create a tab during setup, for example, the App.js file in the src/components directory is important because it handles the initialization and routing of your app. It calls the Microsoft Teams JavaScript client SDK to establish communication between your app and Teams.
App ID
Your Teams app ID is needed to configure your app with App Studio. You can find the ID in the teamsAppId object, which is located in your project's package.json file.
- Build and run your app
In the interest of time, you'll build and run your app locally.
(This information is also available in the toolkit README.)
In a terminal, go to the root directory of your app project and run npm install.
Run npm start.
Once complete, there's a Compiled successfully! message in the terminal. Your app is running on https://localhost:3000.
- Sideload your app in Teams
Your app is ready to test in Teams. To do this, you must have an account that allows app sideloading. (If you aren't sure you have that, learn about getting a Teams development account.)
Tip
Before sideloading your app, check for issues using the validation feature in App Studio, which is included in the toolkit. Errors must be fixed to successfully sideload the app.
In Visual Studio Code, press the F5 key to launch a Teams web client.
To display your app content in Teams, specify that where your app is running (localhost) is trustworthy:
Open a new tab in the same browser window (Google Chrome by default) which opened after pressing F5.
Go to https://localhost:3000/tab and proceed to the page.
Go back to Teams. In the dialog, select Add for me to install your app. Screenshot showing an example 'Hello, World!' personal tab app running in Teams.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…