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
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:
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 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
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:
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
npm view @microsoft/generator-sharepoint
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.
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
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 Microsoft 365 group Team site.
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
Node.Js:
It is an open-source, cross-platform runtime environment for
developing applications. In SPFx, Node.js has the same role that .NET/IIS
Express. And it has NPM, the largeest open source library.
Node package manager is a software registry to share
software or manage private development.
NPM is the replacement to the NuGet.
NPM included as part of Node.js setup.
Package installation modes:
npm install @package – installs the package
npm install @package –save – installs the package and updates package.json automatically (dependencies section)
npm install @package@version –save-dev – installs the package and updates package.json automatically (devDependencies section)
npm install @package@version –save – installs the package with the specified version and updates package.json automatically (dependencies section)
npm install @package@version –save-dev – installs the package with the specified version and updates package.json automatically (devDependencies section)
Useful npm packages to include in a SPFx solution:
npm install gulp yo @microsoft/generator-sharepoint@<spfx_version> –global
Example: npm install gulp yo @microsoft/generator-sharepoint@1.15.2 –global
npm install @microsoft/microsoft-graph-types –save
npm install @pnp/sp –save
npm install @pnp/graph –save
npm install @fluentui/react –save
npm install @pnp/spfx-controls-react –save
npm install @pnp/spfx-property-controls –save
npm install localforage –save
npm install @luudjanssen/localforage-cache –save
npm install spfx-fast-serve -g
npm install -g pnpm
Yeoman is the SharePoint framework’s template engine and it
runs on top of Node.js. The templates used by the framework are downloaded from
GitHub, which means that you need also to install Git on your machine.
Yeoman is responsible to create the project structure with
all the files and folders.
Yeoman is replace to the VS Template.
It is an open-source language built on JavaScript to be
executed on the browser.
It is the preferred programming language to develop in SPFx
and it is a maintained by Microsoft.
If you are coming from C#, TypeScript is the easiest way to
start developing with script languages, all the concepts like classes and
objects are available in TypeScript.
TypeScript is replacement to the C#.
TypeScript concepts:
const – allows the definition of a variable whose value is
not going to be changed. Use this instead of let if the variable value is not
going to be changed after its declaration.
let – allows the definition of a variable whose value is
going to be changed. Use this instead of const if the variable value is going
to be changed after its declaration.
var – allows the definition of a variable whose value is
going to be changed. To be avoided since variables declared with var are
acessible from any scope (scope (function, module, namespace, global)
type – allows the definition of a data class without any
business logic or methods, just data. It can be also useful to avoid the usage
of magic strings in the code.
enum – allows the definition of a enumeration
interface – allows the definition of a interface that can
then be implemented by a concret class.
class – allows the definition of a class that optionally
implements an interface
extends – when used, it allows a class to inherit from
another class
export – allows the export of functions, variables, interfaces
and classes that can be imported with the import statement
import – allows the import of functions, variables,
interfaces and classes exported with the export statement
Yeoman generator:
It is a plugin to scaffold complete projects or useful
parts.
It is a task runner that uses Node.JS as platform, it builds
system automated tasks like CSS and HTML minification, concatenating library
files, and compiling the SASS files tasks can be run using Shell or Bash
scripts.
Gulp is replacement of MS Build.
Important Gulp Commands:
gulp trust-dev-cert – installs the development certificate
gulp build – builds the solution, tranforms TypeScript into
JavaScript
gulp clean – cleans the solution. Cleans the dist and temp
folders from the solution
gulp serve – launches SharePoint Workbench to test web parts
in debug mode
gulp serve –nobrowser – allows testing web parts in debug
mode but without launching SharePoint Workbench
gulp bundle – bundles the solution and minimizes CSS and JS
(in debug mode)
gulp bundle –ship – bundles the solution and minimizes CSS
and JS for deployment in SharePoint in production mode (release mode)
gulp package-solution – generates package (.sppkg file) but
to run in debug mode
gulp package-solution –ship – generates package (.sppkg
file) to run in production modeWebpack - It is a module bundler for bundling
JavaScript files & transforming, bundling, or packaging any resource or
asset.
It is the front-end toolkit that makes your app or add-in
blend seamlessly into Office. It includes all the web components, styles, icons
and fonts used by Microsoft SharePoint and other Office applications.
It is a free coding editor which for various JavaScript
frameworks & several other languages.
VS Code is replament of VS.
SharePoint Framework is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and extending Microsoft Teams.
With the SharePoint Framework, you can use modern web
technologies and tools in your preferred development environment to build
productive experiences and apps that are responsive and mobile-ready.
With the SharePoint Framework, we can develop:
Technology stack:
SPFx Development Toolchain: New and the old development model
|
Web Stack |
Microsoft Tool |
|
Node.js |
.Net
Framework |
|
NPM |
NuGet |
|
Yeoman |
Visual Studio |
|
Gulp.js |
MS Build |
|
TypeScript |
C# |
In SPFx if you chose 'No JavaScript Framework' template,
webpart contain "webpart.ts" file.
If you chose ‘React’ template, SPFx webpart contains the
below 2 files.
SPFx React vs Angualr:
React is supported by Microsoft, Angular is supported by
Google.
It is best for component-based applications. There won't be
any page load because in React js we break our application into components. And
for each component the application maintains internal state.
|
Pros |
Cons |
|
1. Component
and data patterns improve readability, which helps to maintain larger apps. |
1. It is not a full framework. |
|
2. local
development solution packaging (creating .sppkg) is really quick. |
2. It allows
only 1-way data flow. 3. No HTTP
call option. |
Angular is a full-blown web framework by Google instead of
patchwork of libraries (much more than react). It is among the robust web
frameworks for front-end development. Go for Angular if you want full page
experience. It’s a recommended framework if routing, dependency injection &
2-way communication is required a lot.
|
Pros |
Cons |
|
1. It has
good code structure (MVC pattern) and market popularity. |
1. The
full-page experience lacks SharePoint UI reuse. |
|
2. It has
routing, dependency injection, HTTP calls etc. |
2. It lacks
SharePoint friendly components. |
|
3. It allows
2-way communication. |
3. SPFx don’t
support any default control. |
SPFx Open Source Development Tools
