3

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 isenter image description here not opening. Any help is appreciated

6

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.