Microsoft 365 Community Community Demos, 10 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: New Development Containers for SharePoint Framework (SPFx) Samples

Description

In this 22-minute developer-focused demo, Hugo Bernier shows it is now possible to build and test samples built in any version of SPFx without worrying about dependencies with remote container support in VS Code. Uses Docker Desktop and the Remote containers VS Code extension (Preview). Understand benefits of using containers, and the solution including manifests, certificate trust, rebinding ports. Find out how to tell if sample supports containers, documentation and more. All SPFx samples being containerized, starting with v1.13, then v1.12 … This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 10, 2022.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Documentation - SharePoint Framework development tools and libraries compatibility | https://docs.microsoft.com/sharepoint/dev/spfx/compatibility
• Site - Get Started with Docker | https://www.docker.com/get-started
• VS Marketplace - Visual Studio Code Remote – Containers | https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
• Documentation - VS Code Remote Development | aka.ms/vscode-remote
• Docker Hub - m365pnp/spfx | https://hub.docker.com/r/m365pnp/spfx
• Guidance - Opening a sample using a development container | aka.ms/spfx-devcontainer
• Documentation - Set up your SharePoint Framework development environment | https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

All right so today we're going to be talking about new development containers. First vfx samples. This is a crazy concept. I'm going to be going fast. I apologize because there's probably like an hour and a half's worth of material in here, but let's see what we can do all right.

A

So if you look at your spfx uh or sharepoint framework development, environment right, this is an article that tells you what you need to do and one of the first things that we tell you to do is you should install node right and we tell you you should install node 114 now, here's the problem is every version of the sharepoint framework, and this is an article that's available on the docs on microsoft.com, but every version of the sharepoint framework potentially is only compatible with uh certain versions of node.js right because obviously node.js is evolving and so is the sharepoint framework.

A

So, as you can see here that the- and this is soon to be uh obsolete, I guess as for vesa's announcement, but uh the latest version is 113.1 right and it's compatible with node, 12 and 14.. But if we look at maybe 112 one, it was compatible with 10, 12 and 14. and if we go all the way down to, let's say version 141, because maybe you're running on an earlier version of sharepoint, it's only compatible with node 6 and node 8..

A

Now here's the problem is that we can only install one version of node at the same time on your workstation. Yes, there's techniques that you know you can use node version manager or nvm, and if you're interested in that, we have a sharing scanning session, where we show you exactly how to do that. David does a great demonstration of how to set it up.

A

But let's go take a look at some of the issues that we're seeing uh with the spfx samples and extensions, and things like that, probably for every 10 issues that we see, nine of them uh with a plus or minus one error margin is actually related to a node compatibility. So someone is downloading an old version of a sharepoint sample and these samples have been around for probably like five years now, so someone's downloading an old sample that was designed for sharepoint.

A

One for spfx141 and they're trying to run it in like node, you know 72 or something like a super new version of node, which doesn't even exist right now um and they're reporting issues with the with and, of course, there's nothing really. That tells you uh in a friendly way that this is the wrong version of note.

A

So how do we deal with that right if we have all these issues that are being related to node compatibility? So let's go take a look at what these samples do for us right. So if we go to an example web part here, which is the enhanced uh powerapp web part, we see if on every readme document, for every sample has a compatibility section and they all have the version of sharepoint framework that it uses the version of node that it is compatible with. In this case it looks like it's all.

A

It only works with that version of node for whatever reason, but new and improved. We now have the ability to actually create remote containers and a lot of the samples have remote containers. Now, you might say, what's a remote container. Well, imagine if I was able to say I'm going to create a virtual machine that is a separate machine somewhere. uh You know that you don't even know where it runs like in theory.

A

It runs on your machine, but it could be in the cloud and it's going to have all the dependencies, all the environment, settings and everything you need to do to actually run this particular sample, but think also about the other scenarios.

A

How many times, I'm sure that's never happened to you, but how many times have you been on a project where you know the new developer joins and it takes them two weeks to even get set up with having the ability to build the project, because uh there's so many crazy dependencies, and so many undocumented things that happens now.

A

Imagine if you're able to package that that entire project, an entire solution into a container that actually is stored with this in source control with um or the definition at least, a store and source control with the solution and the act of opening that solution in a container opens all the dependencies. You need to actually run that solution.

A

Now that's pretty awesome and that's not just limited to samples. So, let's, let's actually show you how this works. So what I'm going to do is I'm going to open that exact same sample in visual studio code. Now one thing that you'll notice in the corner. When I open the sample, I actually get a prompt. Now I choose to have that prompt show up for me. You don't have to be prompted every time, but it says hey. This folder contains the dev container configuration.

A

You can actually reopen this solution in that bubble in that world. That has all the dependencies and if you click on that, let's see if we can make that happen.

A

If you found reopening container um what we should see, let's see if it happened.

A

Now the other option is, if you choose not to get prompted, you can actually just click on the menu or click on that little fancy, little thing in the corner and say reopen in container either way. What will happen is it will actually take that same solution and will launch it. It will launch visually code again, but now it's actually running in a server or in a container that is dedicated for this solution, and I you know for just to be transparent here. I didn't cut any of these videos.

