 In this brief webinar, I want to take a look at the SharePoint Framework Yeoman Generator, the recent release of version 1.4.1. We're going to look at a little bit of a summary on what's new, what changed, how you can get updated, and some things you want to pay attention to. My name is Andrew Connell. I'm an MVP for Office Servers and Services and Office Development. I'm the co-founder of Voitanus, where I do a mastering the SharePoint Framework on-demand and live-based class. What exactly am I going to cover in this webinar? Well, first we're going to look to updating the Yeoman Generator, and then we're going to look at updating your projects and what's involved in that. I'm going to briefly touch on some of the new APIs that are available to us, and then we're going to look at the changes that could impact our existing projects and the fixes. It's not a huge release in terms of changes. This really is just the big news that's going to be around some of the new APIs, but there are two or three big things that did happen as far as changes go. One of them has got a pretty significant impact. Let's take a look, first, at figuring out how exactly can I go ahead and upgrade my local install development environment. The first thing you want to do is do a check to see if you have the latest version. I'm going to run NPM outdated, and I don't want to run just NPM outdated as you see here because it's going to look at everything in my local folder. I want to tell it to look for everything that's been installed globally. Here what you see is that it shows that I have the SharePoint Yeoman Generator for the SharePoint framework installed, but my current version is version one. The most latest version is version 1.4.1. So to get that, I'm going to say NPM install. I'm going to say I want it to install globally. So I'm going to say I'll put global here, or I could just say dash G, and then I'll say Microsoft slash Generator dash SharePoint. And that'll go fetch the latest generator and install it on my machine. Now that I have the generator installed, let's take a look at an existing project and how I can go about upgrading my project to use the latest version. So what I'm going to do is I'll come over here to Visual Studio Code, and I'll look at an existing project that I have, and this one was created using the 1.4 generator. And I can tell it's 1.4 because I see all these dependencies are 1.4.0. So to go about upgrading this, there's a couple different ways I can go about doing this. One option is if I come back over here to my terminal window, I can jump into that folder, make sure we're in that folder, which we are. And I can either say NPM upgrade, and what that will do is that will go upgrade all of the packages that I have in my project that are currently not the most current version. I like to use another package manager called yarn, and I can either run the same upgrade command, or I can add on an interactive command here. And what this will do is it will look at all the packages that I have, and it will tell me which ones need to be updated and can be updated. And I can use this little arrow here to select which ones I want to have the yarn package manager go ahead and upgrade. So I like using yarn in the upgrade interactive command because it lets me see what's going to change before it just blindly makes those changes. And it also gives me an indication of if there are potentially backwards incompatible updates, or if it's just new features and new bug releases. This assumes, though, this color indication assumes that the packages in question are leveraging the Simver capability, which the Simver is a semantic versioning, and not all of the SharePoint framework stuff is going to correspond to it. Because we should have the middle version, the second position should be incrementing when we get new features. In this case here, we did get some new features, but they're in preview release. So that's why they didn't bump that middle version, or at least that's what we presume. The minor version or the patch version of a .1 that did get updated because we have a couple fixes. So let's first talk a little bit about what's new in the latest version of the SharePoint generator version 1.4. We got a couple new APIs for the Microsoft Graph and for working with Azure Active Directory. Now, specifically the Microsoft Graph 1 that we got an update to, this is replacing the prior Graph client that we had access to. That has now been deprecated. The object has actually been renamed to a totally new object. And the reason that we've gone, that they've moved to a new style here is not only to support some new capabilities here, but the other thing it does is that it effectively is wrapping an existing Graph client library, JavaScript client library that the Microsoft Graph team has created. What the SharePoint framework 1 is giving us is simply a wrapper to handle all of the authentication for us, making our lives a lot easier than having to go manage all the authentication similar to how the SP HTTP client works as well. The other thing that they added is an Azure AD endpoint or API. And what this is going to allow us to do is to call secured or Azure Active Directory secured RESTful endpoints and APIs, but doing it server side. So there's a really good document on the SharePoint documentation that explains how this is done and how it works and how you can run through and try it. Just keep in mind, both of these new additional APIs that we have, these are brand new and they're also released in preview. So they are subject to change prior to going generally available and a generally available release. There's no timetable on when that's going to be. So they're putting them out there today for us to be able to play with. And really the Azure Active Directory 1 and the updated Graph client, that is really the big news about this 1.4 release. But there are a couple of things that did change inside of the SharePoint framework generator that we should take a look at here. Now, in just a moment ago, I showed you how to go about upgrading all of our projects here. And what that would do is that would take all of these 1.4.1s and it would upgrade all of them over to, or all the 1.4.0s. Sorry. Say it again. What that would do is take all of these packages you see here that are listed as 1.4.0 is that upgraded them, would upgrade them to 1.4.1. The nice thing is there's really nothing in here that's going to change for us. Everything that you see here is, we don't have to go update any of our code. Everything is going to work the same way it was before. Most of these are just version bumps. And what a version bump is, is just saying, hey, we want to make sure that we're using the Yeoman Generator 1.4.1. So let's make sure that all of these things are also 1.4.1. So just the version numbers changed. Nothing under the covers really changed for us. One thing where that is not true though is in a React, the React TypeScript. So one of the things that we have is the TypeScript type declarations for React. That package did get some updates to it. Effectively it jumped from version, it jumped from version, let's see where's my version number here to the bottom I believe. Yep, so it jumped from 16.0.36 to 16.0.38. That only really included a few things, a new interface and two updated interfaces. And I'll show you those in just a moment. The other thing it did is it also upgraded the supported version for these type declarations from TypeScript version 2.3 to 2.6. So the only place you should really have an impact are where they made their changes. And I can find where those changes are. If I take a look at the diff between the two, and what you'll see here is we have a new interface that's been defined. So on the left is the old version, on the right is the new version, the 16.0.38 and this is the 16.0.36. So here what you see is we have a new interface called the Dialog HTML Attributes. That's a new interface that we got. And we also have a new property here on the image HTML attributes that is getting a cross origin of either anonymous or user credentials or an empty string. And it's an optional property that's being passed in. So that's a new thing that we got. Those are two as a new interface and a new property on an existing interface. Some of the changes that they made though, if I scroll down a little bit, you'll see that we have inside of an interface called React HTML. And then there's another one that has the exact same change. It's called the Intrinsic Elements interface. And the change that we got here is in the Dialog. So the Dialog property, you'll see here that before the primers you passed in or the types that it supported was a React HTML Attributes of either an element and then another element being passed in. And you see here now the changes is that they're not passing in HTML elements, they're actually passing in a, it's a Dialog HTML Attributes in a Dialog element that's being passed in. So that's the big change on this one. Now that's all we had in the TypeScript Declaration that are updates. The other updates that we had that were provided in this release are related to the build tool chain. So let me open up another project here that I have. It's the Build Core Tasks. And what this package is, this is something from Microsoft that provides some internal build gulp tasks that we can use to either start our local workbench web server or build it packaging the SharePoint Framework solution into an SPPKG file. The first change that we got was very welcomed. This is an update for an issue that we had before that was been reported, issue number 1002 in the dev docs, SP dev docs repository. And what this did is it exposed the fact that when Node.js went to version 8, which is the current, at the time of this recording the current long-term support version, SharePoint Framework previously said we recommend that you use an LTS version of Node.js. Well, in version 8 of Node.js, they changed the default when you run a web server to be HTTP2, where it used to be HTTP1.1. And the challenge here is that the SharePoint Framework team was kind of caught off guard by this. And as were many other people, this is the default. And the SharePoint Framework workbench, the web server that fired up the workbench was not going to, was not written to take into account HTTP2. And so it didn't work. And so what a lot of us ended up doing was either dropping down to Node version one, Node version six, or if we use Node version seven or eight or nine, we had to put in a little, an extra thing in the query string. So whenever we want to run it, whenever we want to run our gulp serve, this wouldn't work. We instead had to put something like Node underscore no HTTP2 equals one. And that's setting an environment variable equal to true for when I run this one command. Or I set that environment variable up in my environment. So it was always true. So in this case here, Microsoft actually fixed this. And the way that they fixed this, if I come buried down here, I'll show you exactly where they fixed it. There's a task called SPFX serve. And there's a JavaScript file for this task. And what they did is they added in a call here when you execute the task called load gulp connect. And what that did, if I scroll down to show you that function, is that that checks to see if we're using HTTP2. And if we are, then what it does is it's loading the HTTP2, it's going to resolve HTTP2, a cache key for us. And then it's going to turn around and use gulp connect to go support HTTP2. So that's a big thing that makes our lives a little bit easier. Now we can just do a normal gulp serve again using Node version eight. And we should be in good shape now. Everything should work. At least it does in my testing as well. So that's a nice update. Crazy. That little bit of code right there is all we were looking for. So good job, Microsoft. The other change though, was a little bit nasty. So we had an issue, issue number 775, where people were noticing that their client side web parts were not showing up in the web part toolbox to try and add them to the site. And the problem for this is because every time we created a package to deploy our web parts, the SharePoint framework was creating a new ID for the feature or for the component every single time it was uploaded. And long time SharePoint developers know that you should never change the ID of a feature. So in this case here, what we were doing, if I show you the code, what it used to look like, let's do it this way so you can see what the real difference is. That's the wrong one. Let's go with this one. So on the left is what we had prior to version 1.4 and on the right is what you see as version 1.4. What they're doing here is in this function where they're creating a feature from a component that's being passed in, you can see here on the left, they were always generating a new GUID that UUID is a common NPM module that's used to create GUIDs. And so here, they were always creating a brand new GUID and that's not ideal. Instead, what you want to do is that you want to, if there's already a GUID defined for the component, we want to reuse that. We don't want to create a brand new one and create some sort of an orphan. So here on the right hand side, you can see what that fix was. So that one bug that ended up being a very nasty bug but affecting quite a few people really was just a very small update here of simply adding in about 16 characters of component ID and if the component ID comes back as null or if it's undefined then we create a new GUID for us. That's it. That's everything that we got in the 1.4.1 version of this to summarize. You really just have to go update your yeoman generator and then after updating your yeoman generator you can go update your projects. I do strongly recommend that you upgrade yourself to the generator version 1.4.1 and upgrade your projects specifically for this last thing that I just showed you and you don't want to run into this problem where you have an orphaned ID there where it can mess up your client-side web parts and your other customizations. Hey, just a quick summary here. I got a few free resources for you. I've got a bi-weekly newsletter that shares with you all the stuff that's happened in the SharePoint dev space. It comes out once every two weeks. You can sign up at Voitanos.io. It's on that site right there that you see linked at the bottom. I've also got a 10-day email course on understanding the SharePoint developer tool chain and then I've got an on-demand video course as well as a live version of it that's also up on Voitanos.io that you can go check out. That's it for today.