Microsoft 365 Community Microsoft Teams, 14 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Deploying the Azure Communications Services Application to Azure

Description

In this 24-minute developer focused demo, Dan Wahlin explains while there many app deployment options to Azure, in this demo Dan deploys an ACS app using Azure Static Web Apps. Step through the process - set up a GitHub Repo using the GitHub command line tool. Insert your ACS React app in Repo. Go to Azure Portal and create a Static Web App, point to your app in Repo. Pass in environment variables and click to deploy app and APIs. Part 6 – final in series.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 14, 2023.

Demo Presenter
• Dan Wahlin (Microsoft) | @DanWahlin

Supporting materials
• GitHub CLI – Take GitHub to the command line | https://cli.github.com/
• Repo - Microsoft Cloud Integration Scenarios | | aka.ms/microsoft-cloud
• Tutorial - Audio/Video Calling from a Custom App into a Teams Meeting | aka.ms/mscloud-acs-teams-tutorial
• Repo - Microsoft Cloud Integrations (code samples, videos, documentation) | https://github.com/microsoft/microsoftcloud
• Tools – Azure Communication Services UI Library | aka.ms/acs-ui-library
• Tool – Graph Explorer | aka.ms/ge
• Training - Azure Static Web Apps | aka.ms/swa-training
• Documentation - What is Azure Communication Services? | https://learn.microsoft.com/azure/communication-services/overview

Previous demos in this series:
• Demo 5 - Dynamically Create an Azure Communication Services Identity and Token - Ayça Baş (Microsoft) | @aycabs - (3/7)
• Demo 4 – Dynamically Create a Microsoft Teams Meeting using Microsoft Graph - Ayça Baş (Microsoft) | @aycabs - (2/28)
• Demo 3 – Integrate Azure Communication Services Calling into a React App - Dan Wahlin (Microsoft) | @DanWahlin – (2/21)
• Demo 2 – Create an Azure Communication Services Resource – Dan Wahlin (Microsoft) | @DanWahlin (2/14)
• Demo 1 – Getting Started with Azure Communication Services, Microsoft Graph, and Microsoft Teams – Dan Wahlin (Microsoft) | @DanWahlin (2/7)
• Demo 0 – Introduction to Azure Communication Services – Tomas Chladek (Microsoft) | @tomaschladek2 (1/31)

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

Foreign, so I'm excited to be back here for I think this is like the sixth week in a row. We've been talking about uh integrating Services across the Microsoft cloud.

A

um Specifically, we've been talking about Azure communication, Services Microsoft graph, Microsoft teams Azure, and we're going to continue that today, with kind of a wrap-up talk about deployment options. So for those that don't know me, my name is Dan walline I'm, A, Cloud Advocate at Microsoft, and this project we've been talking about. I worked with my colleague Aisha Bashan and as a quick review. This is kind of what we went through and these are all recorded.

A

So you don't need uh you know, I realize you can't come every single week, although you should, but if you can't this is all recorded, so you can get to these and we started off by introducing How Could You embed audio video capabilities into pretty much any custom web app, and we can do that with Azure communication services. So we talked about how to set that up. In our case, we talked about doing it with a backed up, but again it's just a front-end technology.

A

So you could use it with angular and other Technologies out there. If you wanted now the last two weeks aicha joined us and she talked about how we could use Microsoft graph with Azure functions to dynamically, create a teams meeting and that would allow, for instance, a customer to go to a website, start up this audio video capability and then call right into a teams meeting um pretty cool actually and then last week she talked about how we could use Azure functions to get the tokens and the identity that we need for the user.

A

That would be making this call from the custom map. Now, that's all recorded again. So if you're interested, you can go check that out just go to the YouTube channel for this community series today, I'm going to wrap it up because I think the one thing we oftentimes skip is uh deploying these things. You know you learn about all the cool Technologies out there, but then at some point you have to deploy now there's many options that I could choose for this I want to kind of call that out there's different Azure app Services.

