Debug Microsoft Teams apps without ngrok | Tips & Tricks

Key Takeaways

hi i'm bob german cloud advocate at microsoft and i'm here to share tips and tricks on developing applications for microsoft teams today i'm going to show you how to set up for local debugging without the use of an internet tunnel of your team's tabs task modules or configuration pages this video is a companion to another one what is ngrok and do i need it to build teams applications and i'll have a link to that at the end of this video if you're watching this one will assume that you're building a tab a task module or a configuration page for microsoft teams and that you've chosen to work locally without the use of ngrok now you may have noticed that ngrok is listed as a prerequisite in a lot of teams development documentation and tutorials indeed it is the darling of teams developers but it's not strictly a prerequisite it provides a tunnel so that requests from the internet can get into your local computer to do things like deliver messages from bots it also provides https support with a trusted certificate and this is required by teams and a dns name and it makes mobile device testing easier because your app is literally live on the internet when you're using ngrok which is also a little scary to some it departments which is why you might not really be able to use it in the case of tabs well the connections to your local web server come from the local teams client or browser so even if you use ngrok you're actually just looping back outside to the internet and right back into your local computer so the tunnel isn't really necessary now adding azure active directory single sign-on doesn't really change that it means that your local web server needs to also host a web service but it's called from the local teams client so you really don't need any incoming connection for tabs task modules or configuration pages what you need is the https support and a dns like name because azure ad single sign-on won't work with just plain localhost it also won't work with azurewebsites.net you need some other dns name that you can register into azure ad and those are the things that you really need so let me show you how to set up azure ads single sign-on locally with no internet tunnel my example uses a react application that was generated by the teams toolkit so your exact tools and process may vary a little bit from this depending on the tools you're using what operating system etc so the first step is to set up a local host name for your application since this uses azure active directory single sign-on azure won't allow you to use localhost for that particular case and also you can't use azurewebsites.net incidentally so you need some kind of a custom name so i'm just going into my etc hosts file and adding this entry to 127.0.0.1 which is the loopback network address so it's just going to loop back it's not going to go out over the internet you could get fancier with this and and put this into your router's dns maybe open your local firewall maybe use your actual local ip address to set up for mobile device testing and other cross-device scenarios but for now i'm just going to make 127.0.0.1 i'm going to give it this name dev apps for teams so now i have two web servers running and that's because i'm using the teams toolkit generator which actually generates two applications in the case of sso it generates one web server on port 3000 for the tab web page and another one on port 5000 for the token exchange web service so this makes life a little bit more complicated because we actually have to terminate both of these ssl connections and we're going to have to have a cross-origin call so let's take a look at that to start i'm just going to go to my local address or my new local name dev apps for teams dot local column 3000 and verify that i have a trusted ssl connection and you can see here that indeed this is secure and this is step two is to enable https with a trusted certificate see it says it's valid issued by a trusted authority now there's an accompanying article that will lead you through this set up step by step it's different for each operating system but you can generate your own certificate and then tell your system to trust it and that's the approach here and you can see that that is set up and working here okay so that's step two let's just take a look at how that gets used by our web server our local web server um the react one that's the main web page it's pretty simple i've taken the certificate and the key that were generated again the article has the step by step and i've added them to my project along with some environment variables to tell create react app where the files are and it takes care of all the details as it turns out the other server a little api server is not quite as smart it's just using plain old express so i can point to the certificate but i'm also going to have to modify the code a little bit and you can see here that i'm adding a course policy so that the cross origin call from a web page hosted on port 3000 can access the service on port 5000 and then i'm also going to have to turn on https using this code that reads the certificates and then uses them to create the web server it's not a huge deal you can steal my code right off the screen but those are the setup steps to get that trusted https connection so the remaining steps are the same as they would be for any azure ad sso project so you can follow whatever tutorial you want you're just going to use the local address instead of the ngrok address so this is the next step then is to use the local hostname and port in your app registration so here is the app registration you'll see here is dev apps for teams dot local column 3000 doesn't have any trouble with the colon 3000 here it is in the exposed api and you can also see it in the redirect url the final step is to set up the team's app manifest again we're just going to use the local hostname and port instead of an ngrok hostname so you can see it here you can also see it if we go into the tab itself the url of our personal tab you'll see that it's also using dev apps for teams colon dot local column 3000 and then in the domains and permissions section if we go over there you'll see that yep it's actually those same local host names that are that are set up there so let's test it out i'll go ahead and install this for myself and if you see the picture that means that it's authenticated with azure id sso and pulled my picture from the microsoft graph and it worked ta-da for more on this topic please check out the video what is ngrok and do i really need it for teams development that's at aka dot ms slash ngrok dash video and there are also a couple of articles aka dot ms slash ngrok article has the general ngrok article that matches the other video and then for the step by step that shows how to set up this article including generating those trusted https certificates you can go to aka dot ms slash tabs dash without dash ngrock-article thanks for watching don't forget to like this video and subscribe to this channel for more microsoft 365 developer video