Deploy SharePoint framework webpart to SharePoint site

In the previous blog we saw how to create a webpart using SharePoint framework. Now we can see here how to deploy framework webpart in a SharePoint site

The local workbench can be used to develop and test the visual components of a webpart only you cannot connect to SharePoint lists or libraries. After the webpart visuals are tested we need to deploy to SharePoint site, lets see how to it.

This sample to be simple I will use the default webpart created by SPFx no extra code added/modified.

For this let me open the “helloworld-webpart” which I used in the previous blog

Gulp will load the spfx assets, loads the webpart project and opens the local work bench

If you need to test connecting SharePoint site resources then we can use SP Online workbench available here https://your-sharepoint-site-url/_layouts/workbench.aspx and for me its https://ctssharepoint.sharepoint.com/_layouts/15/workbench.aspx this will let you a pop saying “gulp serve” should be running behind, so make sure its on in your command prompt and then click “OK”.

Search your helloworld webpart and insert it in this workbench, it will load as below

Till now all good your webpart works in local and SPO workbench accessing the webpart related files from local. We have not moved the webpart to the target SharePoint site.

Now let’s deploy the same webpart to my SharePoint online site, for this we need to package the solution

Note: Please use –ship, will explain later below about its importance

Your solution package file is ready inside the project solution directory

Now we have the webpart ready for deployment but we need a app catalog site available to host these framework webpart so make sure you have one if not create a new app catalog site collection

Deployment is very simple manually upload/drag and drop into the app catalog site, trust it and then the webpart in the target SharePoint site

Go to “App Catalog” site collection “App for SharePoint” and Upload/drag and drop this “.sppkg” file into and click “Deploy”

Always keep an eye on “App Package Error message” column has any errors in it, if you have any you need to fix it and go for a redeploy

Go to the preferred SharePoint site and “Add apps” as usually we do to add apps and search for “hello” you will find it

Click that it will install the webpart in this site, moves to contents page and shows the status of installation. Before moving to next step make sure its highlighted as below because while installation this would be in a slight non-highlighted mode only after completion it will be fully visible as below

Now we need to insert this new webpart in a page in our modern web site, so for that go back to your command and execute the below

Finally, my webpart inside SharePoint page. Wow!!!

Issues I faced while deploying SPFx webpart in SharePoint site, let me share them here could save time for others

First is did not do “gulp bundle” as it was not mentioned in Microsoft tutorial, I directly jumped to create “gulp package-solution” and uploaded into app catalog site and then into my target SharePoint site

You could see the above RED mark, even we have deployed the solution package in SP Online it still connects the local host. If you didn’t notice that and continue with deploy and adding in the SharePoint page you will get the below error message

[SPLoaderError.loadComponentError]:
***Failed to load component “1cd0dd00-e476-4faa-a79c-01a5ee53065c” (HelloWorldWebPart).
Original error: ***Failed to load URL ‘https://localhost:4321/lib/webparts/helloWorld/loc/en-us.js’ for resource ‘HelloWorldWebPartStrings’ in component ‘1cd0dd00-e476-4faa-a79c-01a5ee53065c’ (HelloWorldWebPart). There was a network problem.
Make sure that you are running ‘gulp serve’ and you have run ‘gulp trust-dev-cert’.

***INNERERROR:
***Failed to load URL ‘https://localhost:4321/lib/webparts/helloWorld/loc/en-us.js’ for resource ‘HelloWorldWebPartStrings’ in component ‘1cd0dd00-e476-4faa-a79c-01a5ee53065c’ (HelloWorldWebPart). There was a network problem.
Make sure that you are running ‘gulp serve’ and you have run ‘gulp trust-dev-cert’.
***CALLSTACK:
Error
at t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:889:15897)
at t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:1512:21117)
at e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:1512:16208)
at e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:1512:12233)
at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:1512:60375)

Luckily below commands helped me to successfully complete inserting webpart in SharePoint page

Thanks for reading this blog