Microsoft 365 Community Community Demos, 11 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Deploy Office Add-in that uses SSO to Azure App Service

Description

A 17-minute Developer-focused demo delivered by David Chesnut. Follow the steps outlined in a recent article to create and deploy a single sign-on (SSO) Office Add-in to Microsoft Azure App Service. Create project, configure it to run SSO, app registration, install an Azure Extension in VS Code, create a new app service, update the manifest and package JSON, deploy the web app, create a new workbook in Excel, and test your new add-in.

This PnP Community demo is taken from the Office Add-ins community call – January 2023, recorded on January 11, 2023.

Demo Presenter
📺 David Chesnut, Senior Technical Writer (Microsoft) | @davidchesnut

Supporting documents
• Documentation – Deploy a single sign-on (SSO) Office Add-in to Microsoft Azure App Service | https://learn.microsoft.com/office/dev/add-ins/publish/deploy-office-add-in-sso-to-azure
• Article - Single Sign-on service for Office Add-ins rolls out in Office on the web | https://devblogs.microsoft.com/microsoft365dev/new-single-sign-on-service-for-office-add-ins-rolling-out-in-office-on-the-web/
• Documentation - Enable single sign-on (SSO) in an Office Add-in | https://learn.microsoft.coms/office/dev/add-ins/develop/sso-in-office-add-ins
• Documentation - Publish an (static) add-in developed with Visual Studio Code | https://learn.microsoft.com/office/dev/add-ins/publish/publish-add-in-vs-code
• Documentation - Create Office Add-in projects using the Yeoman Generator | https://learn.microsoft.com/office/dev/add-ins/develop/yeoman-generator-overview

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

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

A

Foreign, my name is David Chestnut I'm, a senior technical writer on the office platform team. Today, I'm going to do a demo of how you can deploy an office add-in that uses SSO to Azure. This is a question. That's come up a few times like on the GitHub issues, I've seen folks struggling with it, and so last month in December, I decided to write an article to tackle this subject that, hopefully, is going to help people so I'm just going to do a demo.

A

So let me share my desktop here, so this is the article that's put together on how you can deploy to Microsoft Azure app service. This is still in uh review right now. So if you go looking for this, it's not published I'm hoping to get this published by the end of this week.

A

um So a fun thing that happened this all the steps of this article are working fine for the last couple of weeks and I was testing Linux deployments, Windows deployments, typescript JavaScript. It was all good and then Monday of this week it just suddenly stopped working, and it took me until about 30 minutes before this demo I think I figured out what the problem was and it's fixed.

A

So this is gonna be one of those fun demos where I'm really hoping it works when I get to the end of these steps, I'm basically going to walk through this article and talk about what you need to do and just to be clear. The focus of this article is really on what you need to do to the office add-in to deploy it.

A

It's not so much about how do you deploy in Azure, because there's tons of resources out there in Azure and there's tons of ways to deploy, there's continuous integration either through Azure devops or GitHub actions? You can set up deployment slots for staging and live so this article is really about what's just a simple path to deploy it, so you can understand, like what parts of your office add and need to be adjusted if you're going to an Azure app service.

A

And the first thing to point point out here is that we do have an existing article on how to deploy a static HTML to a storage account on Azure. This works or I believe all of the oauthis templates. It doesn't work with SSO and the reason for that is because SSO requires you to run server-side code. So for that you have to use an Azure app service and that's why this is a little different.

A

um So, let's go in through this now as a prerequisite. This is based on the oauthis template, so we'll get started with running yo office and we're going to build just a simple little SSO add-in and the thing you want to be sure at first. If that's working on the localhost before you deploy it, because you don't want to deal with both deployment and trying to debug stuff at the same time.

A

So we'll get that going and then once this is created, I'll walk you through how you create the service app itself.

A

All right so in my EO office I'm going to pick the SSO option, we can just use JavaScript. That's fine!.

A

Just give it a name, we'll run it on Excel, so call dvch, contoso SSO, test npm install all the pieces.

A

