Why the SharePoint Framework?
Traditional SharePoint Approach:
- SharePoint custom development – Initially developed server-side code solutions which were deployed in SharePoint Hive as Sandbox Solutions or Full Trust code deployments which was a problem in hosted SharePoint deployments such as Office 365.
- While add-ins/apps addressed the issue partly but limits capabilities for developers. These add-ins are deployed in a Sub Web and includes IFRAME which restricts page responsiveness.
Modern SharePoint Approach:
- SharePoint Framework customization’s execute within the client-side environment. The script which is developed using client-side development runs in the context of current page and the only way to customize modern pages in SharePoint.
- Provides full support for client-side customization
- Provides easy access to SharePoint data
- Customization’s run under current context
- Customization’s are responsive and accessible
- Customization’s work in classic & modern pages
Support matrix for SPFx in the three most recent environments:
- SharePoint Server 2016 (with Feature Pack 2) supports SharePoint Framework v1.1
- SharePoint Server 2019 supports SharePoint Framework <= v1.4.1
- SharePoint Online supports all versions of SharePoint Framework
Which Version of the SharePoint Framework Should You Install?
Always install the most recent version of the generator, regardless of your SharePoint environment
@microsoft/generator-sharepoint v1.9.1if you are building for SharePoint Server 2016 (with Feature Pack 2)
@microsoft/generator-sharepoint v1.9.1if you are building for SharePoint Server 2019
@microsoft/generator-sharepoint v1.9.1if you are building for SharePoint Online
There are multiple reasons why you should always use the latest version of the generator:
- It contains all of the latest updates and fixes that apply to any/all environments.
- It contains all performance optimizations & improvements to the generator’s process in creating a project.
- It contains all changes to the project templates, such as omitting or including specific packages in the project’s package.json file.
Understanding the SharePoint Framework Development Tool-chain
You need SharePoint developer tenant. This environment will also have a copy of the SharePoint workbench that will be used as test environment for client-side web parts. The workbench is a locally hosted page that can host your SharePoint client-side web parts.
Now let’s see the tool set required:
Node.js is intended to run on a dedicated HTTP server and to employ a single thread with one process at a time. Node.js applications are event-based and run asynchronously. Code built on the Node platform does not follow the traditional model of receive, process, send, wait, receive. Instead, Node processes incoming requests in a constant event stack and sends small requests one after the other without waiting for responses.
- Responsible to build and run the applications
- SPFx supports Long Term Support Version, preferably 10.x
NPM is installed with Node.js. The name NPM (Node Package Manager) stems from when NPM first was created as a package manager for Node.js. NPM can manage dependencies. Use NPM to get packages for our customizations need like Angular, React, jQuery or other useful libraries.
- Maintains an online repository (npm registry) to find and deploy new packages
- Installs packages and its dependencies
- Packages can be installed globally (-g switch) or locally
- Installed packages are available inside the node_modules folder
- Automates SPFx development and deployment tasks
- Runs tools to call the bundling and minification tasks before each build
- Compiles LESS or SASS files to CSS
- Compiles, bundles and copies files to the deployment folder for packaging
Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. It provides a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.
- Relies on NPM and Gulp
- Scaffolding tool for Modern web apps
- SPFx Solution generator
- “yo” is the command line utility to build the project structure
- The Yeoman generator for creating the SharePoint Framework project is available from Microsoft
Type Script (Development Language)
- Strongly types language
Visual Studio Code (Development IDE)
- Free, open source IDE for SPFx solutions
- Fast and lightweight
- Can work on any operating system, including Windows, Mac OS and Linux
- Offers functionalities like Intellisense, debugging, source control and file management.
- Supports third-party extensions
- Automatically updates itself
Additional IDE useful tools – ATOM & WebStorm
- The HTML Page served by Node.js on a local file system
- It provides sample canvas to add web parts
- The local SharePoint workbench is available as workbench.html on localhost
- On the SharePoint Site, it is available as workbench.aspx served from hive folder
- Responsive in nature
Set up of development environment for SPFx
- Install the latest LTS version from NodeJS (ex: 10.x)
- If you already have NodeJS installed, check the version by running the following command:
Install Yeoman and Gulp
npm install -g yo gulp
Install Yeoman SharePoint Generator
npm install -g @microsoft/generator-sharepoint
- If you already have the Yeoman SharePoint Generator installed, check the version by command below
npm ls -g @microsoft/generator-sharepoint -g -depth=0
Install Code Editor
Update NPM Packages
To check the outdated packages
npm outdated -global (This command will report packages the needs update)
npm update -g <package-name> (Update each package listed by above command)
npm update -g (for all packages)
To list all global packages
npm ls -g --depth=0