Sp-dev-docs: Is it possible to serve multiple local workbenches?

[jacksonv1lle]

Category

• [x] Question
• [ ] Typo
• [ ] Additional article idea

Question

I need to run two instances of gulp serve on my development environment. I have an SPFx component library which is linked to another SPFx project both of which need to be served.

With version 1.8 I was able to simply change the ports in the serve.json file and I could run both SPFx projects without problems.
I have since upgraded to 1.9.1 and now my serve.json configuration does not show the workbench in the browser. Just a blank page.
I have also tried with 1.10.0 and no luck.

Environment details

• OS: Linux Mint
• Framework: Node.js v10
• Browser(s): [Chrome
• Tooling: VS Code, SPFx v1.9.1, SPFx v1.10.0

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

I can't repro this... I just created a new SPFx v1.10 project, accepting all the defaults, changed the ports on both the port, initialPage & port.api properties in serve.json and the workbench loaded just fine... can you provide a repro?

[jacksonv1lle]

I am still not able to get it working. I created a new SPFx v1.10 (webpart with React).
I changed my serve.json to the following:

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

When I run gulp serve the browser opens with the workbench but I cannot add my webpart. There is a console error:

GET https://localhost:4321/node_modules/@microsoft/sp-property-pane/dist/sp-property-pane_en-us.js net::ERR_CONNECTION_REFUSED
sp-webpart-workbench-assembly_default.js:45649 HEAD https://localhost:4321/node_modules/@microsoft/sp-property-pane/dist/sp-property-pane_en-us.js net::ERR_CONNECTION_REFUSED
[1580302974841][ResourceUrlChecker] EventName:TypeError: Failed to fetch, ResultCode: undefined
[1580302974841][ResourceUrlChecker] TypeError: Failed to fetch

Editted by @andrewconnell to make the code & error report readable... when pasting a block of code, please use code fencing, not incline code, syntax. see more here: How to create a good issue

[mbice]

Seeing a similar issue here.. We are serving multiple projects simultaneously during development on different ports. This always worked fine in 1.8.2. Upon upgrading to 1.10.0 all of the localhost node_modules references always go to port 4321, regardless of which port I specify in the debugManifestsFile querystring parameter.

[mbice]

Hi,

Any update on this one?

Thanks

[sudharsank]

Hi @mbice
I tried with the custom ports on version 1.10.0, after you changed the port, if you ran gulp serve, the below files were not updated

workbench.html from temp folder

Once you ran gulp clean, gulp build and gulp serve, the above file is updated with the latest custom port

But the main issue is on the manifests.js in the temp folder, all the configurations are mapped to port 4321, I just tried to changed the port for SPPropertyPane it worked and it suddenly updated to port 4321 again.

I think there is some restrictions on using the custom ports in the latest version.

[sudharsank]

Hi @jacksonv1lle any update on this?

[andrewconnell]

I've got a little more insight, but not what I suspect you're looking for. Running two instances is not an intended or supported scenario... I can now dupe this in v1.10... it does appear something is hard coded or the routing is screwed up along the way.

Engineering is aware of this, but I don't think it's something that's going to get addressed...

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues