page_type: sample products:
- office-365 languages:
- html description: "This sample demonstrates @fluentui/react-teams library in Microsoft Teams apps." extensions: contentType: samples createdDate: "12/8/2020 5:06:47 PM"
Deploying the Microsoft Teams UI templates sample app
This sample app can help you better understand how apps should look and behave in Microsoft Teams. The app includes examples of tested, high-quality UI templates that work across common Teams use cases (such as dashboards or forms).
To use the sample app, you need to host it somewhere. We'll focus on deploying the app to a local web server since that's the fastest way to get started.
(If you want to make it easier for others to use the app, consider deploying to Microsoft Azure or another hosting service.)
- Install Git
Node.js and npm. Run the command
node --versionto verify that Node.js is installed.
- Set up a Microsoft 365 developer account, which allows app sideloading in Teams.
Set up your app project
Open a terminal and clone the sample app repository.
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
You can find the app source code in
app: Includes the app scaffolding.
manifest: Includes the app manifest (
manifest.json) and the color and outline versions of the app icon.
assets: Includes the app assets.
.env: Contains the app configurations. When you create the app package, the manifest is dynamically populated with values from this file.
.envfile is excluded from source control. If you're deploying to Azure, make sure that you include the
.envconfigurations as application settings in your Azure web app (except the
PORTvariable, which is used for local testing and debugging).
Run the app
In the root directory of your project, run the following command.
When the app starts, you should see the following terminal output.
You can now view microsoft-teams-app-sample in the browser. Local: http://localhost:3000 On Your Network: http://192.168.0.10:3000
If you see a port number other than
3000, it's because the
PORTenvironment variable in the
.envfile has a different value. You can use that port or change it to 3000.
Open a browser and verify that all of the following URLs load:
Set up a secure tunnel to the app
Teams doesn't display app content unless it's accessible via HTTPS. We recommend using ngrok to establish a secure tunnel to where you're hosting the app locally (for example,
Run the following command to create the tunnel to your
Save the HTTPS URL in the output (for example, https://468b9ab725e9.ngrok.io). You may need this later if you plan to register the app with App Studio.
[!IMPORTANT] If you're using the free version of ngrok and plan to share the app with others, remember that ngrok quits if your machine shuts down or goes to sleep. When you restart ngrok, the URL also will be different. (A paid version of ngrok provides persistent URLs.)
Create the app package
You need an app package to sideload the app in Teams.
Open a separate terminal so that you don't interfere with the running app.
Run the following command to generate the app package.
This process validates the manifest and saves the package as a
zipfile in the
Sideload the app in Teams
In the Teams client, go to Apps.
Select Upload a custom app and upload the app package, which is the generated
zipfile in the
To view app logs, the
DEBUG environment variable must be set to
msteams. This is enabled by default in your project's
If disabled, run the following command in a terminal to see logs.
If you're hosting the app in Azure, set
msteams in application settings.
For more information, read about the debug package.