 Hi, I'm Andrew Connell in this screencast I want to demonstrate how you can create a SharePoint framework developer environment that is going to allow you to create test Debug and run SharePoint framework solutions for any SharePoint Deployment that includes SharePoint online as well as the various SharePoint on-premises Deployment options. You're going to see how to do this with both Mac OS and with Windows So let's go ahead and get started The first one that I want to do is with SharePoint framework or SharePoint server 2016 and this assumes you have feature pack 2 is going to be installed Now I'm not going to go take the time to go through and stand up all the deployment stuff The idea here is that I want to show you how to set up your developer machine on how to create SharePoint framework solution So you've still got to go do all the pre-rex about standing up a your SharePoint server Deployment making sure feature pack 2 is installed as well as all the other stuff like Making sure that app services are enabled and you've done you've created a tenant scope that catalog and all that stuff That's not a developer environment thing to me. I'm focused just on the developer environment I want to do I want to make sure that my laptop is set for me to create SharePoint framework solutions now As my blog posts that I've linked to in the notes associated with this video as that's already Shown what I want to do what we know is is that I have specific versions that I have to apply to this so I know things like SharePoint server is 2016 is only going to support SharePoint framework 1.1 Which I know is only going to work with node v6 If you want to see all the details about all these different version numbers and everything go check the link in the in the notes associated with this video That so you can go read the blog post where it explains all that stuff the point of the screencast here is just to see how it works So what I want to do is I'm gonna jump over here to my machine and if I do a quick little NVM LS I want to show you that I have no versions of node installed other than a system version of node And that's just done. I did that by downloading the installer from Node.js and installed that version I'm also using something called the node version manager. That's a for Mac OS And it allows me to run multiple versions of nodes side by side That's gonna be really important here for working with different SharePoint environments In addition, I have the same kind of thing on my Windows environment as well if I wanted to go about Developing solutions and I was a Windows like Windows 10 or Windows 8 or Windows 11 user So let's go about and like I said get NVM installed on both of those guys So the first thing I need to do if I want to go work with the SharePoint framework server SharePoint server 2016 feature pack 2 and create solutions for that The first thing I need to do is I need to install a version of node So I'm gonna do that by saying NVM install LTS boron now Boron is the version as the codame for node v6 and you can see that Listed right here in my list of all the different options that are available to me Now I've got that just went ahead and installed node very quickly The one thing I do want to do though before I go any further with this is I want to update NPM So I'm gonna say NPM install NPM at 4 dash dash global Now what that's gonna do is it's gonna upgrade NPM the version of NPM that's included with node v6 That's gonna upgrade it to version 4 from version 3 and it's just a good idea to do this I don't want to go all the way to the very current version of NPM Because there's no telling if that stuff's gonna work for me and there's really nothing to really be gained from it right now Okay, the next thing I need to do is I install all the things that I need for creating SharePoint framework Projects, so what I'm gonna do with that. I'll say NPM install. I need gulp the gulp CLI And I'll take version 2.3.0. I need yeoman version 2.0.0 We're gonna see we have to fix this in just a minute and then I'm gonna need the generator for the yeoman generator for the SharePoint framework And that's at microsoft Slash generator dash SharePoint now if you read the blog post you'll see that I'm installing a specific version here 1.6.0 And I'll explain why I did that specific version While this is all installing in the background the reason why we need a specific version of the generator is because When we create projects for a SharePoint Server 2016 feature pack 2 it only has support for the SharePoint framework version 1.1 We can't we can use a more current version of the generator to create a 1.1 project But we have to make sure that we create one using that is still supported on the version of node that SharePoint framework 1.1 is supported on so the SharePoint framework 1.1 Is only supported on node lts version 6 The latest version of the generator that we can use is version 1.6 And we want so what that all that does though is that's just creating the project for us as a 1.1 project when we go to create it So i'm going to use the power of the video editing and i'm just going to skip ahead and make sure that this So before we um while it's still downloading all these dependencies and we'll come back and we'll look at the next step Okay, so we've got everything installed now We're in good shape Almost and there's another thing that we can do if we're on mac os Where nvm gives us the ability to create these things called aliases So if I did an nvm ls right now, we can see that we've got this version 6.17.1 installed But it's not really clear on exactly what that you know what that is Or if what's installed in there So practice that I like to do is I like to create an alias or two aliases The first thing I create is one that refers to the version of the share point framework and where it's installed So i'll say nvm alias spfx dash 1 dot or 1 uh, yeah 1.6.0 And that's going to point to versions uh node version 6.17.1 Now so now I have this alias and what's cool about that now is that instead of having to type nvm use v 6.17.1 And have to remember, you know, which version of node do I have the share point framework installed in that can work with on prem 2016 I don't have to remember that version number anymore. I can now just say well I need to know it's in share point framework, you know share point framework 1.6.0 But even better yet I can create another alias that points to that alias Like this that's spfx sp 2016 And that's going to point to spfx 1.6.0 All right, so if I come back over here and I do an nvm ls again What you'll see here is I have these two aliases that I've created here one for The version of the share point framework and one for the version of share point That uh, I want to target so what's cool about this now is if I said, you know nvm use if I was on system again Right, so now I'm on a totally different version. You can see that that's uh node version 16 um One of the cool things about this now is that now I can just say and I can even prove that by just going node Dash v so we can see where we're actually running we'd be running a node 16.8. I can now say instead nvm use spfx sp 2016 And now I can see that that's now referring to the version of node where I have my stuff installed for working with SharePoint server 2016 much easier to remember it that way. Unfortunately, we can't do that on the windows version of nvm, but that's okay Now we actually gonna have a bit of a problem here. Let me show you what's going to happen Let's jump into a folder here where I can create a new project. So let's do spfx dash o1 Or we'll do this as 2016 o1 And then let's uh jump into this Let's see cd underscore like that Okay, so now let's create our project. So I'm going to say yo at microsoft slash SharePoint and I'm not well. I don't know. I know it's not going to matter. So I'm just going to run it like this I'm going to get an error And the error I get here you see that it's pointing to these dot dot dot on options Let me explain what the problem is really quick If you see this error, then what the problem is You should see it everybody should get this actually if you're doing what i'm doing the reason why you're getting this is because Yeoman has a dependency that it's installing called yeoman dash environment And when it refers to that dependency, it's referring to that dependency Using a wild card to say i'll take any version of the yeoman environment package That's version two or higher And I can see that if I go let's see um Code Let's see how I get this we'll go to uh dot nvm versions node v6 dot 17 1 lib node yo Should be Just package dot json Yep, there we go. And if I find the list of dependencies There we go. See right here. It's got a dependency here listed as yeoman environment With the carrot 2.0.0 And what that says is grab any version of yeoman environment the most recent version As long as it's major version is version two, but it can have we want the the most recent minor version and patch unfortunately that creates a problem because starting with The yeoman environment package version 2.8 It has a dependency on node v8 And what how do I know that well because that right there is the javascript the dot dot dot That's the javascript spread operator that was not supported in node v6 It was only added as it was only supported in node v8 and further Okay, so how do I fix this so there's There's a couple different ways you can do this But I think the simplest way of doing this Is that right now as you can see the error is actually telling us where the problem is that it's inside Where yeoman is installed? He has a a node module subfolder and inside that is where the yeoman environment is installed so What I can do is I can delete that install of the yeoman environment And instead I'll install a global version So that anybody in this node this node environment that needs to use yeoman environment It'll find my global version and yeoman won't look for the one that it's got locally But I'll install a very specific version. So I'll say npm install yeoman Environment At 2.7.0. That's how you define a global Uh, that's how you define a very specific version you want to install And I'll just say global And we'll let this install real quick Okay, now that that's done We have to uninstall the version of the yeoman environment that was installed as a dependency By yeoman. So with that we know that that is we can go back to that command. We used a second ago and I'll say Remove rf which is the folder and I want to install yo slash. What do we have after that? I think it's lib. Is that right? No, we have a node That's not what I wanted. We want node underscore modules Uh, and then yeoman environment That so we're going to delete that folder now once that's done Let's know go go go back and create that try and create the project and see if it works And sure enough now it is going to work. So it's the first time we're using yeoman So it's prompting us to say you sure you want to do this I'm going to go to create this new project. So we'll say same name is good We can see 2016 is an option. So I'll choose share point 2016 Current folder is good web parts fine. We don't care of any of this stuff And we'll go ahead and just go and create it like this now I'm going to stop this install Because it doesn't really matter and I'm just going to say code Let's just open up this project and let's just verify That we've installed everything we need for share point server 2016 And if I come over here to our project and I look at package.json And sure enough, we can see that everything is using the share point framework libraries version 1.1 Dot zero So this now we have a project and we have a place setup that we can actually create share point framework projects for share point server 2016 on prem All right, so you've seen how to do this with mac os Let me show you how to do it with your windows environment So here i've got windows 10 and i've got my desktop already set up What i'm going to show you here is I am running node right off the bat I have a default version that's already installed. That's the system generated version if I do an nvm ls because i'm using the same node version manager If i'm using a windows port of it to do the same stuff that we talked about doing In the mac os version. So let's go through and let's set everything up now It's a little bit different working with windows and specifically with nvm on windows and that's primarily because On windows, we don't have the ability to use like the code names for the node versions Nor do we have the ability to create aliases. So we have to remember the versions and where we installed stuff So let's go ahead and start by installing a version of node that I know that we can use So i'll say nvm install 6.17.1 You already noticed one thing that's a little bit different there In the sense that we don't have the v in front of the version number And that's just a difference between the windows port and the mac os version of nvm All right, now that's installed. Let's go through and upgrade npm. So i'll say um, well first Actually, here's another difference I have to actually tell it what version of node I want to use because you can see I'm still on the old one that we had on our default. So I need to say nvm use 6.17.1 and then I can say npm install npm at version 4 dash dash global So that's going to upgrade the version Of npm to version 4 that I have in my node v6 lts install All right now the next thing that we're going to do is I can install everything That I need for sharepoint framework development same exact stuff that we installed for mac os That's an npm install. I need gulp The gulp cli version 2.3.0. I need yeoman 2.0.0 and I need the microsoft generator For sharepoint version 1.6.0 and we'll install all of these globally Keeping in mind too, we're going to have the same problem with yeoman on windows that we had on with mac os So we're going to have to install another version of the yeoman environment Package version 2.7 and we're going to delete the one that yeoman's going to install automatically All right, fantastic. We got everything installed that we need. We just got to fix up yeoman So i'm going to do that by saying npm install yeoman Environment At 2.7.0 global And then i'm going to go find that folder where yeoman the yeoman environment is installed So we'll come over there. It's in the um, it's in my profile. So i'll say give me a colon It's inside of my app data roaming nvm we are in version 16 17 node modules yo node modules And it's this one at the very very bottom Yeoman environment and we can nuke that one Great. So now just to double check npm list Everything show me everything globally and um The depth i only want to go one level or no levels deep basically just show me the stuff that i've installed This is going to confirm that we have the right versions installed Again, you can ignore all this stuff because all these errors This is from the fact that we're actually working with a version of node that is so old I mean it's many many years old But we're working with an old version of the share point Framework in the old version of share point server. So it's not really that much of a surprise It's just telling us that things are like It's no longer applicable and blah blah blah, but it doesn't matter. We're not using latest and greatest right now So there we go one dot six for the generator gulp cli looks good node looks good. Yeoman looks good. So let's go create a project CD what do we have? Oh cd we can go cd c colon dev there we go Let's make a new folder spfx 2016 01 cd spfx 01 and then we'll say yo at microsoft slash share point skip Install oh can't type that Let's try that again. I still didn't type it right. That's okay. We just will stop it from creating the project All right, so we'll say yes. We want to go ahead and create new project We want to use 2016 current folder. It's a web part all the other defaults And then we will terminate it We'll terminate this and I'll say cat package.json Oh, that's right. I'm on windows So I'll go ahead and open up the package.json in my in the Visual studio code and we can see create our project for one dot one