A

If you use containers, you could use containers I'm going to talk about one of my favorite Azure Services, though called Azure static, web apps, and if you haven't used this and you're using something like react or angular spell solid, next.js and version of angular. You know the list goes on and on and on Gatsby um anything that can generate static content, HTML, CSS uh JavaScript.

A

Then you could use Azure static web apps, and it does way more, though, than just host and we're going to talk about that right here now as a quick review, this particular app was built using react on the front end, but I want to emphasize. You could choose whatever you wanted and that's where Azure communication Services was used, the user could go to that.

A

That would create an event in a calendar and then that would allow them to call into, for instance, a customer service rep or maybe it's an employee using an app out in the field, and they need to talk one-on-one with somebody back at headquarters. Lots of use cases here all right. So if you haven't heard of azure static web apps, um this sums it up pretty well and I'll, give credit to my good friend, John Papa who's, also at Microsoft I kind of uh borrowed.

A

Can we say some of these slides here that he did a great job on so from code to global scale. You know when you're talking about deploying an app and let's say it is a worldwide app.

A

Now you start to get into things like CDN and hashing at the edge and all these other Technologies behind the scenes to make sure that no matter where somebody hits your app from in the world that they're going to go through the fastest route to get to that app while Azure static web apps can help us with that, and it takes all the complexity out. In fact, as it says here, you can build a static web app in literally minutes I'm, going to try to do that and prove that here.

A

So, if you haven't done it before it builds and hosts static web apps and when I say static web app again we're talking about a JavaScript type, app as an example. uh So it could be HTML and just CSS it could be HTML with JavaScript, but anything that you're using that's kind of a front-end technology would be fair game here for the most part. So that's angular react spell view. Gatsby and you'll see other options as I go to the Azure portal in just a moment.

A

Now, I'm not going to have time today to go into this part, but it does support built-in authentication and authorization. So you can get that kind of out of the box and then it also supports deploying your apis. So it's not just about deploying the front-end app, uh and you know this particular app is calling into Azure functions. Well, it'll also allow you- and this is optional, but I love it. It will allow you to even deploy your apis to Azure functions.

A

If you want, of course, that's totally up to you, you don't have to go that route, but it is built in if you'd like to use that and then finally, this is probably my favorite feature of all. Is you know if you're, not somebody who has to set up the build Pipeline and get all that code? Automated and you know anytime, a new merge comes in or a PR comes in, that's approved. You got to get that deployed somehow well for a lot of us.

A

That's where we turn to maybe our devops folks over here, and you still might in this case, but it will actually generate GitHub actions for you to automate this process and I'm going to kind of show you how that works here now. What this does is, let's assume you have a GitHub repo out there, public or private, either way and a push or a PR request comes in. What will happen? Is this will set up a GitHub action?

A

It'll generate all the yaml you need, and then you could tweak it if you need to that, would automatically deploy well first off, build and then deploy your content, including your functions, if you want so that pretty much anybody across the world can now hit this, and this even takes care of different regions and all that across the world, which is super neat.

A

So I'm going to show you this process here kind of from scratch, or at least try to in the time I have and then uh we'll kind of go from there and see how it goes. So with that, let me jump on over to a command window here and the first thing I did I ran this a little bit earlier, just because you know doing an npm install I, don't want to wait on that, but I generated a create react app. Now, if you do, you know something like angular review or spelled.

A

Do your thing same exact process is going to apply I'm going to stick with the type of app that was used for the previous sessions. We did in these Community calls.

A

So this is a typescript app I've already generated it just to show you if I do an LS here, you'll see the standard suspects package Json my source folder, all that type of stuff and I could run it locally. Now. The next thing I'm going to do, though, is use one of my favorite tools. If you haven't installed the GitHub CLI I highly recommend you check it out. If you go here for Windows, obviously it'll have a option for that I'm on Mac right now, so this actually allows you to do all kinds of things.

