Microsoft Teams App Camp
Welcome to App Camp! In this on-demand workshop, you'll learn how to reuse your existing applications as Teams applications. In addition to a number of instructional videos (below), we offer two sets of hands-on labs:
-
If you have an existing web based application and are using tools that you like, check out the App Camp Classic Labs. Starting with a simple web application, you'll learn to build a complete Teams application using no special tooling at all. The principles you learn can be applied to any modern development approach.
-
If you have web services you can consume, and would like to use the latest Teams development tool (Teams Toolkit), you'll want to try the App Camp: New Adventure, where you'll build a new app with Teams Toolkit that consumes your web services and exposes them as Teams message extensions.
App Camp is for learning concepts you can apply to your application
The App Camp solution is designed to be simple and easy to understand; it is NOT production ready and should not be used as the basis for your coding project. App Camp teaches the concepts that allow Teams apps to be built on existing apps or app frameworks. If you want to get started quickly on a new application, please use Teams Toolkit.
If you're starting from scratch, you still can learn a lot about Teams applications and monetization here! Just don't use it as a code base!
Video Briefings
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.
Video Briefings
Business Briefing
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
Reactor events
If you missed our Reactor livestream events, please check out the recordings at https://aka.ms/TeamsAppCamp!
Lab videos
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.
App Camp "Classic" Labs!
Looking for the new labs?
If you want to try the new labs, which use Teams Toolkit and expose web services as Teams app features, then please start here
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.
Tip
If in doubt, start here! 🚶🏿🚶🏽♀️🚶
To make the app understandable by a wide audience, it is written in vanilla JavaScript with no UI framework, however it does use modern browser capabilities such as web components, CSS variables, and ECMAScript modules. The server side is also in plain JavaScript, using Express, the most popular web server platform for NodeJS. While the code is not production quality, the writers tried to follow best practices with respect to the various API's and SDK's in use, or to call out any exceptions in comments. As for things like robust exception handling, unit testing, build pipeline, etc., those are left to you, the developer; you probably already have a setup you want to use anyway.
Lab Prerequisites 📃
The labs are intended for developers. Most of the labs don't assume a lot of specialized knowledge; coding is in modern JavaScript without use of specialized frameworks or libraries. But if you're not comfortable with coding, you may find it a bit challenging. The idea is to teach developers the principles so they can apply them to their choice of toolsets.
To complete the labs you will need:
- A computer with permission to install software (Windows, Mac, or Linux)
- NodeJS
- 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!)
Installation instructions are part of the first lab; additional details are here in the repo wiki
Tip
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!
Labs 📚
Path A: Start with Azure AD
Core labs
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
Extended Labs
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
- Extend your Teams app to Outlook and Microsoft365 app
Path B: Start with a non-Azure AD identity solution
Core labs
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
Contributing
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 has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
Trademarks
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.
