Microsoft 365 Community PnP Virtual Conference, 8 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Virtual Conference - 09/2020 - Increase your prodcutivity with PnP SPFx Yeoman generator

Description

PnP/SPFx Yeoman generator comes with many enhancements that allows you to increase your productivity for any kind of SharePoint Framework project.

- Consistent CSS Formating
- Improve Solution versioning
- Common used addons.

In this session we cover what's the advantage of using the PnP SPFx Yeoman generator which extends the native oob Yeoman generator with new useful capabiilties.

Speaker: Stefan Bauer (N8D) | @StfBauer

Supporting materials:
• PnP SPFx Yeoman generator documentation - https://pnp.github.io/generator-spfx/
• PnP SPFx Yeoman generator in Twitter - https://twitter.com/pnpspfx

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

Welcome to my session uh on how to increase your productivity with the pnp spfx generator. What you see now is actually the documentation page of the pnp spfx generator. So it's one of the pnp projects- and the first thing that I like to tell you is you need to understand that it is not as another generator for sharepoint framework, but it is the default. Microsoft generator extended with additional capabilities, and these are actually the capabilities that can improve your productivity.

A

Everything you probably want to know you find on this page, documented, like we do with the regular sharepoint framework generator. What we do is we say yo at pnp, slash, spfx, and this then runs our generator.

A

So there's some things different here. So, first of all, thanks for all the contributors in the pmp spf x generator, it always provides you with the current version that you're using, which is now the 1.15, and also tells you exactly what is the base generator that microsoft provides, so it's based on microsoft, generator minus dash, sharepoint 1.11.

A

So by time it's recording this video. This is the latest version, so we have the latest pnp spfx generator installed that uses the for for the mic to create the sharepoint framework project. The version 1.11, like the microsoft generator, the the questionnaire areas, see a little bit switched around. So the first thing is, which is your baseline package?

A

uh Do you target with with your components?

A

So actually you have here the exact same options: sharepoint online sharepoint, 19, sharepoint 2016, and the reason why we asked this on first place here with the pmp spfx generator is because this depends then, on the question that came after this first selection at the moment, or we only have most options in the sharepoint online generator, but we don't have that many options in, for example, sharepoint project for 2019.

A

uh This is based on the fact that not all the versions in sharepoint 2019 support the latest versions or libraries that we use in sharepoint online.

A

So for now I select the sharepoint online version and the first thing that you see in the pmp-spx generator is actually that there are a lot of additional frameworks like aurelia angular elements.

A

When you have an angular cli installed, then it tells you actually which angular version you have installed. In my case, it's currently the version 10. 0.5.

A

This option is disabled. When you don't have an angular cli installed, then we have handlebars. We have another front-end framework boot.js, but we also have the react.js and the no framework options here that the regular microsoft generator provides. Knockout is not in this list anymore, because it's not officially supported by pnp spfx anymore. Most of you, maybe just are fine with react, but even a react.js project comes with a lot additional benefit to it. So let me pick react.js here and then you see which library do you like to include in your project?

A

So actually you can select here from a list of libraries that the community found is useful to have in your project and by selecting these you don't have to install anything else. So you get a complete new react.js project was, for example, jquery installed or, if you're doing graphcos, then you have to type definitions from microsoft, graph included common tools like pmpjs.

A

You can also directly add to your whenever you start a new project. Of course, the pnp property controls are in there, the pnp reusable components as well, some things like more really popular javascript toolkits such as low dash or you can even select office ui fabric.

A

In this regard, in case of office ui fabric, there are right now available, two flavors for sharepoint online project. So this is the version 6 the default, one which doesn't have any idea about fluent ui. Then there was an add-on to the version of this ui fabric version, 6.

A

included, fluent theming and the version 7, which is the current version of fluent ui. This is something we change, probably next release to have this naming here right. So for now, what I just picked is the version 6..

A

When you create a regular sharepoint framework project, then the typescript version that comes with it is the version 3.. Sometimes you might have the requirement to have library a new version of typescript actually in your project, because certain libraries components that you want to use in your project. I rely on a higher version of typescript version. 3.3.

