### Install all solution packages

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/viva/bot-powered/Building-Your-First-Bot-Powered-ACE-TTK-TS.md

Run this command after installing specific packages to install all other dependencies required by the Bot solution. This ensures all necessary libraries are available.

```bash
npm i
```

--------------------------------

### Install Project Dependencies and Build

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/sharepoint-framework-cli.md

After scaffolding, navigate to the project directory and install its dependencies using npm, then build the project.

```bash
cd hello-world
npm install
npm run build
```

--------------------------------

### Install Stylelint and configuration

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/customize-heft-toolchain-heft-script-plugin.md

Install Stylelint and the standard SCSS configuration as development dependencies.

```bash
npm install stylelint stylelint-config-standard-scss --save-dev
```

--------------------------------

### Install React Dependencies

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md

Install the required React and related type definitions for your project. This step is crucial before you start using React components.

```bash
npm install react react-dom @types/react @types/react-dom

```

--------------------------------

### Install SharePoint Framework CLI

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/sharepoint-framework-cli.md

Installs the spfx-cli globally using npm. Ensure Node.js and npm are installed.

```bash
npm install -g @microsoft/spfx-cli
```

--------------------------------

### Example Azure Storage Configuration

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/deploy-web-part-to-cdn.md

An example of a populated `deploy-azure-storage.json` file with specific Azure Storage account details.

```json
{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
  "workingDir": "./release/assets/",
  "account": "spfxsamples",
  "container": "azurehosted-webpart",
  "accessKey": "q1UsGWocj+CnlLuv9ZpriOCj46ikgBbDBCaQ0FfE8+qKVbDTVSbRGj41avlG73rynbvKizZpIKK9XpnpA=="
}
```

--------------------------------

### Basic Gulp Image Resize Task Example

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/integrate-gulp-tasks-in-build-pipeline.md

A standard Gulp task example demonstrating how to use the gulp-image-resize plugin to resize images. This is a foundational example for custom task integration.

```javascript
var gulp = require('gulp');
var imageResize = require('gulp-image-resize');

gulp.task('default', function () {
  gulp.src('test.png')
      .pipe(imageResize({
        width : 100,
        height : 100,
        crop : true,
        upscale : false
      }))
      .pipe(gulp.dest('dist'));
});
```

--------------------------------

### Install Adaptive Cards Package

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/viva/bot-powered/Extending-existing-Teams-Bot.md

Execute this command to install the adaptivecards package with version 1.2.3.

```console
npm i adaptivecards@1.2.3 --save
```

--------------------------------

### Install Moment.js Package

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/guidance/migrate-jquery-fullcalendar-script-to-spfx.md

Install the Moment.js package, which includes its type declarations. This is a regular dependency.

```bash
npm install moment --save
```

--------------------------------

### Install Office UI Fabric Core Package

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/extensions/get-started/using-page-placeholder-with-extensions.md

Install the @microsoft/sp-office-ui-fabric-core package to enable importing SCSS styles for rendering placeholders.

```console
npm install @microsoft/sp-office-ui-fabric-core
```

--------------------------------

### Install marked Package and Type Declarations

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/basics/add-an-external-library.md

Install the marked package for markdown compilation and its corresponding type declarations for TypeScript support.

```bash
npm install marked --save
```

```bash
npm install @types/marked --save-dev
```

--------------------------------

### Navigate to project directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/extensions/get-started/building-simple-field-customizer.md

Change into the newly created project directory to begin development.

```bash
cd field-extension
```

--------------------------------

### List Globally Installed Packages

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/set-up-your-development-environment.md

Run this command to get a list of all globally installed npm packages. This is useful for verifying package versions and identifying potential conflicts.

```console
npm list --global
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/extensions/get-started/build-a-hello-world-extension.md

Change into the newly created project directory to begin development.

```bash
cd app-extension
```

--------------------------------

### Configure request headers for HttpClient

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/connect-to-anonymous-apis.md

This example demonstrates how to specify custom headers, such as 'accept', when making a GET request with the HttpClient. Ensure the API you are calling supports the specified headers.

```typescript
this.context.httpClient
  .get('https://jsonplaceholder.typicode.com/todos/1', HttpClient.configurations.v1,
    {
      headers:
        [ 
          ['accept', 'application/json']
        ]
    })
  .then((res: HttpClientResponse): Promise<any> => {
    return res.json();
  })
  .then((response: any): void => {
    console.log(response);
  });

