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

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.

• SharePoint Online