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 migrate SharePoint Online SPWeb with custom SPList form (PowerApps) and Flows

-
Image
Problem I need to migrate a SPWeb with custom SPList form (PowerApps) within the same SPSite collection. Solution Run the following PnP PowerShell command from Windows PowerShell ISE $TemplateFilePath = "C:\temp\ PnPSiteTemplate_ YourSourceFormSubsiteName .xml " $SourceSiteConnection = Connect-PnPOnline https:// YourTenancy .sharepoint.com/sites/ SharePointForms/PROD/YourSourceFormSubsiteName -Interactive Get-PnPSiteTemplate -Connection $SourceSiteConnection -PersistBrandingFiles -IncludeAllPages -Verbose -Out $TemplateFilePath $TargetSiteConnection = Connect-PnPOnline https:// YourTenancy .sharepoint.com/sites/ SharePointForms/PROD/YourTargetFormSubsiteName -Interactive Invoke-PnPSiteTemplate -Connection $TargetSiteConnection -Path $TemplateFilePath -ClearNavigation Disconnect-PnPOnline Ensure the target copied list is unmodified. Do not rename it or change it until the PowerApps are imported and republished to prevent Data Source confusion after import. Navigate to List s...
Read more

How to install OpenVPN server on Raspberry Pi

-
Image
Download Raspberry Pi Imager . Install Raspberry Pi OS Lite on 16GB microSD card. Remember to click the Setting icon to enter your Wifi SSID and password as well as enabling SSH and default username: pi and password: raspberry   Insert the microSD card onto the Raspberry Pi  and power it up via USB power supply. Get the IP address of the Raspberry Pi (via HDMI or wifi-router web-console) then configure port forwarding on the router WAN interface for  TCP 443  to the IP address of the Raspberry Pi. Download PuTTY and run it to connect to Raspbian via SSH ( Host Name: IP Address of the Raspberry Pi then click Open  and if prompted by Putty alert, click Yes ) then  login as: pi and password: raspberry . To change default password and timezone use the following command: sudo raspi-config Run  curl -L https://install.pivpn.io | bash  and follow the wizard to install OpenVPN server. When prompted: Protocol , select TCP  443 then Ok C...
Read more

How to restart VirtualBox VM to certain snapshot via Ubuntu Terminal

-
Problem I need to restart my VirtualBox headless Virtual Machine and restore it to certain snapshot on every restart. Solution 1. On Ubuntu terminal type the following commands to create a bash script as follows: cd /user/bin sudo nano vboxmanage-restartMyVM 2. On the nano editor type the followings: vboxmanage controlvm " YourVMName " poweroff vboxmanage snapshot " YourVMName " restore " YourVMSnapshotName " vboxmanage startvm " YourVMName " -type headless 3. Press Ctrl-S to save the file and Ctrl-X to exit the editor and return to Ubuntu terminal. 4. Type the following command to allow the script to be executable sudo chmod +x vboxmanage-restartMyVM 5. Finish. Now everytime I type  vboxmanage-restartMyVM  on the Ubuntu terminal my virtual machine will be powered-off if it's on, restored to my preferred snapshot, then started. Happy day😀
Read more