```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/deploy-web-part-to-cdn.md

Change into the newly created project directory to start scaffolding.

```console
cd azurehosted-webpart
```

--------------------------------

### Get user's current location action

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/viva/get-started/actions/geolocation/GeolocationDocumentation.md

This example shows how to introduce the VivaAction.GetLocation action in your template JSON to fetch the user's current geolocation.

```json
"actions": [{
  type: 'VivaAction.GetLocation',
  id: 'Get Location'
}]
```

--------------------------------

### Navigate to project directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/extensions/get-started/query-suggestion-tutorial-building.md

Change into the newly created project directory.

```bash
cd query-extension
```

--------------------------------

### Yeoman generator success message

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md

Example success message displayed by the Yeoman SharePoint Generator after project creation and dependency installation.

```console
_=+#####!
###########|       .------------------------------------------.
###/    (##|(@)    |             Congratulations!             |
###  ######|   \   |  Solution helloworldwebpart is created.  |
###/   /###|   (@) |    Run npm run start to play with it!    |
#######  ##|   /   '------------------------------------------'
###     /##|(@)
###########|
**=+####!
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api.md

Change into the newly created project directory.

```bash
cd command-extension
```

--------------------------------

### Azure Pipelines Build Template (YAML)

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/implement-ci-cd-with-azure-pipelines.md

Use this YAML template to define the continuous integration and testing stage for your SharePoint Framework project in Azure Pipelines. It handles Node.js setup, dependency installation, bundling, testing, and artifact publishing.

```YAML
parameters:
  name: ''
jobs:
  - job: ${{ parameters.name }}
    pool:
      vmImage: 'ubuntu-latest'
      demands:
      - npm
      - node.js
      - java
    variables:
      npm_config_cache: $(Pipeline.Workspace)/.npm

    steps:
      - checkout: self

      - task: NodeTool@0
        displayName: 'Use Node 10.x'
        inputs:
          versionSpec: 10.x
          checkLatest: true

      - task: CacheBeta@1
        inputs:
          key: npm | $(Agent.OS) | package-lock.json
          path: $(npm_config_cache)
          cacheHitVar: CACHE_RESTORED
      - script: npm ci
        displayName: 'npm ci'

      - task: Gulp@0
        displayName: 'Bundle project'
        inputs:
          targets: bundle
          arguments: '--ship'

      - script: npm test
        displayName: 'npm test'

      - task: PublishTestResults@2
        displayName: Publish test results
        inputs:
          testResultsFormat: JUnit
          testResultsFiles: '**/junit.xml'
          #failTaskOnFailedTests: true #if we want to fail the build on failed unit tests

      - task: PublishCodeCoverageResults@1
        displayName: 'Publish code coverage results'
        inputs:
          codeCoverageTool: Cobertura
          summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'

      - task: Gulp@0
        displayName: 'Package Solution'
        inputs:
          targets: 'package-solution'
          arguments: '--ship'

      - task: CopyFiles@2
        displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
        inputs:
          Contents: |
            sharepoint/**/*.sppkg
          TargetFolder: '$(Build.ArtifactStagingDirectory)'

      - task: PublishBuildArtifacts@1
        displayName: 'Publish Artifact: drop'
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/library-component-tutorial.md

Change into the newly created project directory.

```bash
cd corporate-library
```

--------------------------------

### Microsoft Graph JavaScript SDK v3 Support

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/release-1.15.0.md

Starting with SPFx 1.15.0 only v3 of the Microsoft Graph JavaScript SDK is supported. v1 support is removed for all new and updated solutions. Please update your code accordingly to get the right version.

```typescript
this.context.msGraphClientFactory.getClient('3');
```

--------------------------------

### Navigate to Project Folder

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md

Change into the newly created project directory to begin development.

```console
cd spfx-ecb-extension
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md

Change into the newly created project directory.

```console
cd jquery-webpart
```

--------------------------------

### Install SharePoint Framework Generator

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/use-aad-tutorial.md

Installs the latest version of the SharePoint Framework generator globally. Ensure you have Node.js and npm installed.

```bash
npm install -g @microsoft/generator-sharepoint
```

--------------------------------

### Install validator Package

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/basics/add-an-external-library.md

Install the validator package using npm. For TypeScript projects, remember to install type declarations separately if they are not included with the package.

```bash
npm install validator --save
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/provision-sp-assets-from-package.md

Change into the newly created project directory.

```console
cd asset-deployment-webpart
```

--------------------------------

### Install jQuery Type Declarations

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/basics/add-an-external-library.md

Install the type declarations for jQuery to enable TypeScript support. You do not need to install the jQuery NPM package if you are loading it from a CDN.

```bash
npm install --save-dev @types/jquery
```

--------------------------------

### Markdown Content Example

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/extending-webpack-in-build-pipeline.md

This is an example of markdown content that will be processed by the markdown-loader.

```markdown
#Hello Markdown

