Office Addin SSO Node JS + CI/CD

[lenain71]

Note: This repo is only for questions related to its samples. If you have questions about how to use office.js or the Office developer platform, please post your question on https://stackoverflow.com. Tag your question with office-js or outlook-web-addins

Question

Is anybody tried to make CI/CD to build and deploy the sample for NodeJS SSO/typescript project using Azure Devops ?

I'm trying to deploy the sample for outlook add-in, by hosting the code of the nodeJS app to a Azure Static Web app where building the project will take place in Azure.

In order to do so, I'm start a azure pipeline and I'm stuck on the result of the npm build task, because my build agent does not produce the dist folder ? (no issue locally)

Any help will be appreciated !

here for info my yaml file for the build : `trigger: branches: include: - master - dev

pool: name: 'XXX'

steps:

• task: NodeTool@0 inputs: versionSpec: '14.x' displayName: 'Install Node.js'

• script: | npm install npm run build displayName: 'npm install and build'

• task: CopyFiles@2 inputs: SourceFolder: '$(Agent.BuildDirectory)/dist' Contents: '**' # Pull the dist directory TargetFolder: '$(Build.ArtifactStagingDirectory)' CleanTargetFolder: true OverWrite: true

• task: PublishBuildArtifacts@1 inputs: PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files ArtifactName: 'www' # output artifact named www`

[nancy-wang]

thanks for the question @lenain71! @AkhileshShah-MS might you be able to help here or know of the right contact for something like this?

[davidchesnut]

Hi @lenain71, it's important to know that you can't deploy an add-in using SSO to a static web site. SSO requires you to run server-side code so you need to use an Azure app service. Here are some notes I put together on a similar thread on how you could approach deployment: https://github.com/OfficeDev/Office-Add-in-NodeJS-SSO/issues/61#issuecomment-821517972

Hope this helps, David

[lenain71]

Hi @davidchesnut, I had already come across this post.

It seemed to me that there was going to be a problem !

It's crazy that the official documentation doesn't mention that, as if nobody (apart from you) needs to deploy their dev in production envrionment!!

So I'm going to do the test on a classic web app and make ajustments.

Many thanks

[davidchesnut]

You're right, we need to add this to the official documentation. I'm tracking this on the backlog here, and internally in item 4688697. Will work to get to this soon. Thanks!

[lenain71]

@davidchesnut another question of this stuff...

I'm using actually the TypeScript version of the Addin node JS SSO, and I have already modify my own version of the npm package office-addin-sso, in order to bypass the devcert/credential manager stuff. But right now, It does not working a 404 not found on all endpoint serve normally by the express server launched from Azure Web App

https://myazureWebAppURL//auth?_=XXXXXXX 404 (Not Found).

I suspect an issue of build... How the express server can be launched from the npn package office-addin-sso when the entire dist folder are copy to the Azure classic WebApp ? Is anybody have already deploy the solution using the typescript version of the addin ?

(I have already made the entire GUI using React, tested successfully in local mode, and it would be more than problematic to start all over again !!

Thanks again for your futur support !

[davidchesnut]

Assuming you are using Windows for your Web server, be sure you made the following change so that your node server starts correctly:

• Modify the package.json to just start the node server with "start": "node ./bin/www"

This is from steps I used to deploy to an Azure App service (full steps are here: https://github.com/OfficeDev/Office-Add-in-NodeJS-SSO/issues/61#issuecomment-821517972)

[lenain71]

Not so simple actually, like mentioned, I started the project usin typescript yeoman generator. The only build artefact that I have are the dist folder, which does not contain the "server express" code of the office-sso-addin nom package. Locally, it's a combination of npm build and custom webpack command used to start the Dev server, and I don't know how to simulate the same things... ( Maybe custom kudu deployment script ??)

[davidchesnut]

Okay, I see now. The SSO template uses the command "start:server": "office-addin-sso start manifest.xml" in the package.json. And unfortunately, the office-addin-sso package does not work in an Azure environment. You need to replace it with a node server. The best path forward is to use the sample at https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Office-Add-in-NodeJS-SSO/Complete. The sample provides the complete node server and can be deployed to Azure.

[lenain71]

Thanks @davidchesnut I can confirm with the solution provided on https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Office-Add-in-NodeJS-SSO/Complete, addin is deployed in production mode, using Azure App Service.

But now, the funny part, I don't know how te remapped the front end part, which is codd en TS and React, into this solution.

Do you have any workload to share in order to build and deploy such kind of developent !

[davidchesnut]

Nice! For SSO, hopefully you can just put a wrapper around the call to getAccessToken and call it from your React pages when you need the token. For the fallback auth you just have to implement MSAL, open a dialog, and sign in the user. There's a sample that shows how to do this with React and TS at https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Office-Add-in-Microsoft-Graph-React. So hopefully you can just mix and match these sample pieces together.

[anantharengan]

Thanks @davidchesnut I can confirm with the solution provided on https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Office-Add-in-NodeJS-SSO/Complete, addin is deployed in production mode, using Azure App Service.

But now, the funny part, I don't know how te remapped the front end part, which is codd en TS and React, into this solution.

Do you have any workload to share in order to build and deploy such kind of developent !

hi @lenain71 i am facing an issue as mentioned here https://github.com/OfficeDev/Office-Add-in-samples/issues/440 ( addin is deployed in production mode, using Azure App Service.) is it working for you. if so how did you deployed it to app service from vscode. I deployed the below method

Can you please help out here @davidchesnut

[davidchesnut]

Closing this issue, and tracking @anantharengan at #440

[davidchesnut]

Reopen, still need to add documentation on deployment.

[davidchesnut]

We've added the documentation on how to deploy SSO add-ins. See Deploy a single sign-on (SSO) Office Add-in to Microsoft Azure App Service