A

What you can do here is, you can upgrade to you can pick if you want to use typescript 3.45678, and this will automatically configure. Does the complete typescript configuration for you, so you don't have to worry about anything.

A

It sets the type script tslint configuration correctly. It installs the correct version of typescript and the correct version of the typescript compiler rush stack compiler.

A

So I select here now version 3.9, and then we have another more options like venting options as we call it. So we have the webpack bundle analyzer, which is an ally analysis tool that helps you provide to to search for large packages that actually increase your bundle size. So it allows you to optimize your packages. Then we have the style enter, which gives you hints if you have, for example, something mistyped in the 1.15 version.

A

It also supports css modules that sharepoint by default users, and we have a neat little tool which is named css comp and the user has come what it does. It sorts all the css properties by a specific definition.

A

We also have with those who want to use asia devops. We currently support uh asia devops just for building the packages, but we also support it now that we directly deploy it, and this is a complete topic of its own, so we leave it out for now and select none here.

A

A really popular testing framework is chest for to test your web parts, and in here we have specifically for the latest sharepoint generator version for a sharepoint online project, all the presets that you normally have to do manually with your chest pro with your chest configuration this is already provided by and and changes the configuration so that you have the test frame uh right at the start of your project uh available and now we are actually in the microsoft generator sharepoint right.

A

So the first thing that it asks me is: what is your solution? Name and let's say here: pnp v for virtual conference one. This is my solution name, of course I will use the current folder uh questions. Do you like to deploy the web part or extension come across the whole tenant at once?

A

Do you need additional permissions uh for your solution? What client-side component do you like to build? So do you like to build a web part, or do you like to build an extension or a library component? I select your web part and then I say: okay, this is my pn pnp conf web part.

A

A

and then everything works as you used to so it installs all the packages, all the dependencies that you have defined by a questionnaire.

A

There are some additional files here, for example the css comp I'll show you in a later on, and we have to starlind rc, which is also another file that we need to have in our project.

A

But I will go into this in the later on, so these are actually not part of the sharepoint framework generation process, but they will be added automatically based on your selections.

A

Now that the project is created, we can open this in visual studio code.

A

And, as I mentioned, we already have installed directly typescript version 3.9 and, as I have selected. So what we can do now in here is go to the package.json and what we see here is we have the microsoft rustec compiler 3.9.

A

We have, in fact our typescript version 3.9 and the ts config point already points to the three rush stack compiler base definition for ts config for 3.9 done. So what we also have in here, because we selected testing framework. So we have chest in here: we have a style enter in here which actually requires three four dependencies.

A

A

Pnp spf x, as it depends in here we have office, ui fabric react version 6.. These are normally packages that you have to track your versions on it. You have to install them manually, but right now, with the pnp spfx generator, you get this already installed and can directly start developing. So what we also have in here, for example, for testing- I have a test configuration in here which can be found in the config folder.

A

I can directly test and watch my changes, so everything is here right at your just what you normally have to configure manually. So we have here chest configuration for example, uh yeah and then, like I said, the additional files we have a css com file in here, which is the configuration for css comp and the style lint.

A

Configuration, let's start our project and see if it is working so gulp serve.

A

Because we have added so many things like so.

A

First thing that you like we'll see here when I scroll up a little bit in in the in the trace here, we have here some warnings.

A

These are actually well listed, comma space after so expect a single space after a comma single list. These are actually the uh the problems that are reported by on our style linter.

A

We also have in here to make sure that we use the typescript version, the correct one, which is currently now the typescript version 3.9.7. So you don't have to worry about anything.

A

And what we also have launched is our local workbench. So we add the web part and it's working perfectly fine.

A

So now one thing on the css comp part to actually use the css com in here you have to install a third-party extension, which is named, of course, css comb.

A

Which is the 5 version 5.3.2?

A

What I can do now is use this comp and let's go to our uh our css, that comes with sharepoint with the hello world web part. I can now press command shift.

