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.
[…] SharePoint Framework version 1.8, if you have any question for you then you can refer my one of the previous article where I explained simple steps to set up a new development environment and create the new project. […]
LikeLike
[…] While you run the application in workbench you will below warning message, click “Load debug scrips” for run our scrips. if you want to install this add-in permanently in the SharePoint check my previous article for deploy in SharePoint […]
LikeLike
[…] environment then you can refer my one of the previous article where I explained simple steps to set up a new development environment and create the new project. While creating a project in the PowerShell you must select react […]
LikeLike
[…] environment then you can refer my one of the previous article where I explained simple steps to set up a new development environment and create the new project. please refer below image for select input while creating […]
LikeLike
[…] environment then you can refer my one of the previous article where I explained simple steps to set up a new development environment and create the new project. While creating a project in the PowerShell you must select react […]
LikeLike