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 rename your tenancy hostname of SharePoint Online (sharepoint.com)

-
Problem I need to correct the hostname of SharePoint Online to match my hostname Solution 1. Navigate to https://aka.ms/SPORenameAddDomain 2. Add new domain name, for example YourNewHostName .onmicrosoft.com 3. Run SharePoint Online Management Shell and use the following commands: Connect-SPOService https:// YourCurrentHostName -admin.sharepoint.com Start-SPOTenantRename -DomainName YourNewHostName -ScheduledDateTime "2022-12-16T11:30:00" Note: the scheduled time must be at least 24 hours in the future. The time is your current computer time.
Read more

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