Microsoft 365 Community Community Demos, 2 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on consuming SharePoint community GitHub sample solutions

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on January 2, 2020.

In this 15-minute video, PnP Community member David Warner walks developer viewers through the selection and installation of the requisite developer tools (Node.js, NPM, Gulp), needed to consume PnP SPFx web parts, extensions and other samples. Then through accessing the web parts gallery – front-end to sample code on GitHub, selecting a sample by SPFx version, downloading and installing the code. Finally, after review and edits, developers use Gulp to bundle and package the solution that can be deployed within the tenant.

Presenter:
• David Warner (Catapult Systems) | @DavidWarnerII

Supporting materials:
• SPFx Web Parts: https://aka.ms/spfx-webparts
• SPFx Extensions: https://aka.ms/spfx-extensions
• SPFx Library Components: http://aka.ms/spfx-library-components
• SPFx Solutions: http://aka.ms/spfx-solutions
• SPFx Compatibility Matrix: https://tahoeninjas.blog/2019/12/30/spfx-compatibility-matrix/
• SPFx Version Guidance: https://www.andrewconnell.com/blog/spfx-which-version-of-spfx-generator-to-install/
• NVM Node Management: https://www.andrewconnell.com/blog/better-node-js-install-management-with-node-version-manager

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

A

All right so getting started with using SPF X samples, we're gonna talk today about how to start using the pnp, SPF, x, webparts extension and other samples when we launched sharing, is caring initiative to assist with contributing to the PNP github repositories. We also started getting some feedback that there's not only new developers to the community that want to contribute, but there's also new developers to the community that want to consume and github is still new to them.

A

So today we're going to talk about how new developers to to the community can start taking advantage of some of these when you maybe are not experienced with a github site, we'll show how you can start using that. So the agenda for the demo is we're. Gonna cover some of the development prerequisites and then we're gonna see how we can find a sample. There's some fantastic Singapore galleries have been created by newly awarded Hugo MVP Hugo Bernier. So thank you for those we're gonna see how you can download samples.

A

There is gonna, be a couple Forks in the road that we're gonna talk about throughout the demo today, so that you're not caught off guard you'll, have options available and we'll discuss what those options are and then we'll just take a quick look at development and packaging, some guidance tips and tricks.

A

Alright, so development prerequisites the only two things you need to consume and I'll clarify that in a moment to consume samples from the PNP repositories is node, eight or ten. Ten is recommended because it is the newest latest and greatest that is supported with 19.1 from there. You need a package manager. Typically, NPM is the one that is recommended and comes with nodes, so you'll already have that installed and then gulp is required. You will then need a code. Editor of choices course of es code is recommended.

A

It's highly integrated and works fantastic with SPF X and then optionally. You can also install git and we'll talk about why that's optional in a moment so may be new to you may not want to install it. There is a path of least resistance that avoids that as you get to that fork in the road now to clarify when I say only NPM and gulp, this is just to consume pre-existing solutions.

A

So if you are looking to create new solutions, there's a larger tool chain you'll need the yeoman generator as well as yeoman itself, but if you're, just starting out you want to learn by sample, then certainly you can. You can use just gulp, node and NPM to get the job done and the installation procedure, for it is right there in PM, install G, which is going to install it into your global node modules, and then it's going to install goal so the best place to start, of course, is aka MSSP FX.

A

So that's where we're gonna go ahead and go to now to take a look, we'll go ahead and come to an open browser, we'll load it, and it takes us to sorry right here. Spf X, wrong link just want to do and that's gonna. Take you to the overview, the SharePoint framework. Then you can go into getting started and set up your development environment. Now, as you scroll down you'll see what the developer tools are that are required, so we've got node LTS version 10, but you'll notice that there's also node 8 and 10 supported.

A

We'll talk about that a little bit more because there is some things you need to be aware of as we go through deciding which sample you may want to use. But of course installing node is one of the first prereqs and then you'll notice. It goes into installing yeoman and gulp, and the sharepoint generator, but again for consuming the samples alone. All you'll need is gulp is defined in that slide. So let's go take a look, then at the gallery of samples that are available to us.

A

