For a long time I have been developing and testing my SPFx web part on workbench.aspx
, which is a terrible option considering you only have limited screen space and you don’t get to see how your web part will look like once it is added to the page. Well, there is a way to test and debug your web part on Modern page.
First, lets create sppkg
package to deploy. For that, run the below commands.
gulp clean
gulp bundle
gulp package-solution
Note that I am not using the --ship
option while running the bundle
and package-solution
tasks. This will give you a warning – [package-solution] This is not a production build (--ship or --production), therefore the "includeClientSideAssets" setting will be ignored.
That’s what we want.
Second, deploy your generated sppkg
package to App Catalog and add web part to your page. When you load the page it will give error.
This is because our code was not added to sppkg
package as we did not use the --ship
option.
Third and final step, run gulp serve
command and view the page. You can now test and debug the web part on the page.