A

I can now press command option, shift c and format. My complete.

A

uh My my complete style sheet differently, so, for example, if you have, if you see here, we have first, the font definitions then position definitions, then the block elements like display, inline block and the min hate hate padding cursor. We have these small blocks on of properties in here, so the css becomes easier to read with css comp and how this works. So we have a base definition in here. It says: okay, first, I want to have to says extension.

A

The includes then I want to have all which is found related all what is position set index top right bottom left display, so the block elements. Then we have the hate definitions and the paddings margin, all which is box size related, then list and temp table styles and additional third-party window. Prefixes ordered in exactly that order. So we have also up uh opacity. We have bottoms border styles and all these and in this css com definition, it defines exactly how you sort your css in here.

A

This is especially useful not only for developers but with, for example, if you work in a team together and everybody tends to write his values somewhere somewhat differently, then you can actually make sure that you have one defined order in which the css properties apply in here.

A

What you also can do is, or for example, normally when you write css and, for example, you have a height here of 48 in your css 48 pixels in here and then somewhere later, you define it.

A

I guess it should be hate 96 and when I go now to my command pal uh command, palette and say, okay here I want to run css comp and format. My styles, it reorders all the properties again, and then you probably see some things like in here. So oh, we have the hate here, three times defined and we actually just need the 96 or the 32.

A

Then I can delete it. So it helps me also to have a more meaningful css in here and and to to make it easier for the complete team you're working on to have an order in their css.

A

This is one piece that helps a lot uh for your development and for uh to to have a consistent styling here.

A

Okay, so now we have our web part written and let's say we are finished now. Let's do something in here, just quick, pretty quick! We do something that I don't recommend so background. Color, actually shouldn't be the ms color dark seam. It should be ms minus color.

A

A

Orange and there we have our webpart orange.

A

So now that we have finished our web part, we actually want to deploy this web part. So when we want to ship our web part, we actually want to.

A

You would go to normal console and then you say: gulp clean.

A

Probably this is not required, but it's always nice to have a clean, build gulp bundle, minus minus.

A

Ship then we do a gulp package: minus solution, minus minus.

A

A

And then we are done with our solution and when I open it, sharepoint.

A

Then I see here the sppg file in here, so I need to remember its bundle and then package solution which is pretty time consuming, especially when you do it more than a couple of times a day or before for testing purposes manually.

A

So the pmp spf x generator offers something really special in here, because it gives you a shortcut for as well building a production build as well as building a developer build. So when I say gulp, dist.

A

It actually executes exactly the steps as I described before, so you have to clean step. You have the bundle and you have the package solution and runs them all in sequence. And what you see here also is it's built target ship, so got disc, actually gives you the exact same package that I showed you before in a distribution build. But what, if I want to do a developer, build well? This is also covered.

A

So, instead of passing in this minus minus ship or production or uh option, so it says you only have to say gulp dev, which gives you a death build and, as you see here, it's a dpr debug package.

A

What I can do now is, I can open this one.

A

Go to my sharepoint go to my solution in here. There's the package and I can go to my browser- go to the app catalog and directly upload this apps inside the app catalog, and it tells me that it's actually built for localhost, so it actually consumes my local workbench or my local web server running.

A

Let's add it here then go to a demo page or something like that. So let's go to site, slash deaf news, which is a communication site that I have in here: uh let's these are actually artifacts from other web parts that I tested out. So let's create a new.

A

So let's create a new page new blank page in here.

A

Pnp virtual conference test page page.

A

Publish this page for now, what we actually need to do is we have to add our app to this add our app and it's the pnp pv conf one client side solution.

A

So we add it now to the site, collection.

A

Now it is added here we can go back to our page.

A

A

Here and say, pnp conv web part again we still get an error, but this is only because we don't have it yet running. So the local workbench running observe.

A

And then we can refresh this page.

A

Now we can change it back, let's go to visual studio code. Let's say we want to have not the background. Color. We have the regular theme. Color back again can directly change it here.

