SPFxWP.md

Welcome additions to a vanilla SPFx Components

• To scaffold using yo @microsoft/sharepoint, use the following command (then npm i) to ensure structure is correct before installing dependencies yo @microsoft/sharepoint --solution-name "VanillaSolution" --framework "react" --component-type "webpart" --component-name "VanillaWebPart1" --skip-install

• The solution name is for the parent folder and the component name is for the WebPart component. This ensures the baseWebPart is VanillaWebPart1WebPart.ts, the WebPart under components is VanillaWebPart1.tsx and the package name is vanilla-for-node.sppkg in the package-solution.json

• Use the following command (removing --solution-name "VanillaSolution") when adding a second WebPart to an existing solution. Make sure you're inside the solution folder. yo @microsoft/sharepoint --framework "react" --component-type "webpart" --component-name "VanillaWebPart2" --skip-install

For more details, run yo @microsoft/sharepoint --help as per yo options on MS Docs

1. version-sync
2. spfx-fast-serve
3. Update baseWP to include all props by default
4. Support theme variant (section backgrounds) - WebParts only

• Align package title in config\package-solution.json which is shown in AppStore with the webpart title in VanillaWebPart.manifest.json

• Install PnP Property controls and add Property Editor and amend baseWebPart VanillaWebPart.ts with another group as below to edit all properties and show WebPart version

  {
     groupName: 'v' + this.context.manifest.version,
     groupFields: [
        PropertyPanePropertyEditor({
        webpart: this,
        key: 'propertyEditor',
        }),
     ],
  },
  

• Use single props class for both baseWebPart VanillaWebPart.ts and WebPart Vanilla.tsx

• Update spfx-fast-serve config under fast-serve/webpack.extend.js

  const webpackConfig = {
     devServer: {
     // open: 'chrome',
     open: false,
     openPage: "https://<tenant-name>.sharepoint.com/_layouts/15/workbench.aspx"
     }
  }
  

• Update icon (officeFabricIconFontName) under VanillaWebPart.manifest.json - use OUI Fabric Icons site to browse for the right icon

Useful additions - as needed

1. PnP controls
   1. WebPart Title
   2. Placeholder
   3. Paging
2. PnP Property controls
   1. Collection Data
   2. Property Editor
3. Fluent UI Controls
   1. Spinner
   2. Details List