How to setup SharePoint Online Development Environment (Part 1)

-

Problem

I need to develop SPFx web-part for SharePoint Online which require new development environment to be setup on my Windows 10 workstation. 

Solution

Refer to the steps on https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment or use the following summarised steps:

  1. Download and install the required (refer to the above link) version of NodeJS installer (i.e. on 24 Feb 2023 it was node-v16.19.1-x64 for Windows 64 bit) which can be downloaded from https://nodejs.org/dist/latest-v16.x 
     
  2. Run Windows PowerShell or Command prompt and execute the following command to install all prerequisites
     
    npm install gulp-cli yo @microsoft/generator-sharepoint --global

    and command to allow execution policy (for more info, read Set-ExecutionPolicy documentation):

    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

    Tips: use the following command to check latest version of generator-sharepoint and generator-sharepoint@next

    npm view @microsoft/generator-sharepoint

  3. Download and install Visual Studio Code from https://code.visualstudio.com
       
  4. Type the following commands to create project folder (i.e. helloworld-webpart), populate project items, then preview the webpart on internet browser via https
     
    md helloworld-webpart
     
    cd helloworld-webpart
     
    yo @microsoft/sharepoint

    command to allow https to run on localhost
    gulp trust-dev-cert 

    gulp serve
     
  5. To edit the code using Visual Studio Code, navigate to the solution folder type the following command
     
    code .
     
  6. If you have a SharePoint Online site, you can go to 
     
    https://YourTenancyPrefix.sharepoint.com/_layouts/workbench.aspx
     
    or
     
    https://YourTenancyPrefix.sharepoint.com/sites/YourDevSite/_layouts/workbench.aspx
     
    to test the locally developed web-part on SharePoint server and you'd be able to run in SharePoint context to interact with SharePoint data.

    SharePoint Online Workbench Previewing Locally Developer SPFx web-part

Comments

Post a Comment

Popular posts from this blog

How to search Active Directory group members using Windows 10 built-in tools

-
Image
Problem I need to check Active Directory group members but have limited access to install any software on a remote Windows machine running on Windows Virtual Desktop infrastucture. Solution To search for the group name, open  File Explorer | Network | Network | Search Active Directory and if you cannot see the members on the result column, you can run cmd.exe and use the following command to see the members of the Active Directory group: net group THE_AD_GROUP_NAME /domain
Read more

How to check and reload PAC (Proxy Auto Configuration) file on Windows

-
Problem I need to check PAC file content being used by Chrome and Internet Explorer on my Windows PC however company administrator has locked down the proxy settings on browser and Windows 10. Solution Run the following command via CMD.EXE on Windows reg query "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings" /f AutoConfigUrl To force Chrome to reload PAC file, use the following URL and click Clear bad proxies followed by Re-apply settings chrome://net-internals/proxyservice.config#proxy For Internet Explorer, you may need to reboot Windows for the PAC file to reload via Active-Directory Group-Policy.
Read more