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 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