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

• SPFx Documentation: SharePoint Framework Documentation
• PnpJS: PnpJS Documentation
• Office 365 CLI: Office 365 CLI