A

I'm only going to show you one, but you can work with PR's issues. You could create repos all kinds of stuff. The list goes on, in fact, if I just type GitHub repo create now I am in my react, app that was created all right and I'm just going to hit enter here and now it's going to say all right. Well, what do you want to do? Do you want to create a new repository on GitHub from scratch? No I want to push an existing local.

A

The code I just showed you so we'll hit enter there. What's the path well, I'm in the folder, so dot leave it repository, name, SWA, demo, sure we'll leave that and then owner. What's your org for GitHub in my case, damn Wally uh description, I'm not going to do visibility, I want to make public and then we'll let it do its thing here in just a moment.

A

Do we want to add a remote So that, obviously we can, you know, check in changes and do all that we're going to say yes, what should the remote be called? I always just default to origin, and would you like to push commits for the current Branch to the origin? Yes, I would all right. So let's go ahead and do that and you'll notice. What this does is now sets up a repo for us, pretty cool. So if you haven't done that, that's not static web apps, but I needed a GitHub repo all right.

A

So the next thing I'm going to do is I'm going to say: hey, GitHub I want to go um view the repo repo view, but I want to view it on the web. So I basically want to pull up a web browser, and this should Now take me to my repo there. It is there's all the code you saw that was in the folder. So, okay, we now have a repo. If you have never seen the GitHub CLI a little bonus there for you.

A

Oh, we can get to static web apps. um What I'm going to do now is go to the Azure portal and if we come on up top here, I'm just going to type static and you'll see static. Web apps comes up and then I'm going to hit, create and from here I'm going to let it create the resource. Group, we'll call this M365 uh demo dewaling make sure it's all unique looks good. Now you have some options here. You actually get a lot for free with static web apps.

A

So if you haven't checked it out before you'll notice, they have a compare plans. I won't have time to go into that right now, but there's actually quite a pitch to get for free like if you want to host a personal site check this out for sure. um So I'm gonna go ahead and go with that now.

A

I, don't have any Azure functions in this one, but in the actual, app I do and we'll wrap up with that in just a moment but I'm out in the West U.S, so you'll notice the areas we can deploy around the world for your functions uh and then it's going to say all right. Where do you want to get the source for this now I mentioned earlier?

A

That GitHub is kind of the default, but if you're using Azure, devops or even another one, you can make that work as well I'm going to go ahead and go with GitHub you'll notice. Dan walline is here: I could change the account, but that's good, and now what I can do is all right. Let's pick the org so well, Dan walline now I need to go, find that repository, um which was SWA demo I, think it was yep there.

A

It is and then what branch well I only have a main branch right now, so we're good to go now. This is where it gets really cool. So remember: I said you could do angular, you could do react, you could do spelled well.

A

These are the supported options and there's even a custom, because you can always do your own build process but notice angular Blazer next JS next react spell view just HTML that I don't think you can beat the performance on that one, but uh I'm obviously going to go with react, because that's what this was and then it's going to say all right. What is your app location like? Where is your package Json?

A

Well, if we go back and I do LS, that's obviously at the root of this repo? Okay, so we're going to leave slash there now. Do you have any apis now? Normally what I'll do is either make a folder called API or functions like it says here and that's where I put my Azure functions code in this case, I don't have it, but in the real app which is actually right here, which I'll get to that in a moment.

A

I do have that, um so we're just going to leave it and then the final is: what is your build location, your output, location? Now this depends um for react. It defaults to build if you use create react app, but if you use other options, you know there might be a different folder as the output, so you could kind of control.

A

What's the output location, because ultimately, this is where it's going to deploy the code up to static web apps and get that across the world for you so I'm going to leave the defaults here now, as I mentioned, this is going to generate a workflow file for the build. This is an Azure or sorry a GitHub action, and if you don't know about this, don't worry about it, because, if you're doing the normal stuff, you just take what it gives you and it works now for the custom app, which is the Azure communication ones.

