Microsoft 365 Community Introduction to Viva Connections Toolkit, 15 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Deploy and publish your Viva Connections extensibility to production

Description

In this video we focus on showing how you will package and deploy your Viva Connections solutions to production tenant. We use the Viva Connections Toolkit to simplify the packaging and then perform the manual steps to deploy our solution to the tenant app catalog to be used in the tenant specific Viva Connections deployment.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=UlB3c6-8g_A&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=8
⬅️ Previous video on this series - https://www.youtube.com/watch?v=OmFKAw0g61w&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=6

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Package and deploy your existing Viva Connection solutions to production
- Different settings and configuration options
- Using solution in production mode without running localhost

✨ Demo Presenter
• Vesa Juvonen (Microsoft)

📃 Agenda
0:00 Introduction
0:25 Configuration options for packaging
2:23 Packaging your solution for production usage
4:12 What does solution packages contain
5:15 Deploying solution to production tenant
6:02 Moving to admin center and app catalog
6:44 Deploying solution to the tenant
8:03 Using deployed solution in the Viva Connections dashboard

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

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

Sharing is caring! You are awesome! 🧡

A

Foreign, so in this video we'll have a look on. How can we then take our existing Ace, which we built using a SharePoint framework and adaptive card Technologies and deploy that to production, and, as this is a SharePoint framework solution, it is actually surprisingly easy. So I call out few things here which are hopefully not confusing, but the settings which were controlling how things are actually working. So, first of all, by default in our packaging solution. We actually have this magical setting enabled by default, which include client-side assets, and this actually controls the packaging logic.

A

So as we want to have all of the output JavaScript from the transcompiled typescript inside of our solution package in this case for a simplified deployment, and the true setting here basically gives that that option for us- and that means that, as part of the spb kg file with sustainability to be deployed into production will have the JavaScript files and image assets and all of the other assets as well with then enables that package to be sent to any tenant within the world, and it will. It will work in the same way.

A

So the Simplicity of the deployment in production is nothing more than actually packaging everything in the solution and then having that assets available through the solution to be reduced in any Town within the world. So the setting this this one, the include client-side assets, which is true by default, uh but in in some cases as much we could to double check. That is actually true.

A

Now, if you there are other alternative options that could be false if you would want to actually host these JavaScript assets directly in CDN from Azure CDN as an example, which is an option. That would be the way of the reason to put this in a false, but by default certainly not needed, and now, if we then go and have a look on our code, so we haven't actually changed any code in here.

A

This is a completely default, a extension, so we're not going to do any modification there, because we don't actually need to modify the code or prepare the code anyway for production usage. Of course, we would need to opt, or it would be recommended to update some of the developer settings and all of the URLs and all of that sort of descriptions, so that the information is correct, as you start preparing production usage on the solution level, but let's do the the packaging and Automation in here.

A

So first of all, we are in our development environment I'm, going to use the development tenant for production tenant mimic, but let's use it in a way that we wouldn't use it in a real production world. So that means that I cannot really use the deploy solution and I cannot really access most likely the app catalog again because in many cases the developer is not the tenant administrator and the developer does not have the right permissions to take the solution into a us in a production tenant.

A

So how this works is that we basically bundle the ready to be used. Production uh predictably, use solution in production mode and behind the scenes and the command is called bundle. That's the ship and that basically does the transcompiling and and creation of the solution packages and to be done in place. So you can see a web pack being executed in here and that creates the bundle to be ready to be used in production level.

A

So it's optimized for Action level and then the second thing here is that we want to use the package production and that actually prepares the sbbkj file and spbkj file is then the solution package file which we can take into account uh in or we can share with our customers or take that into deployment within the production.

A

That's, although by the way, also the same package, if you are a partner and want to offer your Aces to the partner, Center and Outsource and SharePoint store and dealer connection store, and that is exactly the same package which would be submitting there as well. Now, let's actually open the the package. So let's go to this folder and we can actually see the folder in the file system here as well.

A

So if I extend the SharePoint folder, we can say the spdk file in here, and this is the file which is now ready to be used in production in any channel within the world and as inside of that file, we have all of the assets it will just magically work now. The kit could point to understand here is that the debug from the folder actually contains. What's inside of the spp kg file, it is actually a zip file.

A

So it's an open XML file which contains a lot of different assets and if we start extracting, for example, the debug folder to see what's inside of the files, we can see that there are JavaScript files and there's the code files and definition files which are actually the code behind us, the scenes which is getting executed whenever the ace is getting rendered. So this is, for example, the optimize Javascript file tend to be ready to be used in production review.

A

The additional files here are mainly for introduction files, so they are XML files to introduce the component types, the component title and all of that within a production usage. But let's have a look on this in practice. Okay, so we have now the file. How would I deploy that in a production tenant? First of all, we need to access the file. So let's actually click add that one and say revealing: File Explorer and let's go to the SharePoint folder and solution folder there we go and there's my sbbkj file and it's pretty small.

A

Now, let's see if I can actually, yes, I can beat Zoom that out and so I can actually say that the spp K2 file is the file, that's the one which we will deploy the production tenant whatever the tenant is in my case, I will actually use the same tenant because it doesn't really technically matter. The steps are exactly the same. So now, if I go to my app catalog, let me actually copy the URL from here and then I. Let's actually do that from here.

A

So let me go to my tenant and then let's go to the admin UI.

A

And then we open up the Microsoft trays at 65 admin Center a bit of a confusing base and the aces Vivo connection Solutions are still being deployed to a SharePoint, app catalog for now, which is a bit of a confusing thing. But let's see how that's going to work in the future, if I open up the SharePoint admin Center and now from here, we can then see advanced settings, no more features. Yes, it is, and from here I can actually see the apps settings and there we go.

A

We are now in the app catalog of this particular tenant, and this is where we will be deploying our solution and aspect KJ file, either using the upload option or simply track and dropping the file directly from the file system to that particular location and that's going to then started to upload operation in a tenant and then a super important options. Let me Zoom this a bit and as the tenant administrator in the production tenant.

A

Of course, the tenant administrator needs to understand what are they deploying and what's actually getting deployed before, so that they can approve the usage. A few settings here we can see that it's actually data is getting from SharePoint. That means that the solution is automatically getting hosted by SharePoint behind us to scene, so no reason to host anything in Azure or AWS or anywhere else, which is a really cool, Advanced option or Advantage with the spfx, and then we are going to have this app available in all sites.

A

That is a technical option as well, so you can isolate the solutions to be available only in specific sites. Let's see my uh the solution. Name is my Ace client-side solution. It is actually that one on the top of the list and I can enable that to be now available within a tenant. It is now available.

A

We can close, and now that means that if I go back to my tenant dashboard and if I go to my dashboard in here and I edit, my dashboard, we can actually see that new ace to be available underneath, probably my Ace. There we go and there's my Ace, which is available and it's rendered improperly, even though we're not running the localhost uh within our machine. So again, production ready automatically hosts that within the app catalog so making it super super easy to be used efficiently within well.

A

Super super easy to be distributed efficiently across the towns, but that's all we're going to use we're going to do within this video. Hopefully, that clarifies clarifies the packaging process for SharePoint framework solution. Thank you, foreign.