How to deploy github spfx sharepoint web part from scratch.

R DaL

I a sharepoint admin but total newbie when it comes to programing and or SPFX. I want to deploy this https://github.com/SharePoint/sp-dev-solutions/tree/master/solutions/ModernSearch/react-search-refiners to my sharepoint online tentant. I cannot figure out how to do this from scratch. Any help would be greatly appreacited.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Md Tahmidul Abedin7y ago
Hi,

To ge a detail overview on SPFx webpart deployment, the following article will be helpful:
https://www.c-sharpcorner.com/article/deploy-sharepoint-framework-client-side-web-parts-to-office-365-cdn/

Hope it will help.
Siddharth Vaghasia7y ago
If you are new to programming I would suggest first read about spfx and try couple of other use case to get used to deployment process. Below is what high level you need to do.

Setup development enviorment

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

Create a hello world webpart to make sure your enviorment is configured correctly

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Clone above Repo mentioned in your question.

first step is to install all modules using comman 'npm i'

use 'gulp serve' to check if above webpart is working fine in workbench

use below commands

gulp build --ship

gulp bundle --ship

gulp package-solution --ship

This will create sppkg file in /sharepoint/solutions folder

Deploy app to tenant app catalog

Go to site collection and install App using 'Add an app option'

Test the webpart.