This post has been republished via RSS; it originally appeared at: Healthcare and Life Sciences Blog articles.
Introduction
Our team recently had the opportunity to revisit a ReactJS application that was built to create and manage project teams for virtual hackathon events. Since all the hackathon participants were already using Teams to collaborate during the event, we decided it made sense to convert our app to a Teams Tab app.
During this process, we discovered the Teams Toolkit Preview extension for VS Code. The toolkit made it very easy for us to create, debug, and deploy our new Teams App. Which greatly reduced the amount of development time and improved our developer workflow.
This article will highlight our process of getting started with the Teams Toolkit. So, hopefully you can make your next App a Teams App as well.
Pre-requisites
- Visual Studio Code with Teams Toolkit extension installed
- Microsoft 365 Account with ability to upload custom apps
- Azure Subscription (if you want to deploy the hosting resources to Azure)
See this reference link for more information about these pre-requisites.
Creating a Teams App
Once the Teams Toolkit extension is installed, we use it to create a new Teams App.
A step-by-step wizard will ask a few questions. First, the type of app we want. In this case we’ll choose a Tab app, since our existing app is a web UI written in ReactJS. The Tab app will provide a similar experience and allow our app to become “Teams-aware”.
After the app is created, we need to sign-in to a Microsoft 365 account and Azure. The Azure sign-in is optional if we are not planning to deploy the hosting resources for the Teams app to Azure. Using Azure is the easiest way to get started, and the toolkit makes it almost a seamless process. So, I would recommend using Azure, at least initially.
*Pro Tip: Make sure the Microsoft 365 account and Azure subscription belong to the same Azure Active Directory tenant. If you need to do a production deployment to separate tenants, that will be possible after packaging up the app resources. But during development and debugging, the toolkit automation assumes that you are working in the same tenant.
Debug a Teams App
Now that our Teams app is created, and we’ve signed in to our M365 account, we can debug the app to make sure everything is working correctly.
Switch back to the file explorer tab, then expand the “tabs” folder in the project. This is the root folder containing the ReactJS application. Then, expand the “src/components” folder and open the Tab.jsx file. This top-level component is rendered when the app is loaded in Teams.
At the top of the page is a small “Play” button. Clicking this button will allow us to either debug our app locally or launch the app remotely if it has already been deployed. Choose the Debug option for your browser of choice. This will trigger Teams Toolkit to create a local build of the app, side-load it to your M365 tenant, and attach the debugger to a locally running version of the ReactJS app.
After a few moments, a new browser window will appear and prompt you to “Add” your local-debug version of the app to your Teams environment. It will then display the main page of the app, which is being hosted on your localhost.
Experiment with modifications to the Tab.jsx component, or any of the sample components, by making some small changes and adding breakpoints to see the debugging experience in action. Just like local development and debugging with ReactJS, the local server and debugger don’t need to be stopped when making code changes. Any watched jsx/js or other files will automatically trigger a hot reload of the app, even in Teams!
Deploy a Teams App
The Teams Toolkit has several actions available in the Deployment section that make it easy to build, package, and deploy your app. These actions are generally listed in the order used to deploy the backend resources and the app to Teams.
- Provision in the cloud – This action will execute the Bicep templates created by the toolkit to deploy the backend Azure resources for the app.
- Zip Teams metadata package – This action will bundle the Teams app manifest. Once created, another toolkit action can deploy it to Teams, or it can be manually uploaded to the Teams Store.
- Deploy to the cloud – This action will upload the backend resources, including the Tabs ReactJS app, to the provisioned Azure resources.
- Publish to Teams – This action will push the packaged Teams application to the Store.
Once these 4 actions have been completed, your app is now published and available for other users to find within your Teams Store.
Conclusion
In the example of our Team Builder app, we can migrate in the components from the existing app and integrate them into the component hierarchy under the root Tabs.jsx of the Teams app. With very few changes, the app is up and running as a Teams app. Now we can start refactoring the app to take advantage of its Teams-aware context. For example:
- Replace existing authentication with the TeamsFX SDK
- Swap out existing form and layout components for FluentUI to give it a Teams native look-and-feel
- Add other Azure dependencies to the provisioning process of Teams Toolkit
Overall, our team has found working with the Teams Toolkit extension to be a time saver. It has reduced the complexity of configuring local development environments, provided a simple debugging experience, and allows us to easily deploy and test our Teams applications. I hope you’ll give it a try!
If you’d like to see our progress with Team Builder or use it as an example, head over to our GitHub repository at https://github.com/microsoft/hackathon-team-builder.