A

I'm going to show you here, I did have to tweak it a bit because I had some environment variables, I needed to pass in to the build process. Things like that, and so you know I I, don't live in this world either some of you. Maybe this is your world. You do devops all day long! That's not me! So I did the normal I. You know go check out the help. Docs I go to chat, GPT I, you know, I do what I have to um so I I. Don't have all that.

A

Memorized is my point. um That's not my specialty! Actually, so what I'm going to do is hit review and create we're going to leave the defaults as react, and the deployment of this is actually normally really really fast. So we'll go ahead and hit create here and assuming I don't have any validation errors.

A

This part should kick off really really quickly. We'll hope it doesn't make me a liar here, but let's see all right there. We go notice done yeah, but there's a little more to the story, because now, if I go to the resource notice that first off it gave me a URL, let me Zoom that just a little bit more for everybody, that's going to be my website once it's ready if I click it now, it's going to say: hey I'm, still waiting on your content and I'll show you why?

A

Because notice, the source here GitHub well, let's go to GitHub and let's go to actions and look what's going on right now, it's actually building my project as we speak and react, I, don't know it usually takes two-ish minutes. Something like that. But I can actually drill into this, and once this gets just a little bit further there we go now. It's still starting to pull uh an image that it uses for the build, you'll, see an npm, install, run and all the normal stuff.

A

You would do locally it's going to do here and again you can control all this, because this is actually in the repo. If we go back, let's go back to code, let's go to GitHub workflows and this file right here, which you can totally change. This is the default it generated.

A

And again, if you don't know this stuff, don't don't let it scare you because it's actually not that bad once you get the hang of it, um but you know I'll, say I, don't want to say 99 of the time, but maybe 90 of the time. It's going to give you exactly what you want. You don't even have to change anything now, I mentioned for me. I did have some environment variables.

A

I had some API urls I needed react to know about I decided to do that through environment variables that are passed into the build process. You might use a different technique, though you might, when the react app loads, it might call a metadata service and get those urls it's just what I chose to do so. The bottom line is you could totally customize not only the build of the front-end app the static app, but also what happens with your apis and I'll?

A

Show you in a moment kind of you can even control what gets passed into those apis like environment variables, pretty cool stuff. So let's go back and let's see where we're at here, it should be getting close to done and I'll drill in yeah. So we're at like two minutes 11 seconds I told you it's two-ish, maybe three minutes or so. Okay, it's done so I see. I was close all right, so we're all good. In fact, if we go into here, um it might be one up.

A

You can actually get to the URL and click it I'd have to go. Oh there, it is right there right there or I could just go back to here and click it and prepare to be amazed. Folks, the hello world react app. That is what we've accomplished: okay, that part's not that impressive. But what is impressive is I. Just literally did the whole build process.

A

The whole deployment process across the whole world by the way, in whatever time, I just took pretty cool and obviously I didn't even have to do that much most of it was generated by the server. So that's the first part of this is just what can you do with it? Well, let's move on to wrap up here with all right.

A

That's great Dan, but we over the last few weeks have been talking about a Azure communication, Services app and like does that work because it has apis and all this fun stuff, and the answer is yes, so I mentioned I've already deployed this one and if I go to overview, there's my URL for it. Okay- and this is the full app which I'll run in just a moment- there is my GitHub repo, just like you saw now.

A

Yes, I have changed the yaml a bit there and tweaked that I can get to my GitHub action runs, um so I can do all kinds of fun stuff, but notice on the left here, if I go to configuration, notice, I'm passing in the Azure communication, Services connection string all right, because that is needed in this app.

A

uh So that's one thing: that's being passed in as an environment variable if you will client ID, client secret, tenant ID. Those are from my aad app registration. That I did because remember. I said we have to set up an event, so we can call into teams. Well there you go, that's the data there and then user is the actual user ID of who sets up the event, so that might actually be just a system account that sets it up and then customer service agents can join the calls.

