Sp-dev-docs: workbench is not loading after running gulp serve.

Created on 8 Aug 2018  路  5Comments  路  Source: SharePoint/sp-dev-docs

Category

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

Expected or Desired Behavior

Expecting to be presented with the local workbench to work with SharePoint Framework dev.

Observed Behavior

After setting up environment to start creating SharePoint Framework solutions I am unable to follow the step in the article https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Output from gulp serve -
Build target: DEBUG
[15:44:29] Using gulpfile C:\users\zachr\Documents\sharepoint\helloworld-webpart\gulpfile.js
[15:44:29] Starting gulp
[15:44:29] Starting 'serve'...
[15:44:29] Starting subtask 'configure-sp-build-rig'...
[15:44:29] Finished subtask 'configure-sp-build-rig' after 10 ms
[15:44:29] Starting subtask 'spfx-serve'...
[15:44:29] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: /
[15:44:29] Finished subtask 'spfx-serve' after 544 ms
[15:44:29] Starting subtask 'pre-copy'...
[15:44:29] Finished subtask 'pre-copy' after 19 ms
[15:44:29] Starting subtask 'copy-static-assets'...
[15:44:29] Starting subtask 'sass'...
[15:44:31] Server started https://localhost:4321
[15:44:31] LiveReload started on port 35729
[15:44:31] Running server
[15:44:31] Opening https://localhost:5432/workbench using the default OS app
[15:44:32] Finished subtask 'sass' after 2.35 s
[15:44:32] Starting subtask 'tslint'...
[15:44:34] Starting subtask 'typescript'...
[15:44:34] [typescript] TypeScript version: 2.4.2
[15:44:34] Finished subtask 'copy-static-assets' after 4.16 s
Warning: no-duplicate-case rule is deprecated. Replace your usage with the TSLint no-duplicate-switch-case rule.
Warning: valid-typeof rule is deprecated. Replace your usage with the TSLint typeof-compare rule.
[15:44:36] Finished subtask 'tslint' after 4.31 s
[15:44:52] Finished subtask 'typescript' after 18 s
[15:44:52] Starting subtask 'ts-npm-lint'...
[15:44:52] Finished subtask 'ts-npm-lint' after 14 ms
[15:44:52] Starting subtask 'api-extractor'...
[15:44:52] Finished subtask 'api-extractor' after 577 渭s
[15:44:52] Starting subtask 'post-copy'...
[15:44:52] Finished subtask 'post-copy' after 261 渭s
[15:44:52] Starting subtask 'collectLocalizedResources'...
[15:44:52] Finished subtask 'collectLocalizedResources' after 4.49 ms
[15:44:52] Starting subtask 'configure-webpack'...
[15:44:53] Finished subtask 'configure-webpack' after 1.38 s
[15:44:53] Starting subtask 'webpack'...
[15:44:55] Finished subtask 'webpack' after 1.38 s
[15:44:55] Starting subtask 'configure-webpack-external-bundling'...
[15:44:55] Finished subtask 'configure-webpack-external-bundling' after 1.22 ms
[15:44:55] Starting subtask 'copy-assets'...
[15:44:55] Finished subtask 'copy-assets' after 29 ms
[15:44:55] Starting subtask 'write-manifests'...
[15:44:56] Finished subtask 'write-manifests' after 1.44 s
[15:44:56] Starting subtask 'reload'...
[15:44:56] Finished subtask 'reload' after 4.62 ms

I can browse to https://localhost:4321 and view the directories

I have tried running $env:NODE_NO_HTTP2="1" and the issue still persists.

Steps to Reproduce

Followed steps outlined in linked article above. Running gulp serve I am presented with the following error messages from their respective browsers.

IE 11 / Edge: Can't connect securely to this page - this might be because the site uses outdated or unsafe TLS security settings.

Firefox: Secure Connection Failed - The connection to the server was reset while the page was loading.

Chrome: This site can't be reached - The connection was reset.

Node Version: v8.11.3
@microsoft/sharepoint version: 1.5.1

Let me know if you need any more information. Thank you for your help!

Most helpful comment

Normally port 5432 is used by postgresql if you have it installed

All 5 comments

Figured it out, not sure what was happening or what was using the port but I changed the port number in serve.json file to 8080 and it worked after that.

Thanks,
Zach

For me it worked like that:

image

And after I ran

Npm run dev

@ltabosa , thank you.

Normally port 5432 is used by postgresql if you have it installed

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

Was this page helpful?
0 / 5 - 0 ratings