Is it possible to create a modern SPFx web part as a control in Page Layout (Template)?

There are many question whether it is possible to create a modern SPFx web part as a control in Page Layout (Template).

Yes, there is a workaround which is far from ideal but works:

·                         Export your SPFx webpart from the browser (.webpart file).

·                         Upload the .webpart file to the webpart gallery.

·                         Open SharePoint designer

·                         Navigate to page layouts folder from your SharePoint designer

·                         Right click on your page layouts

·                         Open the page layouts (ie: .aspx) as preview in browser

·                         Manually edit the aspx file in browser by clicking on edit button or by navigating using the URL “?ToolPaneView=2&pagemode=edit”

·                         Add the required SPFx webpart from the “Add Webpart” section.

·                         Save the aspx and when you create a page using the page layout, your SPFx webpart should be there.

Note: Please ignore the error while saving the .aspx page from browser. Just refresh your page then webpart will get added automatically.

Here you go!

Your page layout is ready with SPFx webpart. 

SPFx Web part: Common Errors & Solutions while executing gulp serve

You might have challenges while executing the gulp serve command. The common errors and solutions are provided in this article

Error 1: Gulp is not recognized

Solution:

Please execute the below commands in your Node.js command prompt window to resolve the issue

u  npm install -g gulp

u  npm install --save-dev gulp

Error 2: Missing Node-SASS

Error - [sass] Error: Missing binding C:\XXX\YYYY/Documents\SPFx\Projects\documentcardexample-webpart\node_modules\node-sass\vendor\win32-x64-46\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 4.x

Found bindings for the following environments:

•          Windows 32-bit with Node.js 4.x

Solution:

u  This usually happens because your environment has changed since running npm install.

u  Run npm rebuild node-sass to build the binding for your current environment.

Error 3: Cannot find Node Module

Cannot find module <Module_name>

Solution:

npm install <module_name> –save

Eg:

u  Npm install moment-timezone –save

u  Npm install @types/moment –save

u  Npm install @types/moment-timezone –save

Error 4: Cannot find module jquery

Solution:

 Try using npm to install the typings

u  npm install jquery –save

Error 5: Cannot find module react-slick/dist/react-slick

Solution:

Try using npm to install the typings

u  npm install react-slick