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:
Using below link to sign up for Office 365 Enterprise E3 Trial
http://go.microsoft.com/fwlink/p/?LinkID=403802
Step 2:
For create new create a new app catalog site, go to the SharePoint Admin Centre (https://–admin.sharepoint.com) → Apps → App catalog
Step 3:
Create a site collection using the Developer Site template
Step 4:
Install node JS and Visual Studio code using below like
https://nodejs.org/dist/latest-v8.x/
https://code.visualstudio.com/Download
Step 5:
In the file explorer goto, any folder where you want to create a new project then click shift + right button in the mouse, in the menu select “Open PowerShell window here”
Step 6:
Enter the following command in PowerShell to install Yeoman, gulp, SharePoint web part generator and SSL certificate
npm install -g yo gulp npm install -g @microsoft/generator-sharepoint gulp trust-dev-cert
To create a new web part project
md helloworld-webpart cd 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://-admin.sharepoint.com Get-SPOTenantCdnEnabled -CdnType Public Get-SPOTenantCdnOrigins -CdnType Public Get-SPOTenantCdnPolicies -CdnType Public Set-SPOTenantCdnEnabled -CdnType Public Get-SPOTenantCdnOrigins -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.
One thought on “Simple steps to create a new web part using the SharePoint framework”