How to setup SharePoint Online Development Environment (Part 2)

-

Following Part 1 article on setting up development workstation on Windows, this Part 2 article is for setting up the App Catalog and a Dev site on SharePoint Online, package the webpart, and install the webpart onto the site and page as follows:

  1. If you have not setup App Catalog, use the following steps to create an App Catalog site:
     
    • Navigate to https://YourTenantPrefix-admin.sharepoint.com/_layouts/15/online/ManageAppCatalog.aspx
        Create App Catalog - Step 1  
      then select OK
       
    • Complete the followings as per your preference then select OK
         
      Create App Catalog - Step 2
       
  2. Create a development site collection:
     
    • Navigate to https://YourTenantPrefix-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/siteManagement/view/ALL%20SITES
       
      Create Development Site - Step 1
       then select +Create
       
    • Select Communication site
       
      Create Development Site - Step 2
       
    • Select Blank and complete the followings then select Finish
       
      Create Development Site - Step 3
       
  3. Package solution for deployment to App Catalog site:
     
    • Type the following command on Visual Studio Code terminal to execute release build
       
      gulp bundle --ship
       
    • Followed by the following command to package helloworld-webpart.sppkg on sharepoint/solution folder
       
      gulp package-solution --ship
       
  4. Upload (or drag and drop) the helloworld-webpart.sppkg file to the App Catalog site and ensure there's No errors.
     

    SPOnlineDeployingWebPartPackageToAppCatalog
     
  5. Navigate to https://YourTenancyPrefix.sharepoint.com/sites/YourDevSite/_layouts/15/addanapp.aspx (i.e. DevSite1 created on step 2), search for hello then select the helloworld-webpart
     

    SPOnlineAddWebPartToSite
     
  6. Navigate to site page (i.e. Home.aspx) and add the HelloWorld webpart to the page
     

    SPOnlineAddWebPartToPage

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