Build your first SPFx client-side Hello World web part

In the series of SPFx tutorials, we are going to learn how we can create our first SPFx webpart step by step.

  1. Create a new web part project

    • Create a folder in your local machine either using file explorer or command prompt.
    • In my case, I have created a folder named helloworld-webpart in my C drive
    • To create a folder using command promt, run below command
      md helloworld-webpart
    • Once the folder is created, navigate to the folder by using below command
      cd helloworld-webpart
  2. Run Yeoman SharePoint Generator

    • Yeoman SharePoint generator used to scafold your SPFx webpart. Scafolding means, generating a folder structure that contains necessaory files and folders to start with SPFx webpart.
    • Create a new HelloWorld web part by running the Yeoman SharePoint Generator
      yo @microsoft/sharepoint
      
      
    • You will be promted to enter some information related to your webpart as below
      a) What is your solution name? Hit enter to keep the default name which is hellowworld-webpart
      b) Which platform you need to use? Select SharePoint Online and hit enter
      c) Use the current folder
      d) Select N to allow the solution to be deployed to all sites immediately.
      e) Select N on the question if solution contains unique permissions
      f) Select Webpart component
      g) Enter webpart name? Hit enter to keep the default
      h) Enter description: hit enter to keep the default
      i) Select framework: we will go with widely used framework which is React 
    • Once the scaffolding is done, you will see a message as below 
  3. Install the developer certificate

    • Developer certificate has to be installed ONLY once in your development environment, so you can skip this step if you have already executed that in your environment.
    • To install the developer certificate use below command
      gulp trust-dev-cert
  4. Preview your web part

    • You can preview your webpart using below command
      gulp serve
    • When we run this command, it will create a local, node-based HTTPS server on your machine.
    • Local workbench will open in your default browser and you can see a dummy SharePoint modern page where you can add a web part
    • Click on add button and select the hello world webpart
  5. Preview web part in SharePoint context

    • To preview the hello world web part, open the below link in your browser
      https://yoursharepointsite.sharepoint.com/sites/testsite/_layouts/15/workbench.aspx 

Post a Comment

0 Comments