If you go to SPF x, webparts, AKA, KMS, SPF, x, webparts, you'll land here now, there's me a collection of links that I'm going to go ahead and make sure that you have access to near the end, so you'll get those links near the end of the call. You don't have to worry about writing all this down now and you can come to these sample sections right here up in the menu. There is a sample section now, if you click there, this new gallery is fantastic.

A

It's gonna go ahead and let you scan through and browse through the available webparts. In this case it is webparts. There is one for the extensions as well, and you can go through by year by author, by compatibility by framework, which shows you, the different libraries or frame works, that it will work with or it was built for today.

A

We're gonna go ahead and go through a demo of looking for by SP FX version, and so we're gonna come over to one seven, oh and you can browse through- and this is a great way to learn. Some of the techniques of SPF X as well and we're gonna go highlight, of course, a simple one that I'm familiar with so we'll go ahead and use a dynamic, bundling and loading of SPF X packages.

A

So at this point you may say great I see one I'll learn a little bit more about it, and so you can click on it. I'm gonna go ahead and right click on it and open it in a new tab, and it's gonna take us now to that sample in the repo we see that we've now left the nice pretty looking environment that had been provided to us by cue, go and now we're in more of the the hardcore github could be a little intimidating environment.

A

So if we scroll down, we understand what it should do. We can see the readme at this point. We may say great: this is a sample that we want to use. How do we get to it? I, don't see a download I, don't see how I would access this well, you want to go to the top of the repos and you can get there by either clicking here, which will take you to the top of that repo or right here. Those both take you to the top of that repo using the breadcrumb.

A

So that's what we're gonna do when we go to the top of the repo. Now we see something that maybe stands out to us. We see this clone or download option, and this is where we get to that fork in the road we have choices to make. If we click on this, it brings up a little drop-down that says that we can clone with git or we can download as a zip.

A

So let's start with the first option, if you did install zip, then you have that available to clone I'm gonna go ahead and copy that URL you'll copy the URL and then I'm gonna go ahead and go into an.

B

A

Window and a command prompt now what I've done is I've, set up three different folders here to kind of accelerate and show the concept that we're gonna show for your options today, we'll start with SPF x, webparts clone, because that's what we're gonna do here, so I'm gonna go over into that folder I'm already in that folder here and my command prompt and so I'm gonna type git, clone and I'm just going to paste the URL that I had just copied now, if I hit enter, it's gonna start downloading it this you can see.

A

It's already started downloading it here in my Explorer window. This is a very large repo, a little over 500 Meg's. So we're not gonna sit here and wait for that to be done, but just know that this would finish and then we would be able to go into that folder and see our webparts available to us. Now.

A

That is, if you have get installed. What, if you don't? What, if you don't want to install git? The second option is, you can download the entire repo as a zip, and so, if I were to click on it or right-click on it and Save Link As, it will bring up an option. I've already got it pre-loaded into my s, pfx webparts downloaded and it will download it as a zip, and you can see it's a few hundred Meg's.

A

So we're not gonna go through the process just for time savings on this demo of actually downloading it, but know that that is a way you could download it once you do that we'll go back to our here and you can just simply extract it again: 500 Meg's, it's gonna, take a few minutes to do that. So we're not necessarily gonna go ahead and do that I've already pre downloaded it for for time purposes.

A

So, if I go here back up into my Explorer window to s pfx webparts, this is what we would be presented with. If we were to extract that or if we were to get clone the repo we'll have our webparts and now we know that I wanted to utilize a sample so we'll go into samples and I wanted to use the jas dynamic, bundling libraries. So now I've gone there now. This is where you can start actually getting into the code.

A

You've downloaded all of the samples, but some things are needed for us to go ahead and start building. This we'll want to do an NPM install so that we get our node modules and you'll notice that the node module is already there we'll talk about that in a moment. I pre-loaded that as well for time so I'm going to copy that URL and I'm gonna go ahead and do it clear screen here. We're gonna move to that location in my Explorer window and just to make sure that everything looks right.

A

We know we and had to have node installed. We know that we needed to have gulp installed. So we see there that version. 10.1 8 is the current late latest version of node LTS that's supported and we have gulp installed and we have p.m. installed right here as we're doing an NPM list and checking for our node version.

