Microsoft 365 Community Community Demos, 24 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Improvements to the Community SPFx Samples Gallery

Description

In this 25-minute developer-focused demo, Hugo Bernier shares the latest developments making it easier to access and use PnP code samples found in the consolidated Samples Solution Gallery and individual PnP samples repositories. View code structure, complete with syntax highlighting, directly within GitHub without downloading it. Download individual samples as a ZIP instead of cloning the entire repository. Samples now have remote containers, allowing you to run and build in a portable environment pre-configured with all necessary dependencies unique to each. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 24, 2022.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Universal Samples Gallery - Sample Solution Gallery | https://adoption.microsoft.com/sample-solution-gallery
• SPFx Webpart Samples - Samples by Framework | aka.ms/spfx-webparts
• The Matrix - SPFx Compatibility Matrix | https://tahoeninjas.blog/2019/12/30/spfx-compatibility-matrix/
• Documentation - Visual Studio Code for the Web | https://code.visualstudio.com/docs/editor/vscode-web
• Documentation - SharePoint Framework development tools and libraries compatibility | https://docs.microsoft.com/sharepoint/dev/spfx/compatibility
• Tools - Remote – Containers (Preview) | https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
• Documentation - Remote development in Containers | https://code.visualstudio.com/docs/remote/containers-tutorial

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

Hi everyone, my name is hugo and I'm lucky that I get to manage the spfx webpart sample repository and extension repository. I get to see all sorts of really cool, pull requests and lots of cool samples, and I get to try every sample I test every sample. I look at every sample to make sure that the code is not horrific and you'd be surprised that we rarely have anything we're like. Oh no, we can't show people that that's just bad coding.

A

All the samples we get are usually really awesome and they always demonstrate a cool concept or sometimes uh like some of the contributions that are made by the people on on this call we'll get samples that are full on solutions that hey you could probably take it package it and deploy it to production.

A

Now, let's just be clear that these samples are really intended to be just that they're intended to be samples they're not intended to be for you to just take them and put them in production. You can, if you want to, but that's not the intent, and so because of that one of the things that we try to do all the time is make it easy for you to get to the code really really easily and get started using the samples.

A

Now here's the problem with a lot of spfx solutions or pretty much all node.js solutions is that there's a few challenges. First of all, the github repo that contains uh the samples is actually quite large. I can't remember how many samples we had, but we have, but we have a lot of samples. So that's the problem is what, if I want to look at a simple web part just to look at a concept, and I really just kind of want to play with that sample without having to clone the entire repo and things like that.

A

So let me show you a few things that we can do. The first thing that we can talk about is when you go to a repo and I'll try to click and see if it's, uh maybe I jinxed my demo by saying the demos has no safety net there.

A

You go all right, so if you go to the actual repository itself right, one of the cool things that you may not be aware of, because this is a relatively new feature of github- is that if you go to the code screen and you click on the dot key or the period key it'll actually do something. That looks like it's actually opening opening it in visual studio code, but it's actually in the browser.

A

In fact, if I mouse over you'll see that I'm actually in a browser here, so this is really cool because it allows you to actually go look at code directly without having to download the entire repo and you'll see that all the samples are here- and you can just I'll just randomly pick one here uh and you can actually go directly into the code and take a look at how it's implemented really cool feature and you've got syntax highlighting you got all that in fact, as you can see here, you have the multi-tab as well, so you can open multiple tabs and things like that.

A

I use that a lot when I need to just quickly see hey how many people are using this feature right, um how many samples do we have, or things like that, I won't even bother downloading the repo I'll actually or cloning the repo I'll actually open it directly from there. So this is again number one tip is. If you just want to look at some code- and you don't want to do the boring, you know, let me look at the html version of the code, but let me look at the rich.

A

You know syntax highlighted code. You can actually do that now. What if I actually want to download the sample and start playing with it? What are the barriers to that?

A

So the first thing I'll do here is remind you that, and by the way, I'm using the spfx webpart sample gallery to do this, but remember that all these samples are also available through adoption.microsoft.com, where all the samples that we have across all the repositories can be found in one place. In this particular case. I happen to know that I want to talk about a web part, so I went directly to the webpart sample gallery.

