Skip to content
SPFx Toolkit

Technical Insights

This section provides a deeper understanding of the technical aspects of the SharePoint Framework Toolkit, including its project structure, authentication mechanisms, deployment flows, and development practices.

📃 Solution details

Section titled “📃 Solution details”

The project is a VS Code extension that uses many typical VS Code extension components like panels, providers, commands, webviews etc.

👉 Project structure

Section titled “👉 Project structure”

The main definition of the project is (as always) in the package.json file. Besides the dependencies in that file, we may find most of the VS Code extension capabilities (some almost fully defined like welcome experience or walkthrough or commands) and details present in the VS Code marketplace.

├── assets // Keeps all the graphical files connected to the project (either used in the extension or in docs)
│   └── images // Keeps images used in readme file
├── data // Keeps .json files which store info about all the samples or scenarios of a given PnP sample gallery repo
├── scripts // Keeps all the scripts used for maintenance or in pipelines
├── src
│   ├── chat // GitHub Copilot participant related files
│   ├── constants // Types, dictionary data, or static strings
│   ├── models // Models/interfaces used as method inputs or outputs
│   ├── panels // Panels are the sections you see in the action pane. Here we decide if we show welcome experience or the SPFx project panels and what is their behavior
│   ├── providers
│   ├── services // Groups functionalities dedicated to a specific feature or service (like Scaffolder)
|   ├── tests
│   ├── utils // Groups all small helper methods
│   ├── webview // Groups all webviews used in this extension
│   └── extension.ts // Main point of the extension that runs on start and registers all other components
├── syntaxes
├──  webpack
├── .eslintrc.json
├── .vscodeignore
├── postcss.config.js
├── tailwind.config.js
└──  tsconfig.json

👉 Tech used

Section titled “👉 Tech used”

The extension was developed using the following tech:

  • CLI for Microsoft 365
  • React.js
  • TypeScript
  • Tailwindcss
  • Webpack

👉 Extension Capabilities

Section titled “👉 Extension Capabilities”

The extension uses the following VS Code extension capabilities:

🦾 Pipelines

Section titled “🦾 Pipelines”

Currently in the project we have 4 pipelines:

  • Pre-Release - This pipeline should be used only for dev branch. It is only possible to trigger this pipeline manually. The aim is to release a VS Code extension version as a pre-release so specifying --pre-release option. It should be used to deliver the latest features that were developed and will be released with a new major or minor version, so that it may be tested in a pre-release (beta) in order to collect feedback. Before this pipeline is started we should check if:
    • in the package.json file the version was increased in the patch section. So for example x.y.1
  • Main Release - This pipeline should be used only for main branch. It is possible to trigger it manually but also it will be started when a new release is issued via GitHub (so a new tag is created as well). It should be used to deliver a new major or minor version of the extension. Before this pipeline is started we should check if:
    • in the package.json file the version was increased in either major or minor parts. So for example 1.1.x
    • the changelog file was updated with details for the new release
    • all the new features are documented in the wiki and added to the README file
    • a vsce package is created so that it may be included in the release
  • Update samples data - It actually does not matter on which branch this pipeline will run as it does not work with the source files of this project. It may be triggered manually or it will trigger as scheduled, once a week on Saturday. The aim of this pipeline is to recheck the PnP SPFx web parts, SPFx extensions, ACE sample repos and create local json files kept in the data folder which will have the info about each sample. The pipeline creates a PR so that the changes may be reviewed and merged manually (they have to be merged to the main branch). The SharePoint Framework Toolkit uses those files in order to create the sample gallery views. This allows us to keep the samples up to date without the need to release a new version of the extension. There are no prerequisites that need to be met in order to run this pipeline.
  • Create .vsix package - The aim of this workflow is to create .vsix package that can be downloaded from the artifacts and tested locally.

🔐 Authentication

Section titled “🔐 Authentication”

SPFx Toolkit uses the CLI for Microsoft 365 as its authentication provider to sign in to Microsoft 365. In order to do that, SPFx Toolkit uses an Entra ID app registration that is created on your tenant either manually or automatically. The VS Code extension will always use your default browser to sign in to Microsoft 365 that way allows you to use the latest security features like passwordless authentication or multi-factor authentication. SPFx Toolkit’s aim is always to use the least privileges required that will unlock the features of the extension. The permissions present in the correlated Entra ID app registration are delegated permissions, which means the application acts on behalf of a signed-in user. For more information regarding the Entra app registration and the permissions required by the SPFx Toolkit, please refer to the Manual setup of Entra App Registration. Although it is not recommended, it is possible to use fewer permissions than the ones required by the SPFx Toolkit, but in that case, some features may not work as expected or at all. SPFx Toolkit tries to make it clear what app registration and permissions are used, exposing the direct link to the Entra ID app registration in the account panel.