A

I did speed up some of them in some cases because, like doing an npm install and watching me do, an npm install can be boring, but what you're seeing here is actually it has reopened the solution, but now it's actually coming from a different world, you might even see like the prompt, is actually no longer. I run on windows machine.

A

This is not your uh usual windows prompt right because it's running in a linux container and you can actually see that if you look in the corner here right here, it says you're editing it on a dev container, we've labeled it as an spfx113 container, and so this is actually really cool. Now, just for fun. Let's take a look at what happens when I go to my terminal within the container, and I just type, if I can actually type gulp build now, I just opened the solution I didn't do. Npm install.

A

I didn't do anything like that. I just ran gulp build and it already builds automatically and that's cool and we'll talk about. You know how how this works. There's like a lot of voodoo behind this, but it allows you to actually be able to build a solution pretty much instantly from opening it, regardless of the version now think about. You know for those of you who are actually running, uh maybe they're still on sharepoint, 2016, 2019 or maybe their organization has decided to. You know the youtube policies.

A

uh As per uh ac's comments, you know due to policies, they've decided. No we're not going to go past this version of spfx for whatever reason or this version of node, for whatever reason now you're about to actually satisfy these kind of requirements. By doing this, now, let's look at the version of node that's running in this environment. So if I type node v right, if I could actually type that that is node dash v it'll tell me that it's running version 114, eight, uh no 14, 18.. Sorry.

A

um Now, if I actually launched this solution outside the container, and so again this is going to be confusing, but I do there's. Basically the solution can run within the container or something that's called remote or it can be launched locally, which is really from within my machine. Only let's take a look at what happens. So if I say you know, let's just close this whole project, let's reopen it.

A

One thing you'll notice is in the recent solutions that show up at the top there you'll see that it says I have the enhanced powerapp web part as a dev container, and I have the enhanced power app as a not just a regular project. So I'm going to click on that now it's actually reopening the solution on my machine locally right and you'll notice that my my terminal is actually very different.

A

My prompt is very different because it's actually now running powershell in my machine and if I was to type a node here, node v again, that's a big assumption. Assuming that I'm able to actually type node v.

A

I'm my machine is actually running one uh 12.20.2, so that's kind of cool. Now, let's do something a little crazier. Let me actually go to well behind the scenes here. I actually replaced the node version of my on my computer to something really old. Now this video is not cut. I just sped up the boring parts, but let's show you the differences here all right. So again, I'm going to type uh node v my this is my local machine.

A

It's running node 421 so from many many years ago, and if I do a gulp build on my local machine, I obviously don't have the environment requirements to be able to run this project and node will tell me, maybe not so helpfully uh that it can't do that right now.

A

You need to have a magic decoder ringtone, just to actually understand that this is not the right version, but let me reopen that same solution in the container again, the container has all the definition of what that solution needs to be able to run with all the dependencies and environment variables and everything.

A

So this is actually opening now in a virtual machine. It's giving me that new fancy prompt and if I do the same thing, I do a gulp build, or I was going to do. Node version first, just to demonstrate again that this is running in node 14..

A

Now, if I do a gulp build, what we should see is that it's actually going to build without any dependencies right, so this is kind of slow and boring. So let's speed that up a little bit all right. um I skipped the whole part here, so you don't have to watch me. Do this now, um let's take a look at a little bit more what's happening here.

A

A

If I close this window again and I open a completely different project- a project- I've never opened well, I mean in reality I've opened it because I had to configure it, but I went and deleted all my settings and everything I reopen a brand new project and this is going to be the experience you're going to get when you're going to download samples uh from the sample galleries you're actually going to get the same thing.

A

It's going to prompt you again, it's up to you to decide whether you want to be prompted or not, and then what it's going to do. Is it's going to switch into the container? It's actually going to provision a container for this machine, as you can see here and then what it's going to do is we've already pre-configured every sample? Well, okay, the only samples that are published right now are 113, but we I have pull requests that I'm going to submit to. Actually uh you know we're going through 112 and all that stuff.

A

We are testing every sample as we go through this process, but look at what happens as soon as you open the solution. It automatically sets all the dependencies and finds out the right version of node finds out the dependencies. All the tools that you need to do this uh it does. It takes care of that all for you right and then what it does is it generates a certificate for your uh for this machine because keep in mind, even though you're running this, in theory from your local workstation.

A

um This is a remote container right, so it needs its own certificate and that's normally what you would do if you did gulp trust dev. I can never remember the command, but you know that one, the trust dev certificate, so it's generating the certificate for us, and it's doing that now.

A

If we can show you the files on that solution, what one thing that you should see eventually, if it's uh and you can see the videos- is sped up by how fast the thing is spinning in the bottom, in the bottom taskbar here, uh but eventually what should happen is these certificates should actually show up automatically added to the solution.

A

um There you go so we have a cr file, for I guess uh windows and the pem file for anybody that can't really deal with certificate files. They automatically get generated for you and get added to your project. Now this is a remote container.

A

So that means that those files are not actually physically being created on your machine.

A

