Friday, May 24, 2024

basic cheat sheet for SharePoint Framework (SPFx) development, covering essential commands and steps for setting up, developing, and managing SPFx projects

Here's a basic cheat sheet for SharePoint Framework (SPFx) development, covering essential commands and steps for setting up, developing, and managing SPFx projects:

Prerequisites

  1. Node.js (LTS version recommended)
  2. Yeoman and Gulp:
    bash
    npm install -g yo gulp
  3. Yeoman SharePoint Generator:
    bash
    npm install -g @microsoft/generator-sharepoint

Setting Up a New SPFx Project

  1. Create a new directory and navigate into it:
    bash
    mkdir my-spfx-webpart cd my-spfx-webpart
  2. Generate a new SPFx solution:
    bash
    yo @microsoft/sharepoint
    Follow the prompts to configure your project:
    • SharePoint Online only (latest)
    • WebPart (or Extension)
    • JavaScript framework (React, No framework, etc.)

Development Commands

  1. Serve the project locally:

    bash
    gulp serve

    This opens a local workbench in your browser where you can test your web parts.

  2. Build the project:

    bash
    gulp build

    Compiles the project and prepares it for packaging or deployment.

  3. Bundle the project:

    bash
    gulp bundle --ship

    Creates a production-ready bundle of your project.

  4. Package the solution:

    bash
    gulp package-solution --ship

    Generates the .sppkg file in the sharepoint/solution directory, which can be uploaded to the App Catalog in SharePoint.

Additional Useful Commands

  1. Clean the build directory:

    bash
    gulp clean

    Removes old build files.

  2. Trust Dev Cert (needed for local HTTPS):

    bash
    gulp trust-dev-cert
  3. Untrust Dev Cert:

    bash
    gulp untrust-dev-cert
  4. Upgrade SPFx project (using the Office 365 CLI):

    bash
    npm install -g @pnp/cli-microsoft365 m365 spfx project upgrade --output md > upgrade-report.md

File Structure Overview

  • src: Contains all source code for your web parts or extensions.
    • webparts: Contains web part specific files.
    • extensions: Contains extension specific files.
  • config: Contains configuration files for the build process.
  • sharepoint: Contains assets and deployment-related files.
    • assets: Contains static assets for the project.
    • solution: Contains the packaged solution file.

Useful Links

1 comment: