How to upgrade your solution to latest version

Please note it is not compulsory to upgrade your solution, but it is recommended. I personal advise – Only upgrade if you want to add new feature to existing solution because upgrading is not simple task. You also might run in to issues where existing functionality might break because of some latest changes in dependent library.

To find Current and Latest version of global packages:

To find current version and latest version of Yeoman generator we can use below command.

npm outdated –global

Please note we have used — global parameter to find versions of all global packages.

To find current and latest version of libraries used in your Project:

Go to project directory , run below command

npm outdated

Upgrade solution:

To upgrade solution, we need to install all the packages with required version.

npm install <Package Name>@<version> –save

How to install the Microsoft Teams Apps generator - Yo Teams

 The Yeoman generator for Microsoft Teams apps are installed with the following command:

npm install generator-teams --global

How to install the preview versions in SPFx

 If you want to install preview versions of the Teams generator with this command:

npm install generator-teams@preview –global

How to install PnP js dependencies/libraries

 npm install @pnp/common @pnp/sp @pnp/graph --save

npm install @pnp/common @pnp/odata @pnp/logging @pnp/graph @microsoft/microsoft-graph-types –save

If you want to downgrade the version, then uninstall the library and install:

npm install @pnp/logging@2.11.0 @pnp/common@2.11.0 @pnp/odata@2.11.0 @pnp/sp@2.11.0 --save

How to check the versions of the installed packages in SPFx

npm view <package> version - returns the latest available version on the package.

npm list --depth=0 -g - returns versions of all globally installed modules without dependencies.

npm list - returns versions of all modules and dependencies.

node -v – To get node version: 

Set up your SharePoint Framework development environment

 Install Node.js

Navigate to https://nodejs.org/dist/ and install the MS recommended LTS version(node-v16.20.2-x64.msi).

Note: The SharePoint Framework supported only in LTS (Lone Term Support) version.

You can check if you already have Node.js already installed, including installed version, by running the following command:

node --version

Open the Node JS command prompt and verify the version of Node.js

Install code editor(VS Code)

Install the any code editor.

https://code.visualstudio.com/ - Please make sure you download System installer.

Run the setup wizard and follow along with the instructions to install. In Additional task link below, use the below preferred option if needed.

destination location: \Program Files\Microsoft VS Code

Install development toolchain prerequisites(Gulp, yeoman and SharePoint Yeoman generator)

Download yeoman and gulp packages using the below commands from Node JS command prompt, we are using -g parameter so that it would be installed globally across your Node JS environment.

Install Gulp: npm install gulp-cli –global

Install Yeoman: npm install yo –global

Install Yeoman SharePoint generator: npm install @microsoft/generator-sharepoint –global

Install the above three in a single line using below command:

npm install gulp-cli yo @microsoft/generator-sharepoint –global

To check the details of SPFx Yeoman generator:

npm view @microsoft/generator-sharepoint

How to disable SS3 and enable TLS 1.2

Before disabling SSL 2.0, SSL 3.0 and TLS 1.0 protocols in Domain Controllers, we need to ensure all machines and apps in your AD domain do not use SSL 2.0, SSL 3.0 and TLS 1.0 protocols and all machines and apps use TLS 1.1 or TLS 1.2.

We can enable TLS 1.1 or TLS 1.2 and disable SSL 2.0, SSL 3.0 and TLS 1.0 protocols via GPO registry on all machines, in this way, Windows machines and Microsoft Apps will use TLS 1.1 or TLS 1.2.

To disable SSL 3.0, Open the Registry Editor and run it as administrator.

1. In the Registry Editor window, go to:

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\Schannel\Protocols\

2. In the navigation tree, right-click on the SSL 3.0 key, and in the pop-up menu, click New > Key.

3. Name the key, Client.

4. In the navigation tree, right-click on the SSL 3.0 key again, and in the pop-up menu, click New > Key.

5. Name the key, Server.

6. In the navigation tree, under SSL 3.0, right-click on Client, and in the pop-up menu, click New > DWORD (32-bit) Value.

7. Name the value DisabledByDefault and hit enter.

8. Ensure that is shows 0x00000000 (1) under the Data column. If it doesn't, right click and select Modify and enter 1 as the Value data.  

9. In the navigation tree, under SSL 3.0, right-click on Server, and in the pop-up menu, click New > DWORD (32-bit) Value.

10. Name the value Enabled and hit enter.

11. Ensure that it shows 0x00000000 (0) under the Data column (it should by default). If it doesn't, right-click and select Modify and enter 0 as the Value data.

Restart your Windows server.

You have successfully disabled the SSL v3 protocol.

For instructions about disabling browser support for the SSL v3 protocol, see Disabling Browser Support for the SSL 3.0.

Enable the TLS 1.2 by executing the following powers shell script

New-Item 'HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client' -Force | Out-Null 

New-ItemProperty -path 'HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client' -name 'Enabled' -value '1' -PropertyType 'DWord' -Force | Out-Null 

New-ItemProperty -path 'HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client' -name 'DisabledByDefault' -value 0 -PropertyType 'DWord' -Force | Out-Null

Setup your Microsoft 365 tenant to set up your SharePoint Framework development environment

Create app catalog site

Go to the SharePoint Admin Center, In the left sidebar, select More features, locate the section Apps and select Open.

This is start the automatic creation of the SharePoint app catalog to the tenant if it does not exist. If the app catalog already exists, you will be redirect to it. SharePoint app catalog is used to manage and deploy SharePoint Framework solutions.

 

Create a new site collection

Create a Microsoft 365 group Team site.

SharePoint Workbench

SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint Framework developer toolchain contains a version of the Workbench that works locally and helps you quickly test and validate solutions that you're building.

It's also hosted in your tenant to preview and test your local web parts in development. You can access the Hosted SharePoint Workbench from any SharePoint site in your tenancy by browsing to the following URL: https://liakathcloudeducation.sharepoint.com/sites/LiakathDev/_layouts/15/workbench.aspx 

Once you setup your M365 tenant proceed to setup your SPFx dev environment