A

But again, if you don't know whether it's going to be a web part, an extension or a team sample or an ace or anything like that, you can go to adoption.microsoft.com and actually use the sample browser to find the right sample right. We should be focusing on doing the right thing for our customers and to meet our business needs instead of worrying about what technology I'm going to be using- or you know things like that, all right.

A

So when I am in the spfx webpart sample gallery, I can look for samples by things like by framework. So, for example, what I want to use view I want to use, react or javascript. I can do that, but one of the samples I want to show you is: I want to search by spfx version.

A

Now we have kind of every version of spfx all the way to ga, and even in fact before, spfx was generally available, which is now five years ago by the way, um as of yesterday so kudos to the spf x team. So we got samples that date five years ago. Right then you might say well. This is why would we have old samples from five years ago again keep in mind that there are some people that are still I mean?

A

I just recently worked with a customer that was migrating, their sharepoint 2013 and 2010 implementation to the cloud, so they are still customers as much as I like to be. You know, leading edge and and always being ahead of technology. There are still customers that have made huge investments in older.

A

What's the best way to say it legacy technologies that maybe they're not ready to move away from right, because maybe they're working in a highly secure environment and they want to make sure that uh they've properly assessed the latest technology before they can move forward.

A

So when we have older samples like the ones that are in spfx 1.4 or earlier just keep in mind that those are probably still relevant for our lot of our customers and a lot of your peers, so we're not ready quite yet to get rid of those old samples, but just keep in mind from your perspective that you might want to be using the latest version of the samples if you're, if you have the opportunity or the the luxury of being able to be on the leading edge of technology, now here's the challenge with every version of spsx.

A

We have potentially uh compatibility issues with which version of node that it works with, and we have a uh something called the spfx matrix, which I'm sure david is going to be posting a link to in the chat. But yes, spfx compatibility matrix is something that tells you here's what version of spfx we're using here's? What version of node that's it's compatible with, so that you can. You can actually see okay. Well, what do I need to do for my my infrastructure now? The other problem with that is that well what? If? I'm?

A

You know really cool and I get to work with spf x 114, so my workstation, my development workstation, is configured to run the latest version of node that spfx supports and all the cool stuff, the latest version of gulp, but I need to find a sample. That's maybe an older sample, so you can actually go do that you can actually go find an older sample and you can you can download it. I'm gonna go pick a sample that maybe not so old, but I just thought it was cute, so I figured I'd use that.

A

So if I look for a sample called uh parker, because you know parker is our mascot, so we have a sample by adam here. I actually think that was adam's first sample that he contributed so adam if you're going to call feel free to correct me. But if you go to this sample it tells you okay. So this is the version um right here under compatibility. It says this is the version that it's that it's uh was built in.

A

This is a version of node that will run with and it'll tell you all sorts of stuff like whether it's compatible with sharepoint online, with sharepoint 2019 2016, whether it runs on the local workbench, the hosted workbench and the new feature, which is whether it works on a remote container.

A

Now, if you don't know what a remote container is a remote container is the ability for you to say I'm going to package all the dependencies and all the things that that makes up the environment that I need to be able to build this webpart, I'm gonna package that with the code itself and then that container can actually be hosted on your machine. If you use something like docker for desktop or you can actually move it to, you know the cloud using all sorts of fun uh technologies like kubernetes or or uh codeword.

A

I can't remember, what's called in github now workspaces code, spaces code spaces. I think that's what it's called so really cool right. I can actually now bundle all the dependencies. I need to be able to open a solution right away and and run it without having to switch version of node. You know install dependencies and things like that now.

A

The other thing that we have made available to a lot of the samples is this cool thing here. Instead of cloning, the entire repository, you can actually just download the solution as a zip file.

A

So let me do that and we've started adding this tag to every readme, it's not quite available in every single sample, but again we're adding them and keep in mind that every time we make changes like this, we try to test every single change and when you have close to well, I think in total we have close to 900 samples across all the repositories.

A

You can imagine the effort and the amount of time that's involved in implementing these features. But if I take this zip file, now that's downloaded for me and if I actually can move it where you can see it you'll actually see that this is not the entire github repo. This is only the sample. This is the stuff. You need to run this.

