Microsoft 365 Community Community Demos, 26 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Easily fix errors in your SPFx projects with CLI for Microsoft 365

Description

In this 22-minute developer focused demo – Waldek Mastykarz and Alex Terentiev introduce you to the SPFx project doctor! The new CLI command that validates the correctness of an SPFx project – dependencies in sync and correct versions, appropriately placed in the code, correct gulp, PnPjs, rush stack compiler, code redundancies, etc., all based on SPFx version project is using. Report generated in json, markdown or CodeTour. Run fix commands one by one or all together from a single script. Get the full tour here. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 26, 2022.

Demo Presenters
• Waldek Mastykarz (Microsoft) | @waldekm
• Alex Terentiev (Microsoft) | @alexaterentiev

Supporting materials
• Tool - CLI for Microsoft 365 | https://pnp.github.io/cli-microsoft365/
• Documentation - spfx project doctor | https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-doctor/
• Video - Validate SharePoint Framework project easily using CLI for Microsoft 365 - Rabia Williams (Microsoft) | @williamsrabia | https://www.youtube.com/watch?v=qo8ZSIlb_pU
• Extension - CodeTour | https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

A

My name is alex uh I'm a senior developer in uh spfx team, uh so basically I'm working on different test by effects, features and fixing issues that were there for a while, as well uh yeah and while working on the issues that were there for a while. uh I saw that many spfx projects that were shared with us have kinda not correct configuration in package.json files. So, for example, there could be multiple versions of a rustic compiler.

A

uh Some types dependencies could be in dependencies instead of dev dependencies, etc, etc, and at the end it led to uh larger gs files in your solutions and worse performance for sure and worse performance. As for your solution and for the whole uh spfx page, sorry sharepoint page as well, so I reached out to valdec to see if we can address it somehow in cli for microsoft, 365 and at the end we got this specifics, doctor command that will analyze your package.json file and provide different steps.

A

You can do to optimize your solution and for you and your customers it will help to improve the performance of your solutions and your pages, and for now uh it's what it does it analyzes.

A

Your dependencies, what should be like dependencies, what dev dependencies, uh if you have multiple instances of rush tech compiler, if you have some duplicating dependencies, um maybe you have some uh duplicated models like, for example, you have, you can have office, ui fabric, react and fluent ui, because the names are different, but at the ends it's basically the same package. So it will analyze this kind of stuff and describe you what you can do to make your solution more clean and, at the end, less in the size and valdec back to you.

A

B

Thank you, so you mentioned already alex uh that we've built it on top of cli for mice 365 and before we we we go on how about we spend a minute to talk a little about what cli is, what it is and what it is and how does that fit into it?

B

So cli for m365 is an open source command line tool that works on any os in any shell, and its goal is to help you manage and auto automate the management of your microsoft, 365 tenant, a few things on azure that are also involved with building things on microsoft, 365, which is things around azure id, and then a bit part is also geared towards helping you work with sharepoint framework, and you might know it from the past around the ability of trying to upgrade your sharepoint framework projects from one version to another to benefit from the recent adjustments and updates right.

B

So, as alex said, we've extended the cli uh to with this new ability to analyze your sharepoint framework project and help. You see whether everything sound and, if not offer you some tips. How can you can fix that? So? With that, let's move to code, because what is a demo without code right, let me move screeners a little and share my screen and please let me know where you can see it three two one any moment now.

B

So what you see on the screen is vs code. In the light theme- and in here I have a vanilla, kinda sharepoint framework 114 web part react project right. So in there nothing fancy, there's a web part hello world with a few additions right and now I skip the part when I will run npm install run dependencies. I don't need that for for a demo, but the question is: would this thing work right? So imagine the case.

B

You go to your source code, repo. You grab the code, you want to run this and it fails, and at that point you might get the weirdest errors from typescript from npm. Basically pages and pages of error stacks like there is something wrong, and it's now up to you a detective to find out what's wrong right. So let's have a look at how cli from iso 365 makes that easier.

B

Let me move to terminal and I've already installed cli from iso 365, and you can do it really easily directly from npm by running npm I for install g, because that is a command line tool that you want to be able to run.

B

No matter where you are on your disk right, you want, you might want to use it across all projects. You have right and then add pnp cli dash microsoft, 365.. Once you run this, you will be able to run cli anywhere. You are I've done this already, so I will not do it again, but now now is the trick. Let me run the new spfx project, doctor command, that will analyze the project that I have and tell me what I've done wrong.

B

How many errors do you think I'll get any ideas, suggestions, three, five, ten more two, two? huh That would be optimistic all right. I will run the m365 spfx project doctor command with output in markdown. So I want to have a report that I can read optionally.

B

You could also run a report that you can format in json, so that is more geared towards if you want to automate something report uh process it in a script and so forth and so on, and we also have other forms as well that I will show you in the end for now, let's run a report in markdown and store it to a file that I can open in vs code. So it's running now, three two one and it's there. It's done.

B