I think I'll mention, while it's doing that is the latter. Half of this article is about how you modify the project itself and some of these changes I'm going to be looking at putting a PR to the template itself, because I think we can simplify some of this and then hopefully, that'll remove some of these steps. So you don't have to do quite so much to update your pack your project and deploy it.

A

I forgot that, uh for some reason, when teams is running, I think it takes a fair amount of CPU power, because I notice, other stuff runs a little slower and speaking of npm install. While this is running, there's kind of an interesting decision you have to make like when you deploy.

A

Do you want to run npm install in the Azure app service? Or do you want to just upload the node modules, folder Trump local housed, I'm, not sure if anyone has a preference on that I do know that if you go and set up continuous integration in various paths, there are mechanisms to deal with that in this article, I just run the npn install on the server, but you can always change that. So, let's open up our project.

A

The next thing we're going to need to do is configure it to use SSO.

A

I guess I was hiding over here. There we go um so, let's open up the terminal.

A

Run our configure SSO. This is going to create an app registration for SSO and you can choose if you want to put that App registration on the tenant you're using for deployment or, if you want to put it in to the tenant where it's getting consumed, where like I, might be running. Excel.

A

Now what it should be doing is popping up a window. Oh here we go, I was going to say, needs to authenticate so I'm going to deploy it to my uh tenant, where I'm going to use it so I'll log into that account, okay signed in so now it should be off and running. It's going to be updating the project.

A

And so actually, while it's doing this, we can jump ahead. You're going to need this Azure extension installed into Visual Studio code, and then you can connect your tenant. I, have a visual studio, msdn subscription um and I'm going to connect, and then you have app Services up there and I already have a few, because I've been testing. So what I'm going to do is create a new app service, and these are the steps over here. By the way you can do other steps.

A

If you want to play to Windows steps, if you want to play Linux I'm going to use Windows because for some reason, I found this a little faster, at least for my scenario, so I'm going to select uh I'm going to right, click on app Services say, create new web app advanced and then give it a name.

A

Call this one web just I can remember this. Is the web server part of it? uh You need to pick a resource. uh You can create a new one. If you don't have one I've got one set up here: I right now, the SSO template is using node 16, so I'm going to node 18. Just yet it lags behind I, don't know maybe a month or two, and then you know it's testing down into updates. So I'm going to pick 16.

A

I'm going to pick Windows as my OS and then I'm going to pick my region I'm on the west, us so we'll do that and then pick one of your service plans. I'm gonna go ahead and use this paid service plan. I. Have you can also use like a free one? If you want or you can create one here.

A

Paid one tends to be a little more performant all right, so it's off creating the web app. Let's go back to here. Okay, we've got our project configured, so the next step is to start configuring. Our project I believe so we're going to want to update the Manifest. So if you open up your manifest and take a look like this is right, everything in here is going to be localhost and we need to change that to our actual server URL.

A

So let's go get that as well still creating it I'll give it a sec just to finish that, um but the easy way to update that you can set up a deployment option and the webpack config that comes with this template. It will look for localhost and replace it for you, but you do need to change it a little bit it just wants. You just want the domain.

A

I'll go put. The uh website URL here should be done by now. Yep there it is so I'm going to open it right, click on it and open it in the portal.

A

And this account is my web server account.

A

So now look at my web app. This is the app service which I try to keep this distinct. It's not the app registration, because that that's more about SSO! This is about writing the website. So I'm going to copy this URL to the website or yep and I'm, going to go back and put that in here.

A

You want to make sure you update this anywhere. It shows up your project so like it's also in uh if I go down my source helpers. There's this fallback auth dialog JS and there's a spot here where it's using that name.

A

And I need to double copy that there we go.

A

Okay, let's make sure we did this handing so that should take care of our manifest. um Then we also need to take care of our package. Json there's a couple of changes. We need to make. There's some helper commands I put in here that you can run command line to update the start, and you also want to delete this pre-start script, because it'll be deploy to Azure will run that pre-start and it's well. Actually, let me show you why I should point this out.

A

um If you go to the package Json, uh this start is trying to run this office ad and debugging package and that's basically attempts to launch Excel which isn't going to work on your server. So instead this has to become node middle tier.js, so just start the node server and then the other thing is. You want to get rid of this pre-start because it'll try to run a build and we're going to have the build already done, so we don't need to run a build. So we take that out.

