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.
NPM:
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:
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.
TypeScript:
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.
Gulp:
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.
Office UI fabric:
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.
VS Code:
It is a free coding editor which for various JavaScript
frameworks & several other languages.
VS Code is replament of VS.
