SPFX Gulp Serve for a wepart is not opening workbench

Question

I'm trying to add a webpart through SPFX here but when i write Gulp Serve it's not loading the workbench.aspx. Instead, it's trying to load a contoso.sharepoint page and the page is not opening. Any help is appreciated

Answer 1

This is happening because your SPFx solution has an extension added to it.

Whenever you add SPFx extension to the solution, after running the yeoman generator, it will modify the config > serve.json file.

If you take a look at the serve.json file, you will find that it has a serveConfigurations section with pageUrl property whose value is by default set to https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx.

If you notice the section, it will have multiple configs defined, like default and extension-name etc. So, you when you do a gulp serve, it will pick up the value of pageUrl in default configuration.

You should modify this value to that of your workbench page as below:

{
  "$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/"
  },
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://tenantname.sharepoint.com/sites/mySite/_layouts/15/workbench.aspx",
      "customActions": {
        "085fcc3a-8028-4339-8b1d-6b385004559f": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test message"
          }
        }
      }
    },
    //code omitted for brevity
  }
}

Stop the gulp serve task and then start it again.

It will now open your tenant's workbench page. After that, you can test out your webparts in the SharePoint's workbench page.

Necessary reading - Utilizing SPFx serve configuration