A

So at this point we would be fully ready to do an NPM install, but there's one thing: if you're new to the development environment you may not know, and that is that SharePoint framework has not always supported version 10.1 or version 10 of node, and so at a certain point in in history specifically SharePoint framework. One point eight point: two is: where that support for node ten began and eventually node 8 will will be removed, but is still supported.

A

So at this point, if we were to try to do a build or a NPM install or a gulp serve using node, we would eventually run into some errors, and so you may say well: okay, well now I'm stuck between a rock and a hard place. He told me to install version. 10 I've done that, but but now you're telling me that version a sample from from less than version. One point eight point: two has been used: what do I do?

A

Typically, you would have to go in and uninstall node, ten and reinstall node eight, and that is fully supported if you want to do that, there is a better option that is available to you and it's called nvm and there's an article here by Andrew Connell, which talks about node management with node version manager. It is supported on both Linux Mac, as well as Windows and so again, I'll include this link but allows you to swap between versions of node and with that different global NPM packages.

A

So that's the use case that I am going to be demoing today and showing off I encourage it. It is not required you could uninstall and reinstall node if you wanted to to the version that is supported by the sample that you're using, but it is important to be aware of that and that's why we wanted to point it out that if you are using a sample based on a version of SPF X, that's less than one point eight point two and you try to do installs and builds and serves.

A

Then then you're going to probably run into issues, and so you want to be aware of that. So now, let's go ahead and we'll go back here and we'll try to make sense of that. So using nvm. There's that article on it I encourage you there's a lot of documentation, so we're not gonna dive into how to use it, but I'm simply going to show how to switch between versions of node. So I said nvm use 8.17, which we know is supported for 171.

A

We want to confirm all of that looks good, so we'll go ahead and do the same check we did before. We see we're using node version, 8.1 7.0. We know that we are now using just gulp and NPM again, so we would be ready to go for NPM install and we could. We could go ahead and do that now again. I had mentioned I had already done that here.

A

So we already have that it takes some time on on machines, and so I wanted to save that time for us just to sit here in silence, and so now we're ready to go ahead and go up surf I've got my sample ready to go, I'll go ahead and paste gulp serve no browser because I've already got my hosted, workbench open and ready to go, and this should load momentarily shouldn't take, but a couple seconds for this to execute and there we go it's running everything looks to be executing.

A

It's configuring, the web pack as we see, and we should be ready to load our sample momentarily and there we go we're ready to go. So if I go back into the browser and I come over to my workbench I'll go ahead and just refresh so it establishes a context to my local server and go ahead and look for dynamic. We see I've got my dynamic, bundling example. Here it loads. This particular one shows at a dynamically bundle and import jQuery.

A

So if I click on this button right here, it should give me a message that jQuery is dynamically, been imported. So great now, I know it's working I've been able to utilize a sample and at that point, I am technically ready to to package it and bundle it if I want from there.

A

You would simply execute your batch and you can type go clean, go bundle, test, ship, go package solution, a ship and it'll run through the necessary gulp tasks and the web packing and the bundling of our solution, and eventually we will end up with a SharePoint folder, a solution with a dynamic, bundling package ready to deploy and that's how you can utilize the samples now if I go back to our slides here is a collection of useful links.

A

So we've got a lot of AKMs short urls available to us to the various webparts extensions library, components, components and solutions. There is also a compatibility metrics that you go created that helps maybe keep track of what versions of SPF X are supported by what versions of node Andrew Connell is a great article here on SPF, X versions of the generator to install helps understand some of those concepts and then, of course, the nvm version manager and once you're comfortable with consuming I'd, be remiss if I didn't also offer you the initiative to contribute back.

A

So we certainly encourage, as Patrick brought out earlier on this call to to encourage everyone to contribute back, and once you get to that point where you're comfortable and would like to do that, then there's certainly help for you to do that. That's it. Thank.

B

You stuff thank you David. Hopefully that will help folks get involved great to see that walkthrough there certainly check out the sharing is carrying resources. So folks, if you have questions, that's a great way to get involved or see how to perhaps make your first contribution or how to use and consume these samples, as outlined in the demo here today,.