Microsoft Teams App Camp On Demand
Migrate applications into Microsoft Teams
Welcome to App Camp! In this on-demand workshop, you'll learn how to build Teams applications without special tools, which is important for developers who already have an application they want to extend into Microsoft Teams, or for developers who have a specific toolchain in mind. If you're starting a new application and you're open to building a React application with NodeJS/Express support, we recommend you use the Teams Toolkit.
This web site will guide you through a set of videos and hands-on lab exercises in which you will port a simple web application to being a full-featured Teams application. The initial core labs will bring the web application into Teams as a personal tab with Azure AD Single Sign-on. Then the "extended" labs are available to teach you how to add features such as message extensions, adaptive cards, deep linking, and more. One of the extended labs even shows you how to monetize your application in the Teams app store!
These videos will help you understand the business of Teams applications, and will lay a foundation for understanding the technical aspects of the labs. You don't need to watch them in order to complete the labs, but they will help you understand.
What's the business case for building Teams applications? How can putting your app in the Teams app store generate revenue for you? What benefits does Microsoft offer ISV's who build Teams applications? How will my application appear to Teams users, and how will it help them? These questions and more are answered in these videos.
For more video case studies about successful Teams apps, please visit the Modern Work ISV Program page.
Technical Briefing: Building your Teams application
These videos will help you understand how Teams applications and Azure AD SSO work, so you can better understand the labs as you do them.
Technical Briefing: Monetizing your Teams application
These videos explain the Microsoft Commercial Marketplace and how to integrate your application with the ecommerce system that drives it
If you'd like to watch the labs before doing them, they are here. They're also posted at the beginning of each lab. The instructions should stand on their own - you don't need to watch in order to complete the labs - but they can help if you get stuck or want to understand the labs more deeply.
Start with the "core application"
Use this alternative path if you want to learn how to integrate an identity system other than Azure Active Directory:
Extended labs: Choose your own adventure!
Key learning resource
For a complete on-demand workshop focused on Commercial Marketplace, complete with hands-on labs and videos, please visit Mastering the Marketplace. Monetized Teams Store Apps are "SaaS Offers", so the link will bring you directly into that section of the training.
It's lab time!
In this series of labs, you will port a simple "Northwind Orders" web application to become a full-fledged Microsoft Teams application. The core labs will show you how to make the web application into a Teams application with a personal tab and Azure AD Single Sign-on. From there, you can choose extended labs depending on the features you need in your application. After completing each lab, the solution will still work as the original stand-alone web application as well as in Microsoft Teams. This is intended to show how to extend an existing SaaS application into Microsoft Teams without disrupting non-Teams other users.
If in doubt, start here! 🚶🏿🚶🏽♀️🚶
Lab Prerequisites 📃
To complete the labs you will need:
- A computer with permission to install software (Windows, Mac, or Linux)
- A code editor such as Visual Studio Code
- ngrok to simplify local debugging and allow debugging of bots and message extensions
- A Microsoft 365 tenant (available free!)
DON'T DEVELOP IN PRODUCTION
It may be tempting to do labs or build solutions in the Microsoft 365 tenant where you work every day, but there are good reasons to have a dedicated dev tenant - and probably additional staging/test tenants as well. They're free, and you can safely experiment as a tenant admin without risking your production work.
Choose a path 🛣️
There are two paths for doing the core application development labs:
Path "A" is for developers with apps that are already based on Azure Active Directory. The starting app uses Azure Active Directory and the Microsoft Authentication Library (MSAL). Path A includes optional modules for extending the core application; these all build on a correctly completed Lab A03, which is the last core lab for Azure AD.
Path "B" is for developers with apps that use some other identity system. It includes a simple cookie-based auth system based on the Employees table in the Northwind database. This cookie-based system is not secure and should never be used in production! But it does serve to show how to map identities from an existing login system to Azure AD identities using Teams Single Sign-on. Path B does not include the optional modules but the Path A extended modules will probably work; we just don't have time to test all the permutations!
Path A: Start with Azure AD
In this series of labs, you'll begin with a working web application that uses the MSAL library to authorize Azure AD users. You'll extend this to also be a Teams application with Azure AD Single Sign-on. These core labs are the basis for the extended labs. These folders hold the completed source codes following each of the labs.
- A01 - Start with Azure Active Directory
- A02 - Create a Teams app with Azure AD Single Sign-On
- A03 - Teams styling and themes
Once you have successfully completed Lab A03, you're invited to choose your own adventure(s) and add features to your Teams application. The solution files for each lab are based on completing the lab directly on top of the Lab A03 solution. An "All" solution folder is provided showing all the extended labs completed on top of Lab A03.
- Add a Configurable Tab
- Add a Deep link to a personal Tab
- Add a Dialog
- Add a Meeting app
- Add a Message Extension
- Selling Your SaaS-based Teams Extension
Path B: Start with a non-Azure AD identity solution
In this series of labs, you'll begin with a working web application that uses the a simple bespoke authentication scheme to authorize users stored in a database. You'll extend this to also be a Teams application with Azure AD Single Sign-on, where Azure AD users are mapped to the application's users to minimize changes to the application. If you're extending an application into Teams which uses some identity system other than Azure AD yet want to gain the benefits of Azure AD SSO, this pattern may work for you. These folders hold the completed source codes following each of the labs.
- B01 - Start with a non-Azure Active Directory Identity System
- B02 - Teams App with Bespoke Authentication
- B03 - Enable Azure AD Single Sign-On
- B04 - Teams styling and themes
This project welcomes contributions and suggestions. Please file any issues or feature requests in the issues list for this repository. If you wish to contribute via a pull request, please fork the repo and make your PR against the main branch. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.