Building your first SPFx web part

The web part will e created by the command line, we can run the command rom VS code terminal or from command line prompt. I’ll use VS code in my examples.

Steps:

  • Create the physical folder that you need to create the SPFx web part.
  • Open VS code and open terminal then navigate to the created folder.
  • Run the Yeoman SharePoint Generator:

yo @microsoft/sharepoint

  • Answer the prompts to configure your project. For example:
    • What is your solution name?: HelloWorld
    • Which baseline packages do you want to target for your component(s)?: SharePoint Online only (latest)
    • Where do you want to place the files?: Use the current folder
    • Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?: No
    • Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant?: No
    • Which type of client-side component to create?: WebPart
    • What is your Web part name?: HelloWorld
    • Which template would you like to use?: No framework

Then the generation process will start and you will receive a confirmation message

Let’s discover the web part to see where to write the coding and the styles.

Key files in SPFx:

Web part Class

    • Includes UI plus web part code
    • Yeoman –> creates this class and it’s the entry point for the web-part “./src/webparts/webpart name”
    • Note: all client side web-parts must inherit “baseClientSideWebPart“

    Web-part manifest:

      Web-part info and it’s in JSON format.json

      CSS modules

        • Define CSS in SAAS file and the file name starts with _cssile.scss extension the file naming follows camel casing
        • To link CSS in the web-part import style from ‘./name.scss‘
        • Notes:
          •  kebab –> X-Y using dash in the name
          • SAAS –> Syntactically Awesome Stylesheets:
            • This syntax extends CSS syntax and it’s used to form the layout of the pages.
          • SPFx –> build pipelines to generate JS & Type scripts definitions for all the classes that map to the generated class names.

        Config.json”./config/config.json”

          It includes 3 things:

          JS bundles

          bundles:{

          Control name of the created bundle name

          }

          external dependencies

          External:{

          External libraries e.g. jQuery. It’s not part of the bundle and you just add reference to its location CDN –> content delivery network

          }

          localized resources

          Localized resources:{

          Key:value {variale???}

          }

          Let’s see how the build process works.

          Resources:

          Overview of the SharePoint Framework (SPFx) | Microsoft Learn