Quick tip: easily test SharePoint Framework web parts on modern pages (addendum to Waldek’s post)

Did you know that you can easily test your SharePoint Framework web parts on modern pages?

If there’s one guy who know, it’s my friend Waldek Mastykarz. Today he had a post outlining how you can debug/test SPFx web parts on a real modern page, not the SharePoint workbench.

The principal is the same as for extensions loading a local manifest file into the page.

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

Instead of adding the above to the URL you can modify config/serve.json instead similar to the default serve.json for extensions.

By changing the default serve.json from

{
  "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://localhost:5432/workbench",
  "api": {
    "port": 5432,
    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
  }
}

to something along the lines of the config below you are all set.

{
    "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
    "port": 4321,
    "https": true,
    "serveConfigurations": {
        "default": {
            "pageUrl": "https://localhost:5432/workbench"
        },
        "sppage": {
            "pageUrl": "https://tenant.sharepoint.com/sites/mysite/SitePages/Home.aspx"
        }
    },
    "api": {
        "port": 5432,
        "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
    }
}

The above configuration adds a serve config named sppage, which you instantiate with:

gulp serve --config=sppage

If you want the SharePoint page to act as the default, switch the content of default and sppage. You may add as many config sections as you want to test on multiple pages.