Microsoft provided extremely detail documentation for setup an environment for SharePoint Framework development, but if you already work in SharePoint then below simple steps pretty enough to set up a development environment and create your first web part using SharePoint framework.
Set up your development environment.
Step 1 (Create Developer Site):
Using below link to sign up for Office 365 Enterprise E3 Trial,
For create new create a new app catalog site, go to the SharePoint Admin Centre (https://<tenant>–admin.sharepoint.com) → Apps → App catalog
Create a site collection using the Developer Site template
Step 2 (Install node JS and Visual Studio code):
https://nodejs.org/dist/latest-v10.x/
https://code.visualstudio.com/Download
Step 3 (install node modules):
Run PowerShell as Administrator
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned npm install gulp yo @microsoft/generator-sharepoint --global npm install -g windows-build-tools npm install -g @microsoft/sp-build-web
To create a new web part project
md c:\spfx\helloworld-webpart cd c:\spfx\helloworld-webpart yo @microsoft/sharepoint gulp trust-dev-cert gulp serve
now you can access your web part in localhost and in the SharePoint /_layouts/workbench.aspx
but still, files are referred from the local host
Enable SharePoint CDN
run below comment in PowerShell to make ready for SharePoint CDN deployment, below PowerShell comments required to run only once for a SharePoint portal.
Connect-SPOService -Url https://<tenant>-admin.sharepoint.com Set-SPOTenantCdnEnabled -CdnType Public
Deploy into SharePoint
below PowerShell comments will create a SharePoint package file, file extension will be .sppkg
gulp bundle --ship gulp package-solution --ship
under SharePoint/solution folder can find the .sppkg extension file, upload that file into the SharePoint’s app catalog and deploy it. Now web part ready to use by everyone.
Please let me know if you struck anywhere, I can help you.
5 thoughts on “Simple steps to create a new web part using the SharePoint framework”