Microsoft 365 Community SharePoint Framework Tutorials, 13 Apr 2022

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Set up your SharePoint Framework (SPFx) development environment

Description

Video showing in practice how to setup your development environment for SharePoint Framework development. This video is using Windows 10 VM hosted in Azure as the demonstration environment.

⬅️ This tutorial assumes that you have completed following steps - https://www.youtube.com/watch?v=ijaJgc3J-iE
➡️ Next steps are in following video - https://www.youtube.com/watch?v=6WTtjXP5yW4

You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment?WT.mc_id=m365-15744-cxa

April 2022 version using SharePoint Framework 1.14.

• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen

SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.

Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx

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

Sharing is caring! You are awesome! 🧡

A

Hello, my name is I'm a product manager in the microsoft 365 platform, side of the microsoft, and in this video we will have a look on. How do we set up your our sharepoint framework development environment? So this is one of the series where we go through of setting up the needed configuration in a tenant.

A

We will set up the development environment and we will do the first implementation of sharepoint framework code. Let's dive right into it,.

A

So here we have a windows, 10 environment and we don't actually have anything installed on this one. So if I go at remove programs, we can pretty much see that it's a clean windows, 10 installation, no additional, tooling or nothing installed.

A

Now, whatever warning, uh if you haven't, obviously you might have a laptop where you have a lot of a lot of stuff already installed and you might have some older versions of the of the visa, their code or the packages and so on installed, so that might cause some, uh let's say, challenges and so we're starting with the clean, clean windows. So this looks relatively easy to set up and quite fast to set up. Also, as we are it's currently april 2022, um we are using sharepoint framework, 1.14 and sharepoint trainer.

A

1.14 works with the node.js 14 and node.js. 14 is no longer the default thing. What we're downloading from the node node.js organization? You can actually see that a bit more complicated way of doing things and installation, but let's actually get started on this. So let me actually move to the node.js site and, as said, we can see that the latest version or the default version from the site is 16.14.

A

Now it's really really really really important that you double check always from our spfx documentation and which version is the one which we should be actually using so in our development environment. Documentation in here where you can see the video as well, but that's the older version of this video we're always calling out what is the right version you can actually use so starting from 1.15 as an example. The right version will be v16, but for now, as we're recording this in april 2022, the 16 would be too new.

A

So that means that we actually need to go a bit more back in the time, unfortunately, and to download the note 14 version to make everything work without problems, so we need to now go other downloads. Let's actually go in there. I will scroll down. That's still note 16, so that's not the right thing to do so. I will go previous releases and now that's a bit complicated thing.

A

So let me actually go back in here and let's go all download options, so we can actually get to this node.js distribution, folder structure a bit of a scary thing and might be a bit of a scary looking thing, but it's not actually that scary. So we can go one step up and then we'll need to find here. uh The one point: sorry, the 14 version of the nodejs, I'm going to scroll down scroll down scroll down and the latest version of 14, which is.

A

14.19.1 uh is apparently the latest version on the 14., so this bit of a bomber and a challenging thing to then define the right version. But hopefully this video helps on that. Then again, if the version which we say that is the required version matches what the nodejs has on the front page.

A

Oh, that was oh there we go. Thank you bing for understanding that that was trying to go to the node.js. So if this version, uh the major version is matching what we're saying in the documentation, then you can just download the major version, but again because we're saying that it has to be 14 and this 16. We need to go then to the actual downloading. The latest version of 14 version to make that happen.

A

So gonna here download msi, because that's the easiest way to install that it's going to download msi to the download folder of the computer.

A

And that's not going to take too long and then we're going to do the installation of node so we're ready to go starting from there. So let me actually get.

A

Downloading now it's verifying the package.

A

Oh now, there's uh too much stuff. Let me actually go in here and let's go to the downloads, and uh it is that one over there. So let me oh actually it's either one of those. uh These are all the versions which I downloaded previously. So let's not worry about them and that's the one which I just downloaded.

A

So we can actually install that. So, let's get that one installed. This is simple as clicking next, I will accept the license agreement without reading that, as we always do, and the next next checking that all of these settings are enabled.

A

So that's really good and I we can click the automatic install necessary to this isn't technically required, but this will make sure that there's a chocolate there's an additional settings and tooling available on the background, and that will, though, make the installation take a bit longer, but it will make sure that we have the ready to go tooling already. In the background, there's going to be this administrative prompt, I'm going to click yes and that's going to then start the installation. This will take a while.

A

So we're going to speed up the video at this point until we are fully completed on all of the installation steps after clicking the next. So let's come back on when that's completed good. So now the nodejs is completed. But as we're clicking finish- and since we checked the checkbox to install that additional tooling, it will actually start the installation of those additional tools.

A

So this will- and this will take a bit even longer so let's click uh enter and any key to actually start your installation and then again, let's speed up the video of making the installation to be a bit faster and then it actually is in reality.

A