You would have to actually download them and install them on your machine, but if I did a gulp serve here and of course this is running in a remote container, so I have to do no browser because if I did gulp serve, it would try to launch a browser in that machine and there's no browser installed on that machine, because it's a remote thing, so I can actually go to the certificate. Go download it on my machine um I'll.

A

Just I downloaded a few versions of this, but I'll go download it on my machine and I'll go install it using whatever mechanism for your workstation. You would need to do and then, if we speed that up a little bit here once I've, actually you know done the gulp serve. Eventually I get the fancy reload reload, which is telling me hey now it's time to go refresh my page right.

A

Let's go take a look at what happens now, as it's doing this one thing that the we've configured the machines to do is: they will actually open the ports that they need to be able to work on your machine. So it's just going to rebind that remote containers port to your local container, so in this case in a spf x12 or above you're going to get the manifest and the live reload.

A

If it's an older sample, you have, I believe, three ports that get opened, because you have also the local workbench that is opened all right. So, let's move forward.

A

If you try to debug the solution on your local machine- and you get an error message like this, that's probably because you haven't either installed the certificate to trust your machine or, if you look at the traffic on your machine, you'll actually see- and this would be on your local machine- you'll- see that there's like a failed error message in your http traffic, because it's trying to get the manifest for your web part.

A

All you really need to do is open that url in a separate tab and that's depends on the browser but open it and then you'll notice. It's probably saying something like this right, hey. I don't trust that that thing, so I'm not gonna, let it run it. So obviously you need to make sure your certificate that's been created, for you is trusted so that you can debug this, and if the demo gods are with me, you should be able to actually see your web part deliver all right.

A

So I know I'm going fast, but there's a lot of concepts to explain here. So how does this magic happen? Well, the first thing is behind the scenes. These remote containers are done using docker, so you would have to install docker a desktop on your machine, but again we'll talk, maybe in future sessions about what's the potential for even having some of these containers in the cloud and or shared just keep in mind.

A

Docker has recently changed their licensing or pricing structure, uh so you have to make sure that you're following the right pricing, uh you know that there is a certain charge if you're an enterprise user. But again that's a darker thing that I I will leave it up to you. But the other component to this magic solution is that there is a extension. That's currently in preview for visual studio code, that is called remote containers and that's the thing that added that little bar at the bottom.

A

That allowed me to go back and forth between between containers, local containers and remote containers.

A

Now the other thing that you'll notice is the samples that are um dev container enabled will actually have a dev container folder and a dev container.json which actually uses the darker images that have been created for you.

A

What you'll see is we have a in docker in the docker organization. We now have an m365 pnp, slash spfx organization, where we've taken the definition of every single version of spfx that we've created. This is something that wall deck has been doing ever since the first version of sharepoint framework he's actually been maintaining uh docker containers for every single version of sharepoint framework, so they're pre-configured with the right version of node and everything and, as you can see, there's quite a few samp a few containers here.

A

So what we do is we bind to those to those containers for you, so we don't have to have a copy of a giant virtual machine, and then we have a script that we've run at the start of every uh container to go. Do all the stuff that we just saw installing the dependencies setting up the trust certificates, converting the certificates for windows and and non-windows devices, and other things like that, all right now, if you're wondering okay hugo, that was way too quick.

A

How do I do this well, every sample that is, that is container, enabled and soon to be every single sample uh in the minimal path to awesome. There is a section that says: hey if you want to do this sample as a vs go remote development uh go to this url right and it'll actually walk you through the steps on how to set this up, uh and I think this is kind of what it looks like now again. All this stuff is in preview right. Where we're trying to innovate quickly.

A

We don't want uh perfection, be the enemy of innovation, but what's next with this well first thing is all web part samples are going to be not converted but enabled soon. The one thing that I want to make clear is: we are actually testing that every web part works in a container so that again, people that are having issues with opening old samples or samples with different versions of node will be able to do this.

A

We're also going to be extending to the other repositories, the extensions adaptive cards and the teams samples, where applicable, because not all team samples are going to be suited all right. So that's it for me. For today I wanted to thank a few people really helped me with this uh don kirkham actually jumped in over a weekend to just you know, I I guess I I touch the sensitive nerve and he pretty much dropped. Everything to help me solve this issue, gary trainer, as always as soon as you mention something that that sounds potentially difficult.

A

He just has to do it in like half an hour just to show that you know it's not difficult.

A

uh Waldek who's actually been supporting all these uh docker containers from the inception of spfx and paul schaefflin, who I think couple years ago, brought up the idea and opened an issue in the exte in the uh sample repository to say, hey, it would be cool if we could do this. The technology was not quite there yet when, when we first started talking about it, but now it's available so to find out more information, you can go read more about visual studio code, remote development, because this is not unique to sharepoint framework.

A

This is something you can use in other contexts, and if you want to read more about how to run these samples in remote containers, you can go to the link that is provided in every readme or you can go to this url here. That's it for me for today. Thank you for your patience and have a great day.

B

Thank you, hugo for that very great work by everybody to enable those scenarios with the containers. Hopefully, that'll help some folks out trying out the samples so really really cool to see that coming along.