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
1 Answer
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
-
I am having the same issue, I have updated the serve file, and still cant open the benchmark page.– HarrisNov 26, 2021 at 6:20
gulp serve
is running, are you able to open the workbench page?