A

So you can customize all of that. You can set up custom domains. You certainly don't have to go with this lovely domain. It gives you in fact I could just say, add a custom domain on Azure DNS or another one. That's all built in here's, my apis. Now these apis, because remember earlier, when I built this one I didn't give it an API folder or a functions folder or something like that right.

A

Well, that's because I didn't have one, but this one does have that notice. It says production function, app managed and that's because I told it go to this folder and that's where my functions are: please deploy those to Azure functions, and that includes my Microsoft graph function that sets up the event now here they are. These are the ones Aisha talked about last two weeks, so again check out those recordings.

A

If you're interested last week, she talked about generating the ACs, the Azure communication, Services user, identity and token, and then the week before that we talked about how you use Microsoft graph to set up the event dynamically. So we can call into the meeting. So that's all being managed for me and as I check in a new piece of code, for example- or you know, even change or read me per se- depends on how granular you want it to be. It can automatically kick off that build process and redeploy, as the main branch gets changes.

A

Pretty neat. You also have environments. So if you're used to like uh slots, we call them in Azure app Services. You can do similar types of things to preview environments. So if a PR comes in, it will actually generate a preview environment to try out that PR live super cool, you don't have to set it up.

A

It'll do that, for you just based on the pr uh the pull request coming in all right and then I'm not going to again have time to go into all this, but we we'd have to upgrade uh the plan right now. I am on the free hobby plan, which again gives you a lot of stuff. But if you want things like free, uh well, custom authentication, I should say not free, but custom, authentication, uh private endpoints things like that. Then you can go to the standard and you'll see the cost there.

A

It's like 642 a month, and there could be some storage as well pretty cool, so does it actually work? Well, here is this version of the app.

A

So if I go to this, it's going to say getting uh teams meeting, link initializing- and this is the app you've seen for those that have joined us over the last few weeks for the last uh six weeks. So let me pick a different camera here. I'll just go to. uh Let's see, where is my that's interesting, it's not showing up! Okay, we'll go to that one! That's fine turn that on- and this is the Azure communication Services uh component there. We are hello now from here.

A

I could log into teams and I would have a teams meeting set up because I've demoed that at least six times now we're not going to do that again here, I'm going to leave some time for questions at the end, because they've mentioned that, but I hope that gets everybody started with. How do you get started with this Azure static web apps and you know, is it something that would work for some of your apps?

A

That's up to you, um it's going to work for some and there's probably others where you're like no, we have a deployment process. We already do you know we do our own thing. Great I'd say stick with that, but this is definitely a pretty cool option so to wrap up and I'll put these in the chat um you can get through this tutorial, including setting up the Azure static web app and all the ACs stuff we've covered in the last six weeks. Okay, that includes the Azure functions the Microsoft graph.

A

The team's meeting calls all that fun stuff. You can also get two additional Microsoft cloud samples and when I say Microsoft cloud here generally, what I mean is we're using two plus Microsoft clouds, in other words, Azure plus Microsoft 365 or power platform plus Azure as an example, um the Azure static web apps training they have is excellent. In fact, I should have that up right here there is an entire learning path you can go through.

A

It covers everything you need to know if you're doing Blazer, they even have one with webassembly if you're interested, which is super cool, so check that out as well.

A

So with that I'll go ahead and copy these in the chat uh that wraps up our kind of six part Series, so I appreciate everybody listening to us hope you get a chance to check it out. They saw turn it back over to you.

B

Excellent done really really cool and great demo, um I. Think, as I said quite often we forget about, we show cool stuff in the in the tooling and vs code and all of that stuff. Okay, how do I get this then deployed? And it's like oh good point. We forgot about doing that. So thank you. Dan! It's really really cool stuff. Thank you um and it wasn't too difficult. It was actually quite easy to get it deployed in production, so really really cool stuff foreign.