A

So let me extract it and it insists on putting all my windows to the next screen here. So let me just put this to my spfx folder and and let me remove the extra space so here I'm going to extract this to find parker.

A

All right now, I happen to have a command line that I opened. Let's see. So if I go to cd sample, uh what does it call again? React find parker, react and parker.

A

Oh all, right I'll. Do it this way I'll just do. This is a trick that david warner taught me is, if I type command from here, I actually will launch the command prompt right into this folder, but wait if you order now, if you type code space dot, you can also launch, of course, they'll launch it in a different window, but you can actually launch the window itself or the visual studio code into a new window.

A

So again, if you have been downloading the repo, even though I'm typing really slow right now, you would still be waiting for the repo to be cloning. We already have the sample downloaded.

A

We already have it opened, and you know there's little something missing here, because right now, this version of the sample is actually running on a completely different different version of spfx that I have currently running in my machine and a different version of note, so something that we've added and I've already demoed this a couple weeks ago.

A

I think, but something that we've added to uh 99 of all the samples that we have in the uh spfx samples is a dev container and if you're wondering you know how do I know if it's compatible with containers again, the readme will tell you that we've already tested it in a container.

A

The other thing that you'll see is, I have a dev container folder here that contains the definition for my container and now on my machine. I happen to have docker for desktop installed, so all I should be able to do and by the way I also have an extension that is called remote.

A

Remote containers, so it's a visual studio code extension that I've got installed on my machine and it adds this cool functionality if it detects a container- and you may have seen it when I first opened the solution- it actually prompted me to reopen it in a container.

A

If you missed the opportunity to do that, you can just say reopen in container and what should happen if the demo gods are with me, we should be able to see that it'll actually launch the same solution that I opened on my local desktop in a remote container and it'll install the dependencies and then launch it directly into well. In this case, it's a linux container. I guess so now I should be able to do gulp. Let's just do gulp serve directly.

A

So again, I'm opening a brand new container that I just downloaded I'll say gulp serve no browser so that it doesn't try to launch edge in my hoops, I guess I forgot to do this. Okay, let's do this first, that's a demo. It happens all the time, I'll just completely rebuild the container here, which is actually, if you've never opened a sample or never opened a container that uses this container template.

A

This is something that we do automatically for you. When you open the sample, is we actually start building all the dependencies for you and one of the things that we end up doing as well?

A

Is we end up creating the certificates for you to be able to debug the sample so now this is going to take a little bit of time, let's see because again, node what it has to do is it has to download the samples from the internet both those modules, depending on how fast your internet speed is going and whether you're sharing video and things like that, you might get a slower performance, but once it's downloaded the modules locally, it has to unpack the modules because they're- usually I don't know if it's a zip or rar- or you know anything like that or tar, but it has to unpack the module and put it on your local drive.

A

So we'll let this run, and while it's doing this, let me actually show you where I'm getting the information about the module. First of all, we have every every sample that is container enabled has a dev container.json. Now this is not something I want to be clear. This is not something that is unique to spfx samples. This is something that you can actually start using right now in your own projects.

A

If you want to just think about it again, I talked about this a couple weeks ago, but imagine the dependencies that are you know, or the time that's involved in getting a new team member added to your your project and you're like oh well, it's not even worth. We have two weeks left on this project. It's going to take this person two weeks to even just get set up with the right environment.

A

So if you actually go to the the container, the dev container, the json definition you'll, see that we already predefined things like what version of docker docker image we're using what uh version of ports that we're using to redirect from within the remote container, to your machine, as well as a startup script that we launched for you at the start of setting up the machine- and this is what's actually currently running right now. Is this script right here? Where we already, you know we actually go install. We go generate the certificate.

A

We convert the certificate to a windows and a non-windows type of certificate, so you can actually deploy the certificate for you now when I'm talking about a certificate here, you might be saying: well what are you talking about certificate here? Like you know, I I'm running this locally.

A

