SPFx open source development tools

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.