Share via

ERR_CONNECTION_REFUSED when trying to run local spfx workbench

Sanju Varghese 6 Reputation points
Oct 11, 2020, 10:26 AM

Hi all,

When I run gulp serve, on chrome it does not load the local workbench.
I get ERR_CONNECTION_REFUSED

I am able to go to https://localhost:4321/ and see all the directories
It is the same behaviour in all other browsers.
I have chrome version:86.0.4240.75 (Official Build) (64-bit)

I have Node v10.22.1
My npm is v6.14.6
My gulp is , 3.9.1
sharepoint generator is 1.11.1
I use Windows 10
I have run gulp trust-dev-cert
I have not run npm audit fix
I don't have postgress sql installed which usually blocks port 5432
I have tried unistalling all (gulp,yeoman, node,..) and reinstalling
I have disabled my antivirus and tried
I don't have any extensions in my chrome browser
In my temp folder, I don't see workbench.html created

Basically I have tried to create a webpart for sharepoint online and then run gulp serve
Below is my gulp serve output

Build target: DEBUG
[15:45:43] Using gulpfile H:\GitCentralRepo\central\spfx1\gulpfile.js
[15:45:43] Starting gulp
[15:45:43] Starting 'serve'...
[15:45:43] Starting subtask 'configure-sp-build-rig'...
[15:45:43] Finished subtask 'configure-sp-build-rig' after 6.44 ms
[15:45:43] Starting subtask 'spfx-serve'...
[15:45:43] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[15:45:43] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: /
[15:45:44] Finished subtask 'spfx-serve' after 435 ms
[15:45:44] Starting subtask 'pre-copy'...
[15:45:44] Finished subtask 'pre-copy' after 15 ms
[15:45:44] Starting subtask 'copy-static-assets'...
[15:45:44] Starting subtask 'sass'...
[15:45:44] Server started https://localhost:4321
[15:45:44] LiveReload started on port 35729
[15:45:44] Running server
[15:45:44] Opening https://localhost:5432/workbench using the default OS app
[15:45:44] Finished subtask 'copy-static-assets' after 64 ms
[15:45:44] Finished subtask 'sass' after 312 ms
[15:45:44] Starting subtask 'tslint'...
[15:45:45] [tslint] tslint version: 5.12.1
[15:45:45] Starting subtask 'tsc'...
[15:45:45] [tsc] typescript version: 3.3.4000
[15:45:48] Finished subtask 'tsc' after 3.38 s
[15:45:49] Finished subtask 'tslint' after 4.9 s
[15:45:49] Starting subtask 'post-copy'...
[15:45:49] Finished subtask 'post-copy' after 1.27 ms
[15:45:49] Starting subtask 'collectLocalizedResources'...
[15:45:49] Finished subtask 'collectLocalizedResources' after 4.43 ms
[15:45:49] Starting subtask 'configure-webpack'...
[15:45:50] Finished subtask 'configure-webpack' after 757 ms
[15:45:50] Starting subtask 'webpack'...
[15:45:51] Finished subtask 'webpack' after 1.52 s
[15:45:51] Starting subtask 'configure-webpack-external-bundling'...
[15:45:51] Finished subtask 'configure-webpack-external-bundling' after 1.98 ms
[15:45:51] Starting subtask 'copy-assets'...
[15:45:51] Finished subtask 'copy-assets' after 20 ms
[15:45:51] Starting subtask 'write-manifests'...
[15:45:52] Finished subtask 'write-manifests' after 1.06 s
[15:45:52] Starting subtask 'reload'...
[15:45:52] Finished subtask 'reload' after 2.08 ms

This my serve.json

{
"$schema": "https://developer.microsoft.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/"
}
}

Please help

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
11,230 questions
0 comments No comments
{count} votes

3 answers

Sort by: Most helpful
  1. Amos Wu-MSFT 4,051 Reputation points
    Oct 12, 2020, 2:17 AM

    Try to change the default port(must be an unoccupied port):

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

    The workbeach.html will be automatically generated after the gulp serve command runs successfully.

    You can run this command netstat -ano to check the port occupancy.


    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.

  2. Sanju Varghese 6 Reputation points
    Oct 12, 2020, 12:57 PM

    I tried 8080, but no luck.

    netstat also did not yield anything

    Please help

    0 comments No comments

  3. Sanju Varghese 6 Reputation points
    Oct 13, 2020, 8:12 AM

    This issue is now fixed. It was caused by latest version the internet security (Kaspersky 21.1.15.500).

    I went to Settings->Additional->Network
    I selected Monitor selected ports only
    The I clicked on "Select" next to it and unchecked "Monitor all network ports for applications that are vulnerable to network attacks


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.