1

I'm trying to setup a local development environment for SharePoint Framework to develop web parts. I've followed the microsoft guides for setting up SPFx dev environment and build your first web part

I start my local web server with gulp serve and a temp folder is created containing manifests.js and manifests.json but no workbench.html. The server is up and running and i can browse files in the directory.

Also what I'm having a hard time understanding from the guides are how the hosted workbench and local workbench are working together. Is it a necessity to have a hosted workbench to run the local one?

Things I've tried

  1. Changed serve port from default
  2. Tried different LTS versions of node v14. (currently using 14.18.3)
  3. Added set NODE_NO_HTTP2=1

Contents of my package.json

{
  "name": "playground",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "1.13.1",
    "@microsoft/sp-property-pane": "1.13.1",
    "@microsoft/sp-webpart-base": "1.13.1",
    "@microsoft/sp-lodash-subset": "1.13.1",
    "@microsoft/sp-office-ui-fabric-core": "1.13.1"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.13.1",
    "@microsoft/sp-tslint-rules": "1.13.1",
    "@microsoft/sp-module-interfaces": "1.13.1",
    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
    "gulp": "~4.0.2",
    "ajv": "~5.2.2",
    "@types/webpack-env": "1.13.1"
  }
}

1
  • did you check below steps? Commented Jan 25, 2022 at 7:04

1 Answer 1

1

Local hosted workbench has been removed with new version of SPFx.

You can only run and test web part in SharePoint hosted workbench.

follow the below steps to configur.

  1. Locate and open the file ./config/serve.json in your project.
  2. Locate the property initialPage:
  3. Change the enter-your-SharePoint-site domain to the URL of your SharePoint tenant and site you want to use for testing. For example: https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx.

For more details refer the below Microsoft Docs

Update hosted work bench URL

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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