A

That's what those two commands do and then, let's make sure we save these changes, we need one more update to webpack, which is we want to make sure we copy our package Json over to our distribution, so that when we deploy it'll run the npm install on the server side.

A

So I'm going to put that in down here near the bottom. This copy, webpack, plugin part.

A

And we already updated the fallback off. You need to update our EnV, so it's production, so I'll go to this.env files. Switch this to production.

A

Save that we're going to update our app.js now the reason we're going to update. That is because it is using a package- that's not going to work. Let's see this is Middle tier app.js.

A

uh It will want to use this office ad in Dev search to create an SSL self-science certificate, but you don't want to do that on the server side here. Oh we're on Azure um you'll have one already, and this will fail if it tries to run because it tries to look for a Windows uh I forget what it's called. It's like a Windows storage for certificates or something um so to make it easy. I, just copy paste, replace it now.

A

This is where I found out the bug was so I'm going to copy from this other project. I know this. One works and I will need to go update the article, so it has this correct code, so I'm just going to copy this over and Save and I believe.

A

That's all. We need to do on this, so I'm going to run the build.

A

And that's going to create a distribution folder up here. Basically, it's running webpack. It's going to copy all the files into a dist folder and the disk folder is what I'm going to deploy up to my web server.

A

Now, while that's going to open up another portal to Azure now this is the tenant that's going to consume and it has my app registration at the moment because I need to update this as well. So if I go to my app registrations and sort by date, because I have way too many of these uh there's my contoso SSO tests. This is the one that the npm configure command ran and it created this for me. But if you look at like you redirect your eyes, you'll see these still say localhost 3000.

A

So these need to be updated as well. um You might want to create multiple app registrations like when you're testing locally. You might want this one and you could create a copy of this and then have another one: that's using uh your server or a staging server or whatever for Simplicity I'm just going to edit this one.

A

um So we just need to go. Get.

A

A

Copy that now this build's done so, let's get this going because this might take a moment so I'm going to right click. My dist folder, because I want to deploy it I'm going to say, deploy to web app I'm going to pick the one that we just created, ketoso, test, SSO web, say: yep, go ahead and deploy it because it's going to overwrite, what's up there and I'm going to say yeah we can default to that in the future. So, if I keep deploying if I make updates to this folder I can keep uploading it.

A

So here we can see it's doing its deployment, so it's packaging everything up and setting up a server and then it'll start node for us. uh Whilst doing that, it's going to go back to the app registration it's over here, so we can make sure we update this save it.

A

You don't need to update this task, paid what I'm not sure why the template creates. It I think it's that used to be the name or something so I mean change it. If you want I just leave it alone, uh then, if you go down to expose an API, you have this application ID right. So this also needs to be updated. With that domain.

A

So that your SSO is going to work correctly.

A

All right, so that should take care of that now, let's go back and check contoso site, so we're still deploying so successful, but I wait till this thing stops running, um but once it is running we should be able to open up this website and just kind of test it um or task. Pane.Html.

A

Okay, we're getting info backs! That's a good sign!

A

um Let's see get this part to work so I'm going to go and Excel create a new workbook.

A

I'm gonna go ahead and just side load this, um so I'm going to go just upload the Manifest from just from locally- and let's see here, let's go to the demo. Folder I need SSO test I'm not going to use this manifest. That's the localhost one um in the dist folder is the one that got built. That's switched out with the correct domains, so I'm going to open that one upload. It show task, Bay, SSO, test, yep, okay, see if it works.

A

Oh, oh I got an error. Well, this is a promise. I mean earlier I thought. Maybe that would work because it was this one's working um which I did earlier is test nine, so I'm gonna have to go back and look at some code. Difference between these. This is the thing I was worried about.

A

So next steps I will update the article so that for sure it works correctly. I'll figure out why this is failing in some cases and hopefully get that published by the end of this week and then, after that, I'll be following up with the folks on the template to submit a PR and see if we can makes fewer steps for deployment.

A

So that is it so please get turn it back over to you great. Thank you David. That was awesome. Demo.