Let me close terminal to make some more space on the screen and let's have a look at the report and to make it a little bit easier to read. Let's view the markdown file as text right, so in here it says it validated my project on this date, and here is the list of things it found. Okay, so one thing is: violence is like hey: you've got installed, sp webpart base 113 one, but your project is built on 114, so that doesn't match.

B

So you should run this command to fix it, okay, cool one, then apparently, I also have sp office ui, hybrid, core 113.1 that doesn't match 114-0. So another command for me to run, and it kind of becomes clear that the person who would update the project didn't maybe update everything. Maybe they only updated a few things, maybe halfway the process, somebody called them. Somebody brought coffee or cake, you know and they didn't go exactly through right.

B

The cool thing is: is that for each of these messages you can click the link here, and it will tell you exactly where it is in files. So you can hear it's like hey that error originates from here in this project right, okay, what else do I have so we've already seen that not all dependencies are installed here is another one. So apparently we reference microsoft, sp low dash subset using a range. Why is this an issue?

B

Because if you don't log dependencies today, we have built a project with 114-0 tomorrow, maybe there is another, there will be 114-1, but if, if you don't lock the version, you might get mismatched some of the dependencies that are based on the locked version are on 114.0.

B

When you have a range you might have 14 1., and with that you will be out of sync. So again, that's something you might want to pay attention to and if you don't well, there is this tool that you can use that will help you keep that in mind.

B

Another thing is, we have another range. We had that already here's another thing that we check. Apparently we installed sp office, ui fabric core as a dev dependency. Well, it isn't it's something that we need in production right, it's not a developer tool. It's a part of our app right, the way we style it. That is a part of the code that is shipped right, so it needs to be a dependency. So again, our error. We move it into the wrong place in project and then we have this the same thing.

B

The other way around we installed sp build web as dependency.

B

Well, this is a part of the dev tool chain that builds the project so again, something we need to fix right and if we, the more, we go the more errors that we will see right and it becomes clear that well, apparently, we even use an obsolete version of rush stack, compiler 3.2 right, whereas we supposed to be using a newer one.

B

So it becomes clear right that in this project we have quite a few things that we should fix to ensure that it will run optimally that there will be no errors, no duplicate packages, nothing else right, so we can run these commands one by one.

B

But if you go all the way up, you will see there is a link to a summary. If you click on that, you should be able to go all the way down. Well, it doesn't work here, but there is summary with a one script that you can run right, so we will uninstall whatever we need to to uninstall, install whatever we're missing and at the end, dedupe right.

B

So with that on npm, you ensure that there's no mismatch across your whole dependency tree across the version you have installed, because at times that can also lead to issues. So again, we do this extra thing for you to ensure that, at the end, you have a project that works right and again. If I would be running this, you would be, or we all would be. Looking now, two minutes at me running npm, install which is just as exciting as watching somebody or watching paint dry right. So we will not do that.

B

Instead, let me show you one more cool thing that we can do here right. So I mentioned that when you run the doctor command, you have the ability to choose from a number of formats for the report.

B

You've just seen a report that I run in markdown, which is a format that reasonably you as human being can read, but there's also another type, which is called tour, which is a bit more guiding you step by step right. So with that, let me do that again. It's going to just take a second or two for me to run it and then what you see or what you might have seen or not is that now in my project I have this dot tours polar within their validation tour. What is this thing?

B

So there is this extension for vs code named codetour and what code tour is. It allows you to build a guided tour through your files in project. So how does that work in action? Typically, when you open a new project that has a tour, you will get pop-ups like hey this project. Has a tour: do you want to open it because I've been here already, you don't see that let me close terminal right, but we can open it ourself. So let me open the tour that we have there. You go there.

B

You go it's something's happening. There is my tour. So what is the exciting part about tour? Well now in here I see all the issues that I have in this tree view. So let me open one hey in here. I can now see exactly where in my project there is an issue and because I zoomed in extremely extremely like you, it's it's cramped on a screen, but in in normal view you will see like more space around it and and will be easier to see.

B

But in here already you can see a more visual guide, pointing you exactly to the line of code in project that is wrong. Explaining you. What is exactly wrong? What's required the command, if you can click on that, if you would click on that, that would run immediately a command. So there is no need for you to copy paste stuff around. You can do it directly from here, and that applies to every one issue that we found right so for everyone. We link to the exact place in project so that you can see like hey.

B

This thing is coming from where and yes it's indeed like it says 113.1 here and yes, that's indeed the case right and that should be. This line should be 1140 right and we can see it for every single issue that we have right.

B

So if you want to understand better, what's wrong and where it's coming from this format is really great, it's a great way to learn how things are supposed to be, and even, if you build build a project- and you share a new project with your team, it's a great way to offer tours to help people learn from the code base, as opposed to create a doc and then copy paste code from your code editor to a doc right.

B

So this is a great way for you to see. You know what are the different things that you should adjust before you move on. So, as alex said, we check quite a few things as a part of this check, so let's have a closer look at what is it exactly that we check today right so first thing that you've seen right is that we had a few dependencies that were installed 131 where well, while the project was 114-0 right, so we checked that sharepoint framework dependencies match the version with which the project was built right.

B