Yes right when you're debugging, if you're debugging the solution, you're going to be debugging the code in well, if you're, not using remote containers, you're running it on your local machine, but if you're running in a remote container, you're still running it in some kind of machine. That just happens to be running in a different kind of workspace itself. Instead of being in windows it's in linux.

A

But when you go to the hosted workbench, one of the things that you'll see is it'll actually try to go to your localhost and try to go get the manifest.js for your sample. So they can actually run your web part in the workbench, but also serve the code from that js file.

A

And because you know, we want to make sure that we're safe with everything we do. We actually use an ssl certificate that is issued for your machine so that we can go back and forth between the cloud, the hosted workbench to your local machine without issues and that's why we do this. The first time that you open the the machine.

A

Now again, you can see that this has taken a long time and that's one of the reasons why we set up the the remote containers so that, when you open a container the first time, if you've never kind of used, this container image will actually set up this for you, if you just reopen an existing container that you've opened before, for maybe a sample you've reopened before you won't have to do this again, of course, unless you're trying to do a demo about it, then you might have to do it again, all right.

A

So if we look at the extension here that we're using for this.

A

So remote containers so it'll actually tell you all the requirements that you have here is you need to actually have a docker container and uh it should actually show you in the instructions here the prerequisites that you need and then the how to use remote development here now I like to. Of course I use a windows machine, because this machine was provided to me by microsoft, but there is a step-by-step tutorial that you can use if you're, if you're, not sure how to use remote development in containers outside of samples.

A

This is huge because, again I actually don't when I process all the pull requests, instead of because what I used to do before is I used to switch back and forth between versions of nodes and re reconfigure, my machine and use node virtual machine uh node virtual, no, no version manager.

A

I always forget my acronyms nvm node version manager, all right. So if you, if you take a look at this, this is actually exactly what we started with to actually build the thing all right. So let's go back to our sample here. Look at that! It's generating a certificate for me, and I want to show you as it's doing this, that generating the certificate should create new files in the package in the solution.

A

Now the one thing that we do when we generate those this cr and the pm certificates, we install them in the dev container and we remove those images or those files from the git or we added to the git ignore because we don't ever want to check in our certificates to a source code. Obviously, so here I've added the scr and the pm, and if I say done here and I reopen the terminal and the demo gods are with me obviously now I should be able to just say: gulp serve no browser.

A

I've got a few more minutes to get this going. I think we can make it happen and again, if I was just loading, a repo I'd probably still be cloning, the repo by now all right. So what I can do with the certificate here is, I can actually just go and download the certificate.

A

Now you might say, wait a minute. Why are you downloading the certificate?

A

Why are you downloading the certificate? This is on your machine. Remember that, as far as visual studio code is concerned, this container is a remote container. It's a completely separate machine and in fact, as we're evolving, this feature you might actually not be running this on your machine. It might be a hosted remote container somewhere in the cloud, so I'm downloading the certificate, because I want to have this certificate on my local machine, not my remote machine, and so I can actually install this certificate all right. So let's just do this.

A

In fact, I think that I had prepared some a.

A

Yeah in my downloads I should have just the certificate file, the sample code and oops. I forgot. I had left my death star plans here all right, so one of the things that I can do here is I can, I could um you know right. Click on the certificate say install, but because I'm the world's laziest developer, I like to use a command line that my friend don kirkham created for me, where I can actually just add the certificate to my local machine.

A

So there you go and then last minute of this demo. If everything goes well, let's go to.

A

My workbench, let me refresh the workbench.

A

Now I might get warning like this and that's because again, if we look at the network traffic here,.

A

Where's my network.

A

You'll see that I'm getting denied here, but that's okay, because what I can do here is I can I I've done this before once or twice. I actually have added a shortcut to the local host.

A

If I just refresh the page now and now that I've installed the certificate, I should be able to see the web part and, if I add the web part well, it's not happy. This particular web part doesn't work on here, but if I actually run it on a page itself, come on.

A

I have the now find parker webpart running on this thing and hours of fun, so that was a you know, demo on how you can now, instead of downloading the entire repo, you can download a zip file and how, instead of switching back and forth between versions of spfx and node, you can use remote containers. That's it for me. Thank you, everyone for your patience back to you, patrick for one last time, all right! Thank you. Hugo.