RAVICHANDRAN BLOG

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.