Good so now the installation is completed that did actually take quite a long time. Quite a few minutes. um There was a certain section on that installation where it actually just waited and waited and waited but patience. It's a virtue like they say now. Now that the note has been installed. We know that the npm package has been installed and we can actually start doing other installations, but before we do that, let's actually go in the in the browser. Let's forget about that distribution. Folder!

A

Let's go in here and say, download vs code, so we're going to install the visa studio code, which will be our development tooling. Of course you could use any other javascript typescript development tooling, as well with our student code. It's just really really really really good on the stuff. So let me actually download the windows version on this. It's going to start downloading. That should be relatively fast and let's actually open the file.

A

So I can get the visual studio code installed on this machine, hello, open file there we go and we're going to accept that and we're going to install that on the basic settings.

A

That's fine one thing: what I personally really really really like is the open with code action in the resource to the explorer file context menu and in the directory context menu. Those are really really convenient settings, so you can right click, a folder and say open in visual studio code and poof. It will open that is a tooling or as a working space. So let's install that that should be going fine.

A

It doesn't take too long to get installed and then we move into actually installing the needed packages from npm in bim side of the house using the mbm packaging manager, which does not take too long either. I'm not going to launch reserve studio code because there's no need for that. What was that last station settings? Yes, I know that I double click that twice: okay, so now we're good from a browser perspective. That is a good start and let me actually start a command line. uh In my case. That's the windows powershell is in here.

A

It is just a command line tool. You could use terminal windows, terminal command line. Whatever is your preferred option and now that if we do execute the node dash d, we can see that we have 14.19.1 version installed of the node 14, because again spfx 1.14 requires node 14. by the way that version equal version matching is just a coincidence.

A

Nothing to do with that, and the other thing which we will always check is the mpm so we're running npm at 6.14.16 in this case again, depending on when you're installing node and which version installed there might be a bit of a different version uh with your install now. What we want to do now is an install gallop, install a human generator um and the the the human and then we're to install the sharepoint framework, yeoman generator, so three different installations. I'm going to do this one by one.

A

Technically, you could actually combine them to a single command as we're showing within the documentation, but we'll do this one by one gallop: a cli.

A

That's that's global! It's a really important thing to under remember, put the global there so that we're installing the gallup to the global side of the npm, not on the phone locally. On the folder side, so it's available in any location as as we execute code within this computer, it doesn't take too long to complete.

A

Excellent so now the um the the gulp has been installed. Cop is our task management tooling, so it has to be in place. We want to actually install a yeoman, so let's do npm install hey yo, that's that's global and that's going to then install yomanjuman is basically our templating tooling, which the sharepoint framework is then using to generate the project structures. Again, let's speed up the video to save some time in here.

A

Excellent so now to your machine already has been installed. I'm gonna a bit uh resize this, because I want to show you one thing related on the sharepoint framework: yeoman generator. So if you don't know npm view and microsoft generator sharepoint just trying to learn how to write that after all of these here still having typos. So as we use the view command, which we don't explicitly go all out in the documentation, that's just good to know. We can actually see the details related on the sharepoint framework generator in the nbm systems.

A

So the latest version, which is the latest released version of the ga version, is 1.14 at this moment again, depending on when you're watching the video, it might be a newer version, so please always check the documentation as the most up-to-date guidance and then the next version is the preview version of the upcoming feature feature with already some pre preview capabilities. So at this moment of a time- and we already have a beta 1 version of sharepoint framework 1.15 available, which includes also additional improvements and adjustments.

A

So this is a cool way of then using the tags on the latest, and next so with also installing now npm install microsoft.

A

It is so hard to write those things generator sharepoint, I could do something like latest and that will then always install the latest version in here. To be fair, the latest is something which will get always installed today by default as well, because it's mapping mapped the latest pop list version. But if I would like to do a preview install, I would stay here next and that would be the latest preview installation in this particular case.

A

It would be 1.15, hopefully make sense, but in our case let's actually get rid of that and do just as global. So we install the sharepoint framework to this computer and we can finally start creating actually code after this one in another tutorial, though um so this is gonna again take a while, not too much time again, depending on when your computer is versus data connectivity and all of that stuff. But let's speed up the video to complete the installation of this as well.

A

Now the installation is completed, so we are technically ready to go so one thing what we also mentioned in the tutorial, which might be a bit confusing, but there's a clarification in the text if, if you are reading, that is that you could actually run the scalp trust dev cert at this point now. You cannot execute this in this folder, because this only works in a sharepoint framework project. So but it's a one-time execution and that's now the bit of a confusing part.

A

So one time in the machine where we're installing uh or which we're using the development purposes, we will need to execute the trust, dev search command, and the thing is, though, we need to have the project structure available to be able to do that.

A

So we can actually in this tutorial series we kind of then next create the project based on the tutorial and documentation and then we're going to execute that command to make sure that the local host can be accessed from sharepoint online, because that's what we're going to do as we start debugging and testing our code and hosting that in a sharepoint online, but other than that, and that's all we're going to do in this video. So hopefully that's useful.