2

I am having the issues with my workbench and its showing me the blank page with no errors on it.

Here is the console execution

Console screencap

gulp serve
Build target: DEBUG
[11:08:42] Using gulpfile C:\users\xxxxxx
versions
\gulpfile.js
[11:08:42] Starting gulp
[11:08:42] Starting 'serve'...
[11:08:42] Starting subtask 'configure-sp-build-rig'...
[11:08:42] Finished subtask 'configure-sp-build-rig' after 9.51 ms
[11:08:42] Starting subtask 'spfx-serve'...
[11:08:43] Starting server...
Starting api server on port 5432.
Registring api: /getwebparts
Registring api: /.
Registring api: /workbench
[11:08:43] Finished subtask 'spfx-serve' after 787 ms
[11:08:43] Starting subtask 'pre-copy'...
[11:08:43] Finished subtask 'pre-copy' after 20 ms
[11:08:43] Starting subtask 'copy-static-assets'...
[11:08:43] Starting subtask 'sass'...
[11:08:44] Server started https://localhost:4321
[11:08:44] LiveReload started on port 35729
[11:08:44] Running server
[11:08:44] Opening https://localhost:5432/workbench using the default OS app
[11:08:44] Finished subtask 'sass' after 1.46 s
[11:08:44] Starting subtask 'tslint'...
[11:08:46] Starting subtask 'typescript'...
[11:08:46] [typescript] TypeScript version: 2.4.2
[11:08:46] Finished subtask 'copy-static-assets' after 2.53 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.
Request: [::1] '/workbench'
[11:08:46] Finished subtask 'tslint' after 1.47 s
Request: '/temp/workbench.html'
[11:08:47] Finished subtask 'typescript' after 1.51 s
[11:08:47] Starting subtask 'ts-npm-lint'...
[11:08:47] Finished subtask 'ts-npm-lint' after 12 ms
[11:08:47] Starting subtask 'api-extractor'...
[11:08:47] Finished subtask 'api-extractor' after 3.38 ms
[11:08:47] Starting subtask 'post-copy'...
[11:08:47] Finished subtask 'post-copy' after 603 μs
[11:08:47] Starting subtask 'collectLocalizedResources'...
Request: '/temp/manifests.js'
[11:08:47] Finished subtask 'collectLocalizedResources' after 8.56 ms
[11:08:47] Starting subtask 'configure-webpack'...
[11:08:48] Finished subtask 'configure-webpack' after 1.09 s
[11:08:48] Starting subtask 'webpack'...
Request: '/node_modules/@microsoft/sp-webpart-workbench/lib/api/workbenchInit.js'
Request: '/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js'
[11:08:49] Finished subtask 'webpack' after 1.07 s
[11:08:49] Starting subtask 'configure-webpack-external-bundling'...
[11:08:49] Finished subtask 'configure-webpack-external-bundling' after 1.59 ms
[11:08:49] Starting subtask 'copy-assets'...
[11:08:49] Finished subtask 'copy-assets' after 13 ms
[11:08:49] Starting subtask 'write-manifests'...
[11:08:50] Finished subtask 'write-manifests' after 1.21 s
[11:08:50] Starting subtask 'reload'...
[11:08:50] Finished subtask 'reload' after 4.53 ms
Request: '/temp/workbench.html'
Request: '/temp/manifests.js'
Request: '/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js'
Request: '/nod
1
  • It seems the issue would be with the node version you are using. Try using node version 8.9.0 as this is a much more stable version for SPFx link Jul 25, 2018 at 3:02

3 Answers 3

2

You need to downgrade your Node.js to LTS version 8.11.3

Currently SPFx doesnt support 9.x or above versions.

Also, the npm version should be 5.x which is what you get when you install the LTS version.

Reference - Setup SPFx dev environment

Download link - Node.js

0

I've been working with this same problem for 3 days now on Windows 10, page loads, no errors, but the workbench is completely empty. Nothing to do with the version of node.js or Postgress.

My issue was being caused because my project was on a shared network drive. Re-creating a new package using yo again on the C drive allowed gulp serve to work as expected.

Node @10.24.0
Npm  @6.14.11
-1

Check the following lines

[11:08:44] Server started https://localhost:4321
[11:08:44] Opening https://localhost:5432/workbench using the default OS app

The port on the address that being loaded in your browser is different to the port that the http server is running on. Try opening https://localhost:4321 inside your browser after running gulp serve to see if you can access the workbench. You can then check the setup inside serve.json

1
  • Actually the port is opening correctly but its redirecting to 5432
    – AIM4DREAM
    Jul 25, 2018 at 15:42

Your Answer

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

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