*Markdown* is a simple markup format to write content.

You can also format text as **bold** or *italics* or ***bold italics***
```

--------------------------------

### Install SPFx Development Toolchain Globally

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/set-up-your-development-environment-gulp-toolchain.md

Install the Gulp CLI, Yeoman, and the SharePoint Framework Yeoman generator globally. This command installs all three essential tools in one go.

```bash
npm install gulp-cli yo @microsoft/generator-sharepoint --global
```

--------------------------------

### Navigate to your web part project directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md

Ensure you're in your project directory.

```console
cd helloworld-webpart
```

--------------------------------

### Package your solution

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md

Creates an updated .sppkg package in the sharepoint/solution folder.

```console
heft package-solution --production
```

--------------------------------

### Bundle your solution

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md

Executes a release build of your project, using a dynamic label as the host URL for your assets, which is automatically updated based on your tenant CDN settings.

```console
heft build --production
```

--------------------------------

### Verify spfx-cli Installation

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/sharepoint-framework-cli.md

Checks if the spfx-cli has been installed correctly by displaying its version.

```bash
spfx --version
```

--------------------------------

### Install Yeoman v4.x for older SPFx versions

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/set-up-your-development-environment-gulp-toolchain.md

If you are using an SPFx version prior to v1.18.2, you may need to install Yeoman v4.x. This command installs the latest v4 version globally.

```bash
npm install yo@4.3.1 --global
```

--------------------------------

### Run Heft Start Command

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/connect-to-sharepoint.md

Navigate to your project directory and run 'heft start' to initiate the development server. This command builds and bundles code automatically upon saving changes.

```console
cd helloworld-webpart
heft start
```

--------------------------------

### Build and Package SharePoint Solution

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/extensions/get-started/query-suggestion-tutorial-building.md

Use these commands to build the solution for production and create the .sppkg file. Ensure you are in the project directory.

```console
heft build --production
```

```console
heft package-solution --production
```

--------------------------------

### Example License File Content

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/customize-heft-toolchain-heft-included-plugins.md

This is a sample text file used to simulate a licensing file.

```text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in suscipit sapien. Praesent sed ligula a mauris dictum lobortis quis ac sem. Mauris ultricies nunc erat, at auctor metus facilisis at. Cras blandit tellus ac erat lacinia laoreet. Donec ut arcu eleifend, tristique orci sit amet, pharetra velit. Curabitur ac sagittis sem. Aenean condimentum felis in massa convallis, eu rhoncus massa congue. Sed ornare semper ante, id convallis sapien. Praesent ut leo ut ligula vehicula venenatis sit amet et dolor. Phasellus nec dui purus. Integer tortor sapien, congue ac ligula tincidunt, volutpat vulputate purus. Cras vel pharetra velit. Proin eget massa in nisl tempor placerat vitae eget quam. Nullam faucibus orci vel vehicula auctor.