A

Refresh the page, and now we have it back in blue, so instead of remember ring all these commands. The only thing you need to have to remember is sculp def for a developer, build or gulp dist for distribution, build.

A

The last thing I want to show you is how to handle efficiently versioning. So let's say the spare part is version currently version 1.0. So throughout the sharpen generator project or spfx project, we have several version information available. One is inside the package version up here. It says it's version, 1.0.0.1 right.

A

Another version information that we have is here in the package solution which says it's 1.0.0.0.

A

The problem here is the version in the package. The json and the version here in the package solution has a different.

A

Kind of versioning, so you can easily update this package json or leave it at 0.0.1, and then you have the package solution in here, but there is also third option for versions, and this is actually here in the manifest file of the web part itself.

A

So what you have in here is version asterisks, so the asterisk says signific signifies that the version should be taken from the package.json.

A

So whenever you update the version in the package so json, then it's also reflected in here so right now the web part has a version 0.0.1, as we had defined in the package.json.

A

So what to do when we have a new version of our web part? Well, in this case spfx, the pnp spfx generator, has also a solution for this. We can use something which is commonly known as mpm, which is another tool similar to gulp, which actually not only handles our package installation but also handles our version management in this package.json file. And what we can do now is, I say mpm version, and I want to have a 0.1.0 version in here and when I do this, it will automatically upgrade my package.json version to 1.1.0.

A

Let's do this and what it then starts. It automatically starts a distribution build. So what you have then in the package of json, you have a new version of your project with exactly the version 1.1.0, so you have in here 1.1.0, but there is also another script that is attached to this, which says preversion.js, and this is a hook from the mpm.

A

That says, please run the script when you want to install uh when you have a new version or when you do something whenever the version, the package.json changes and when we look now in our right man on our package solution file. Here we see here now the version 1.1.0.0.

A

Actually the first two three digits reflect exactly the what is in our package.json and again in the webpart manifest. We also get the same version after running the spill chain, I'm directly able to deploy the web part in the version 1.1.0.

A

When we do this again and worked for some time do some bug fixes, then we can also can have a minor version in here, another one, a 1.2 version, a 1.1.1 for a patch version and so on and so forth. So we have just one version information in here in the package of json, which is also represented as a tag in git in the on the git repo, and it allows us to centrally manage all our versions if you're interested how the script is written. So you find it here in the tools.

A

Folder there's a pre version in here, which says exactly take the package for json: take the teams manifest.json and update all these with the package version of information. Let me quickly open the folder.

A

In here in solutions we have now the pnp spfx, which was created now going here, replace it deploy it, and now we see here, the version has changed.

A

Last but not least, I want to show you a little trick when you, for example, haven't worked for approach on a on a several certain web part for a while how pnp spfx can help you with this as well. So I'm now in uh navigated now to volume c demo, which actually contains an old project, I'm not sure when I last touched this project.

A

So when I go to code, I don't know what it is. I probably need to look up the package.json, and then it says here: okay, it's core library, 1.9.1, okay, so you can go now use office. 365 cli, get the instructions and update all the references that you have to do, but what the pmp spfx generator also helps. You is with upgrading solution, if you're not sure if this web part is version 1.9 or the current one 1.11 and just execute you at pnp spfx.

A

What happens now is that the sp spf x generator checks the current folder that you're in with the installed base microsoft generator using the office 365 cli and, as you see here, project needs to be upgraded. Please review the upgradelock.nd file in your project, so, in the background directly pnp spf x calls the method in the office 365 cli to upgrade a project to the latest version in this case 1.11, and this happens automatically. So even if you don't want to add a new web part to this project, you can use pnp spfx to check.

A

If you have the latest version in your project and now I can open it with code, go into my root folder and I see as promised here the upgrade lock.md, so the md file, what I have to do to upgrade actually my project to the latest version.

A

Well, that's all from my side and I hope these tips and tricks from with the pmp spfx generator helps to improve your productivity in your next spfx project. Thank.

A