Microsoft 365 Community Experts from the field, 28 Sep 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Finally, Sharepoint Framework 1.18 Is Here! Let's Install It!

Description

#spfx #sharepoint #webpart

Beginners guide to developing in the SharePoint Framework (SPFx) version 1.18 (September 2023).

Whether you develop in Javascript or a Javascript framework such as ReactJS or VueJS, you will benefit from this series.

Chapters

00:00 - Intro
00:40 - Install Node Version Manager (NVM), Node 18
02:11 - Install Visual Studio Code (VSCODE)
02:51 - Install GULP, YO and the Generator for SPFx
03:26 - RECAP Section 1
03:36 - Create Webpart, Build
05:06 - RECAP Section 2
05:16 - Configure and Run online
05:50 - Conclusion

Links Referenced in this Video

Microsoft page on setting up the environment
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

Node Version Manager for Windows
https://github.com/coreybutler/nvm-windows

Node Version Manager for Mac
https://tecadmin.net/install-nvm-macos-with-homebrew/

Execution Script Policies
https://lazyadmin.nl/powershell/running-scripts-is-disabled-on-this-system/

Links

Microsoft Guide to accompany this video
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

Visual Studio Code
https://code.visualstudio.com/Download

Node JS
https://nodejs.org/

Edge Browser
https://microsoftedgewelcome.microsoft.com/en-gb/

Our gear - click through to support our channel! :)

Camera (Canon M50)
UK: https://amzn.to/3sUbzuL
US: https://amzn.to/3uBsG5c

Camera mic (RODE VideoMic Pro)
UK: https://amzn.to/3ml8xgC
US: https://amzn.to/2RkGxyi

Camera tripod (Manfrotto Compact tripod):
UK: https://amzn.to/3fJGyWU
US: https://amzn.to/3mF4oV2

Voiceover Mic (Blue Yeti)
UK: https://amzn.to/2PV7UOQ
US: https://amzn.to/3uMiEym

Chris's dev mouse for PC (Logitech MX Master 3)
UK: https://amzn.to/39K7BNV
US: https://amzn.to/3uKYvso

Chris's dev keyboard for PC (Logitech MX Keys)
UK: https://amzn.to/3rSbHcX
US: https://amzn.to/3a6Unef

Rob's dev keyboard for Mac (Apple Magic Keyboard)
UK: https://amzn.to/3dEQpKG
US: https://amzn.to/3sb6JZc

Rob's dev mouse for Mac (Apple Magic Mouse)
UK: https://amzn.to/3sRCQhr
US: https://amzn.to/3mFi6qS

Assets

All music and sound licensed from https://www.epidemicsound.com/
Thumbnail produced with https://www.canva.com/
Video Edited with Davinchi Resolve 16 https://www.blackmagicdesign.com/products/davinciresolve/

A

So there's a new version of the SharePoint framework out 1.18 and it brings lots of changes especially to the environment, the version of node that it runs on so I've done this video so that maybe, if you're installing for the first time or you need to reinstall you'll, know what to do. Let's dive straight in.

A

So I'm going to install this on a Windows 11 PC, but everything is the same on a Mac, the only difference being where you install node version manager from NVM and I'll put a link to that below. So I'm going to go to my Windows PC.

A

And the first thing I'm going to do is open my browser and I'm going to go to NVM for Windows a great little package that allows us to choose a node version when we're developing so I'm going to download that.

A

And I'm going to move down to the downloads and I'm going to go for the executable as we're on Windows as I, say: I'll put a link to the Mac version below.

A

So yes, I want to install that I'm going to accept the agreement and I'll choose the defaults for this example, but you might want to configure that to work best in your environment, so I'll. Let that install fantastic and I'll bring a command prompt up. Note, I'm running as administrator, so I've got full control. If I do NVM I know that's working, let me just uh check and install node version. 18.! That's a change for 1.18!

A

You can have a very recent supported version of node if I check the node version with node minus V yeah, it's working well. Actually it's giving me an error, so I need to use NVM use 18 for that to work okay.

A

So the next thing I'm going to do is I'm going to quickly install Visual Studio code. You may have done this already, but I'm going to download it for Windows and I'm, going to run that and agree, of course, to everything and I know you all read these things, but I'm going to agree anyway and I'm going to click all the points on there and let it do its business and install so um once I've finished I'll then launch that and good that's working I'm using the August 2023 on this example.

A

So what I want to do is I want to install all the different bits that make up the SharePoint framework. So the first thing I'm going to do is I'm going to install gulp, so gulp will run tasks for us. Next thing is I'm going to install Yeoman by copying that from a Microsoft page I'll put the link below and then the final thing I want to do is install the generator for Yeoman. These are the templates for building SharePoint Frameworks web parts. Of course,.

A

So I'm going to go into my development, folder and I'm, going to run Yo, which is Yeoman and I'm, going to choose Microsoft SharePoint, as the templates so I need to put in a solution. Name I'm, going to call this. My web part I'm going to choose webpart as a template. Although there's lots of other templates we'll explore later and I'm going to call it hello, Robert's Dev, talk hello rdt and to show everything working I'm going to choose react just showing how it installs all the libraries for you so we'll.

A

Let that do its work.

A

And then notice, once I've created that I have to run gulp trust, devser I, agree. Yes to that, and we've Now set up that communication between our local environment and along the way so I'm going to put code dot to open it up and now I've got it in Visual Studio I want to open a terminal up and I want to check I'm running the correct version of node and then gulp build, and, of course this is giving me an error. Now. What it is is I need to set the execution policy to remote signed.

A

You may not have this problem, but on Windows I need to do that and then I do gulp build and it should be fine.

A

So I'll put the link to the execution policy that you need to run below as well: okay, nice and quick. We will go into more detail later on I'm, going to change the tenant insert.json to my one, which is Robert's Dev talk.sharepoint.com.

A

Yours will be different and save that off and now, when I do gulp serve, it will open the browser and I can edit add in my uh fantastic. So there we are so we've been up to install on our environment. I'll, put the steps Below in the text and Rewind and have a look again if, if I went too fast on there, but I just wanted to quickly show you how easy it is to set up the environment. It gives us node 18 environment, to run in. Thank you Microsoft, finally, and yeah.

A

It's got a really robust framework to develop in so have a look at some of my other videos on how to use a SharePoint framework and I think I'll start a new series of working in version. 1.18 thanks for watching, have a look at our other videos. Please click and subscribe and I'll see you next time.