Sp-dev-docs: This site can’t provide a secure connection : gulp serve

[SaveeshS]

Category

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

I was building a hello word SPFX webpart and gulp sever giving me the below error in the browser. I have executed the gulp trust-dev-cert i.

Browser - IE
Can’t reach this page
•Make sure the web address https://localhost:5432 is correct

Browser - Chrome
This site can’t provide a secure connection
localhost sent an invalid response.

I am using node Version - v10.16.2
npm version - 6.9.0

Using gulpfile C:**\spfx_poc\gulpfile.js
Starting gulp
Starting 'serve'...
Starting subtask 'pre-copy'...
Finished subtask 'pre-copy' after 77 ms
Starting subtask 'copy-static-assets'...
Starting subtask 'sass'...
Finished subtask 'sass' after 3.16 s
Starting subtask 'tslint'...
Starting subtask 'typescript'...
[typescript] TypeScript version: 2.2.2
Finished subtask 'copy-static-assets' after 3.24 s
Finished subtask 'tslint' after 103 ms
Finished subtask 'typescript' after 2.86 s
Starting subtask 'ts-npm-lint'...
Finished subtask 'ts-npm-lint' after 19 ms
Starting subtask 'api-extractor'...
Finished subtask 'api-extractor' after 1.06 ms
Starting subtask 'post-copy'...
Finished subtask 'post-copy' after 751 μs
Starting subtask 'collectLocalizedResources'...
Finished subtask 'collectLocalizedResources' after 6.38 ms
Starting subtask 'configure-webpack'...
Finished subtask 'configure-webpack' after 4.61 s
Starting subtask 'webpack'...
(node:70196) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Finished subtask 'webpack' after 2.98 s
Starting subtask 'configure-webpack-external-bundling'...
Finished subtask 'configure-webpack-external-bundling' after 940 μs
Starting subtask 'copy-assets'...
Finished subtask 'copy-assets' after 108 ms
Starting subtask 'write-manifests'...
Finished subtask 'write-manifests' after 4.44 s
Starting subtask 'serve'...
Starting api server on port 5432.
Registring api: /getwebparts
Registring api: /.*
Registring api: /workbench
Finished subtask 'serve' after 6.18 s
Finished 'serve' after 25 s
Server started https://localhost:4321
LiveReload started on port 35729
Opening https://localhost:5432/workbench using the default OS app
==================[ Finished ]==================
Project spfx-poc version: 0.0.1
Build tools version: 2.5.3
Node version: v10.16.2
Total duration: 36 s
Request: [::1] '/workbench'
Request: [::1] '/workbench'

Please help.

Regards,
Saveesh.S

[msft-github-bot]

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

[andrewconnell]

Can you share additional context, please?

• SPFx version
• What were the results when you ran gulp trust-dev-cert?

You said you ran gulp trust-dev-cert i... is that correct or a typo (the 'i' part)?

Have you tried uninstalling the cert, closing the console & trying it again?

[SaveeshS]

Can you share additional context, please?

• SPFx version
• What were the results when you ran gulp trust-dev-cert?

You said you ran gulp trust-dev-cert i... is that correct or a typo (the 'i' part)?

Have you tried uninstalling the cert, closing the console & trying it again?

+-- @microsoft/[email protected]
+-- [email protected]
`-- [email protected]

Regarding the certificate , it has asked to accept the certificate popup in a window and I given Yes to the same.

[andrewconnell]

Thanks for the versions, but please answer _all_ my questions.

Ignore the cert popup... that's not important here. That's not adding it to the trusted root authority.

[anilkuchi1]

HI Andrew
I am having the same issue .My Node version is 10.16 and if i update my serve.json to "http" :true and "initialpage" : "http://localhost:5432/workbench" it works with that . But not with HTTPS ,I am building the WebPart for SP 2016 and Online onwards

[andrewconnell]

@anilkuchi1 Not enough info... see the same questions I asked above.

Unless you can ID that you have the exact same issue as the OP, better to open a new issue.

[anilkuchi1]

Thanks Andrew .Yes i have run the Gulp untrust-dev-cert and then closed the console and then opened the console and ran the Gulp trust-dev-cert .The output of that is below .I am having the exact same issue the main thing i noticed is this happens only when i selected the "SharePoint 2016 onwards, including 2019 and SharePoint Online" it works fine when i build the app for "Sharepoint Online only "
Build target: DEBUG
[14:37:48] Using gulpfile C:\Projects\SPFX\Webparts\SPFXAssets\gulpfile.js
[14:37:48] Starting gulp
[14:37:48] Starting 'trust-dev-cert'...
[14:37:48] Starting subtask 'trust-cert'...
[14:37:49] [trust-cert] Attempting to trust a dev certificate. This self-signed certificate only points to localhost and will be stored in your local user profile to be used by other instances of gulp-core-build-serve. If you do not consent to trust this certificate, click "NO" in the dialog.
[14:37:51] Finished subtask 'trust-cert' after 3.28 s
[14:37:51] Finished 'trust-dev-cert' after 3.28 s
[14:37:52] ==================[ Finished ]==================
[14:37:52] Project spfx-assets version: 0.0.1
[14:37:52] Build tools version: 2.5.3
[14:37:52] Node version: v10.16.0
[14:37:52] Total duration: 5.75 s

[andrewconnell]

@anilkuchi1 said:

this happens only when i selected the "SharePoint 2016 onwards, including 2019 and SharePoint Online" it works fine when i build the app for "Sharepoint Online only "

That detail isn't part of the OP's issue... please open a new issue with this detail. If that same detail doesn't apply to the OP, then this could hijack their issue, which is why we create new issues for different issues.

[anilkuchi1]

Thanks I will open a new issue

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within next 7 days of this comment. Thank you for your contributions to SharePoint Developer activities.

[msft-github-bot]

Closing issue due no response from original author. If this issue is still occurring, please open a new issue with additional details. Notice that if you have included another related issue as additional comment on this, please open that also as separate issue, so that we can track it independently.

[SaveeshS]

Using the below command execution I have fixed the issue today.
Sorry I got struck in few other work , thats why late reply. Thanks for all you help

Commands
_npm install --save-dev @microsoft/sp-build-web_

From https://github.com/SharePoint/sp-dev-docs/issues/15

_npm i @microsoft/sp-webpart-workbench_

From https://sharepoint.stackexchange.com/questions/218019/serve-the-api-entry-could-not-be-loaded-in-sharepoint-frameworkspfx

_npm shrinkwrap
npm install_

From https://github.com/SharePoint/sp-dev-fx-webparts/issues/497

[andrewconnell]

@SaveeshS if that was your fix, then you had a problem with your project or when you installed those dependencies. Both of those packages are in the devDependencies section of the default SPFx project's package.json file, so when you ran npm install (or let the generator do it), it would have installed them.

[erobillard]

I had this issue with an old webpart today that was originally scaffolded with an old version. Upgrading the project by following the steps provided by the Office 365 CLI (see @waldekmastykarz post at https://blog.mastykarz.nl/upgrade-sharepoint-framework-project-office-365-cli/) resolved the issues and the old webpart is again running fine.

Big thanks to @waldekmastykarz and @andrewconnell for all your awesome work!

Cheers,
-Eli.

[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