Integer sit amet eleifend nulla. Nam ultrices urna lorem, nec pulvinar metus malesuada id. Suspendisse luctus odio vitae ullamcorper blandit. Nam viverra tristique imperdiet. Aliquam iaculis urna a augue mattis, vel placerat magna posuere. Duis in nisl arcu. Pellentesque gravida convallis fermentum.
```

--------------------------------

### Install SharePoint Framework development tools globally

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/set-up-your-development-environment.md

Install the necessary global packages for SharePoint Framework development, including Heft, Yeoman, and the SharePoint generator. This command installs all three in a single line.

```bash
npm install @rushstack/heft yo @microsoft/generator-sharepoint --global
```

--------------------------------

### Start development server with pseudo-locale

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/guidance/localize-web-parts.md

Run the development server using the base pseudo-locale. This command loads the pseudo-locale for testing special characters and string length accommodation.

```console
heft start --locales qps-ploc
```

--------------------------------

### Example of a full URL with query string parameters

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/debug-in-vscode.md

An example of a complete URL including the SharePoint site, page, and the necessary query string parameters for debugging.

```json
https://contoso.sharepoint.com/Lists/Contoso/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}
```

--------------------------------

### Create a new web part project

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md

Command to create a new SharePoint web part project using the Yeoman generator.

```console
yo @microsoft.com/sharepoint
```

--------------------------------

### Install jQuery Type Declarations

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/guidance/migrate-jquery-fullcalendar-script-to-spfx.md

Install type declarations for jQuery using npm. This is a development dependency.

```bash
npm install @types/jquery@1 --save-dev
```

--------------------------------

### Install Angular type declarations using npm

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/guidance/use-existing-javascript-libraries.md

Install type declarations for Angular to use it with TypeScript.

```console
npm install @types/angular --save-dev
```

--------------------------------

### SharePoint Framework serve configuration example

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/set-up-your-development-environment.md

This JSON configuration defines the settings for the SharePoint Framework's local web server, including the port, HTTPS usage, and the initial page to load. The `initialPage` property uses a placeholder `{tenantDomain}` which can be dynamically replaced by an environment variable.

```json
{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}
```

--------------------------------

### Build and Serve SharePoint Project

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/toolchain/extending-webpack-in-build-pipeline.md

Execute this command in the root of your project directory to build and serve your SharePoint Framework project.

```console
gulp serve
```

--------------------------------

### Install @microsoft/sp-list-subscription

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/subscribe-to-list-notifications.md

Install the necessary npm package to use the SharePoint Framework list subscription capability.

```console
npm install @microsoft/sp-list-subscription --save --save-exact
```

--------------------------------

### Install v1.1.0 package

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/release-1.1.0.md

Install the refreshed v1.1.0 package.

```console
npm install @microsoft/{spfx-package-name}@1.1.0 --save --save-exact
```

--------------------------------

### Implement Welcome Card View

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/viva/bot-powered/AuthN-and-AuthZ-in-Bot-Powered-ACEs-Entra.md

Define the welcome Card View in the bot's constructor. This view displays a welcome message with the user's display name and UPN. A sign-out button is included for demonstration purposes but should typically be omitted in production for SSO scenarios.

```C#
// Prepare ACE data for all Card Views
var aceData = new AceData()
{
    Title = "Welcome!",
    CardSize = AceData.AceCardSize.Large,
    DataVersion = "1.0",
    Id = adaptiveCardExtensionId
};

// Home Card View (Primary Text Card View)
CardViewResponse homeCardViewResponse = new CardViewResponse();
homeCardViewResponse.AceData = aceData;
homeCardViewResponse.CardViewParameters = CardViewParameters.PrimaryTextCardViewParameters(
    new CardBarComponent()
    {
        Id = "HomeCardView",
    },
    new CardTextComponent()
    {
        Text = "Welcome <displayName>!"
    },
    new CardTextComponent()
    {
        Text = "Your UPN is: <upn>"
    },
    new List<BaseCardComponent>()
    {
        new CardButtonComponent()
        {
            Id = "SignOut",
            Title = "Sign out",
            Action = new SubmitAction()
        }

    });
homeCardViewResponse.ViewId = HomeCardView_ID;

cardViews.TryAdd(homeCardViewResponse.ViewId, homeCardViewResponse);
```

--------------------------------

### Install Moment.js Package

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx.md

Install the Moment.js package to access its type definitions, even if loading Moment.js from a URL. Use `--save-exact` to pin the version.

```bash
npm install moment@2.27.0 --save-exact
```

--------------------------------

### Install Image Helper API

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/image-helper-api.md

Install the Image Helper API package into your project using npm.

```console
npm install @microsoft/sp-image-helper
```

--------------------------------

### Example usage of BaseComponentsCardView

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/release-1.18.0.md

Example usage of the BaseComponentsCardView class.

```typescript
export class CardView extends BaseComponentsCardView<
  IHelloWorldAdaptiveCardExtensionProps,
  IHelloWorldAdaptiveCardExtensionState,
  ComponentsCardViewParameters
  > {
  public get cardViewParameters(): ComponentsCardViewParameters {

    return BasicCardView({
      cardBar: {
        componentName: 'cardBar',
        title: this.properties.title,
        icon: {
          url: this.properties.iconProperty
        }
      },
      header: {
        componentName: 'text',
        text: 'Hello world!'
      },
      footer: {
        componentName: 'cardButton',
        title: 'Quick View',
        action: {
          type: 'QuickView',
          parameters: {
            view: QUICK_VIEW_REGISTRY_ID,
          },
        },
      },
    });
  }
}
```

--------------------------------

### Navigate to SPFx project directory

Source: https://github.com/sharepoint/sp-dev-docs/blob/main/docs/spfx/build-for-teams-meeting-app.md

Change into the newly created project directory.

```console
cd teams-meeting-app
```