Setting up your first SharePoint On-Premises -SPFX client side web part to a SharePoint library

Setting up and Environment First

Enable auto provision for Microsoft SharePoint Foundation Subscription Settings Service

1. $appPool = Get-SPServiceApplicationPool "ServiceApps"

$serviceApp = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $appPool -name "App Management Service Application" -DatabaseName "Dev1_Subscription"

$serviceAppProxy = New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $serviceApp

1. $appPool = Get-SPServiceApplicationPool "ServiceApps"

$serviceApp = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $appPool -name "Subscription Settings Service Application" -DatabaseName "Dev1_Subscription"

$serviceAppProxy = New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $serviceApp

1. Manage Web Applications -> Manage Features -> Activate Apps that require accessible internet facing endpoints
2. Central Admin -> Apps -> Manage App Catalog – Set up site

1. Central Admin -> Apps -> URLs (change if needed)

URL: https://mc-google.blogspot.com(your sharepoint on-premises server)/sites/appcatalog/_layouts/15/start.aspx

Issues:

You may be trying to access this site from a secured browser on the server. Please enable scripts and reload this page.

Resolution: Internet options -> Security -> add to trusted sites

Build your First Hello World SPFX webpart

Step 1: Create Webpart

     Setting up NPM environment for SPFX

• npm install -g npm
• npm install -g yo
• npm install -g gulp
• npm install -g @microsoft/generator-sharepoint

      After install preliminary tools you can follow the below steps. 

• Create a new Webpart, I named here “spfx-firstwebpart”
• md spfx-firstwebpart
• cd spfx-firstwebpart
• Create new Webpart yo @microsoft/sharepoint

It will create a new Webpart refer below screenshot

Build the Webpart gulp serve

Step 2: Create SharePoint Library

• Create a SharePoint Library “Myspfxwebparts” and give read permission to all users.

Step 3: Open code Visual Studio Code

• Open the code in Visual code tool.
• Type in cmd : code .

Step 4: Update the CDN Path

• We need to configure the CDN path, i.e SharePoint Library what we created. https://mc-google.blogspot.com/sites/appcatalog/Myspfxwebparts
• we have to configure our CDN path in write-manifests.json file. This file can be found in the config folder.
• i.e

{
  “cdnBasePath”: “https://mc-google.blogspot.com/sites/appcatalog/Myspfxwebparts”
}

• Save the file.
• Switch to cmd prompt

Step 5: Package and Deploy the webpart

• Generate the files to deploy in the SharePoint Library
• gulp trust-dev-cert
• gulp bundle –ship
• Generated files can be found in spfx-firstwebpart\temp\deploy folder
• upload the files in the SharePoint Library
  • https://mc-google.blogspot.com/sites/appcatalog/Myspfxwebparts
• Create a .spapp file for this webpart to upload in App Catalog
  • gulp package-solution –ship
  • Generated spapp file can be found in spfx-firstwebpart\sharepoint folder
  • upload the spapp file in App catalog
  • SharePoint will show you a popup and ask you to trust the client-side solution to deploy.
  • Click Deploy

Step 6: Install the App

• Open your SharePoint Site
• Go to “Add an App”
• Click “From Your Organization”
• Select and Click you app to install it.

Syep 7: Add the Webpart in your Page

• After App installation
• Go to your Page
• Edit the Page
• Click Insert tab and click Webpart
• Select Custom folder –> you can see your webpart, refer below screenshot

• Now you can add your webpart
  • Select the your webpart and Click Add
  • It will add your webpart