So we checked that all sharepoint framework dependencies are in sync. Another thing that we've seen is that when we refer to a dependency by range, we also bring it up because again it can. It can lead to a mismatch that can lead eventually to errors. So we also flagged that as a thing that you could check, then we checked that dependencies are installed as dependencies and depth dependencies are installed as depth dependencies so that in the end, you're, not shipping. Anything that you are.

B

You should not be shipping and the other way around that when you ship, you will not miss anything right. The same applies also to types. Typings are death time thing, so they shouldn't be installed as a dependency. They belong in the dev dependencies right and the same also applies to rush stack compiler, which is basically the typescript part in spfx right, and then we also like hey.

B

Maybe if you would bring up over time your sharepoint framework project from one version to another, maybe you've upgraded the rush stack compiler two, but maybe you didn't remove the old one, and now you have two of them or three, which I neatly expand the installation time right, because now you have not two dependencies or not one but two or more and all their chains right.

B

So again, if you had like- and you only need one so we will try to see which version do you need based on the sharepoint framework project, you actually use and advise you to keep only that one and remove everything else and then we'll also see if there are duplicate dependencies. Maybe you have one in depth the other one in dev depth.

B

Maybe there is duplicate office ui fabric right, then we'll also check if you have gulp ajv, uh if you have maybe pnp js, because in the past version one was named differently right. So we will also check that too.

B

So these rules, these checks, apply to every sharepoint framework version project you will run, but then there are also things that are specific to different versions in spfx and for that for each version we have a specific set of checks that we do on top right. So we do the basic for everything and then, on top, we look at specific versions that kind of stem from the version matrix for specific versions of spfx.

B

So in there we check, if you have the right version of react to see life fabric, react or gulp, agv and so forth, and so on. So with all of that, we strive to help minimize the risk of any error stemming from mismatch of the dependencies right.

B

So in a nutshell, this is what we do today and for me personally, I'd like to hear from you two things: do you think that that is a meaningful addition to your toolset and in our words, are you going to use it and try it and two? What else would you like us to check hope to see some opinions thumbs up thumbs down? Yes, jason will use it. Russell will use it yes, perfect, perfect, yes, okay, so cool, uh so we've heard some yay.

B

uh What else would you like us to add what else do you, what are other issues that you come across or things that you're like hmm didn't? Think about that that you think we could adhere to save you and your teammates time.

B

Can it write my code for me we're working on that co-pilot is doing that already. Who knows? Maybe, if you build spfx stuff, some more, maybe copilot will pick up. That too.

B

uh Can we use this to test if our app is likely to make it into the app store, so we don't have any app store, specific things and I'm not sure to understand we could automate them, because I recall from the past that there are quite a few things that are related to ui, that we can't really test. But if there are things that we could test, I don't see the reason why not um this is witchcraft. I like it well excellent what about identifying unused code segments?

B

um I think that is already isn't that already being done by webpack right because, like that is a part of the code analysis and optimizing there right. So if you build a product version of your bundle, I would expect webpack to do that, but if it doesn't then maybe that is there might be. Also this specific, you know intricacies between common gs, es modules, how you import things and so forth, and so on so personally analyzing unused code.

B

I would leave that in the webpack side of the house, as vesa ss, you should make a sample of which does reporting of this in the cicd pipeline. Excellent uh who's, taking notes, nobody, oh it's recorded, so it's all good. We will not lose this, not sure if it does this already, but I check to see if cdn is being used or not for assets.

B

um Can you see what we be able to detect in a code if cdn is being used or is it something that is being done on runtime based on the tenant where it runs.

A

It's a tenant level setting not in the code level, okay,.

B

So in the code, you don't need to do anything for that. It just picks up whatever is available on runtime, okay, perfect, so one checklist that we need to do because micelle certifies does that for us already ui checker accessibility to make sure the app will display correctly on all screen sizes.

B

Can we could we analyze it from the code or would it be something that that runs in browser? I think it would. It would be a latter one right and I think that there are already accessibility checks available in edge. Is that the case yes alex says? Yes, so, yes, perfect anything else, three, two one! We still have a few minutes left. I guess before we go to the slides back and close down what about identifying unused packages? Okay, so you have dependencies installed that are not being used.

B

ah That's that's interesting. I wonder if we could do something about it because again, yes, that would I wonder if webpack will include them or not if there are no imports, I.

A

Don't believe I I believe that webpack will ignore these packages. If you don't have imports.

B

Okay yeah, but then we could still help speed up the npmi so that you don't pull down or install dependencies that you do not use so yeah. That's an idea we're going to take and see if we can experiment with that cool anything else.

A

My additional idea- and you know about that- many people- just import everything from office- ui fabric react which is not good because in that case you will have the whole office. Ui fabric react in your bundle, so we can check if we have uh correct imports like import button from office. Ui fabric react slash.

B

Yeah yeah, okay, yes, yes, that is, that is actually yes. That is something that we should definitely add, because we should be able to find out about that. Definitely cool cool all right. So with that, I will stop sharing my screen. If that is okay with you now is it absolutely yeah.

A

Okay, thank you, wallick and alex really really great demos related on the tooling, which is now available in cli for microsoft, 365.