Sp-dev-docs: Browser security issue prevents workbench from displaying

[jaamp]

Category

• [x] Bug
  

  Expected or Desired Behavior

The local workbench should open without any error when running the gulp serve.

Observed Behavior

Will not connect to HTTPS://localhost:xxxx/temp/workbench.html due to “the site uses outdated or unsafe TLS security settings”. This occurs using Edge, Chrome, Firefox

Steps to Reproduce

Install SPFx framework following the instructions on https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
Using windows 10 home. (although I am getting the same error on my work computer which is Win 10 professional, and I have admin privileges on that computer as well – and ran everything on that computer in admin mode.
>

What I have done…

1. Followed instructions on MS page above – did not work
2. Ran in Admin mode - did not work
3. Added certs to trusted root – did not work
4. Set all browsers to accept all forms of TLS – did not work
5. Basically, I have tried everything I have found on web searches.. save reinstalling windows.

Thanks for your contribution! Sharing is caring.

[msft-github-bot]

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

[BassemNKhalil]

Are you able to share a bit more information on the environment, i.e your SharePoint framework version as well as the targeted SharePoint version (SP16, SP19 or SPO)?

[jaamp]

My Targeted SP Version is SP16, not sure the framework version, however, the issue is not with the targeted version of SP or the framework. I can't even get to the workbench. I get a certificate error / site not trusted error.

[BassemNKhalil]

Please check #4485 - it seems to be the same scenario. I’ve managed to workaround it by changing the configuration in the serve.json config file.

[PopWarner]

You can always check your installed version of SPFx by running the following command in your console.
npm list --depth=0 -g

You'll be looking for the line that says
@microsoft/[email protected]

:)

[jaamp]

oh, okay... maybe this helps..

NPM version - 6.9.0
Node version - 10.16.3
Yoeman version - 3.1.0
Glup CLI version - 2.2.0
Microsoft-Generator version - 1.9.1

[jaamp]

here is some more information

PS C:\Users\jotow\Desktop\sp> gulp trust-dev-cert
Build target: DEBUG
[07:53:24] Using gulpfile ~\Desktop\spgulpfile.js
[07:53:24] Starting gulp
[07:53:24] Starting 'trust-dev-cert'...
[07:53:24] Starting subtask 'trust-cert'...
[07:53:24] Finished subtask 'trust-cert' after 77 ms
[07:53:24] Finished 'trust-dev-cert' after 78 ms
[07:53:25] ==================[ Finished ]==================
[07:53:25] Project sp version: 0.0.1
[07:53:25] Build tools version: 2.5.3
[07:53:25] Node version: v10.16.3
[07:53:25] Total duration: 3.17 s
PS C:\Users\jotow\Desktop\sp> gulp serve
Build target: DEBUG
[07:53:48] Using gulpfile ~\Desktop\spgulpfile.js
[07:53:48] Starting gulp
[07:53:48] Starting 'serve'...
[07:53:48] Starting subtask 'pre-copy'...
[07:53:48] Finished subtask 'pre-copy' after 11 ms
[07:53:48] Starting subtask 'copy-static-assets'...
[07:53:48] Starting subtask 'sass'...
[07:53:49] Finished subtask 'copy-static-assets' after 766 ms
[07:53:49] Finished subtask 'sass' after 757 ms
[07:53:49] Starting subtask 'tslint'...
[07:53:49] Starting subtask 'typescript'...
[07:53:49] [typescript] TypeScript version: 2.2.2
[07:53:50] Finished subtask 'tslint' after 1.25 s
[07:53:50] Finished subtask 'typescript' after 1.25 s
[07:53:50] Starting subtask 'ts-npm-lint'...
[07:53:50] Finished subtask 'ts-npm-lint' after 18 ms
[07:53:50] Starting subtask 'api-extractor'...
[07:53:50] Finished subtask 'api-extractor' after 946 μs
[07:53:50] Starting subtask 'post-copy'...
[07:53:50] Finished subtask 'post-copy' after 706 μs
[07:53:50] Starting subtask 'collectLocalizedResources'...
[07:53:50] Finished subtask 'collectLocalizedResources' after 3.99 ms
[07:53:50] Starting subtask 'configure-webpack'...
[07:53:51] Finished subtask 'configure-webpack' after 591 ms
[07:53:51] Starting subtask 'webpack'...
(node:13396) 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.
[07:53:51] Finished subtask 'webpack' after 570 ms
[07:53:51] Starting subtask 'configure-webpack-external-bundling'...
[07:53:51] Finished subtask 'configure-webpack-external-bundling' after 899 μs
[07:53:51] Starting subtask 'copy-assets'...
[07:53:51] Finished subtask 'copy-assets' after 47 ms
[07:53:51] Starting subtask 'write-manifests'...
[07:53:52] Finished subtask 'write-manifests' after 510 ms
[07:53:52] Starting subtask 'serve'...
Starting api server on port 5432.
Registring api: /getwebparts
Registring api: /.
Registring api: /workbench
[07:53:52] Finished subtask 'serve' after 434 ms
[07:53:52] Finished 'serve' after 4.24 s
[07:53:52] Server started https://localhost:4321
[07:53:52] LiveReload started on port 35729
[07:53:52] Opening https://localhost:5432/workbench using the default OS app
[07:53:53] ==================[ Finished ]==================
Request: [::1] '/workbench'
[07:53:53] Project sp version: 0.0.1
[07:53:53] Build tools version: 2.5.3
[07:53:53] Node version: v10.16.3
[07:53:53] Total duration: 7.15 s

[jaamp]

@BassemNKhalil - I went in and edited the serve.json to below...
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": false,
"initialPage": "http://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

[jaamp]

I was able to get to the workbench using just http... so, my next question, is it a big deal that I cannot get to the https? Will I still be able to fully develop webparts without the https?

[BassemNKhalil]

Hi @jaamp, the settings in serve.json are only used when you’re using gulp serve so it doesn’t affect the WebPart when deployed later on to SharePoint.

Since I found #4485 I’ve been developing a WebPart locally on the workbench then deployed it for good measures to SharePoint online, SP2016 as well as Microsoft teams.

I’m hoping someone from the community can shed some light as to why this behaviour happens and hopefully Microsoft can change it in a following release.

[andrewconnell]

@jaamp
Have you taken a look at the first two entries under the Troubleshooting section here?
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment#troubleshooting

When you are creating the project, even though it's running on your local workbench, did you choose the SP2016 environment when creating the project? If so, check that first one.

Changing the local webserver to use HTTP and not HTTPS, while it may get around the issue, doesn't fix it. It is not really a solution IMHO...

[jaamp]

Hi,

Prior to starting I removed the .gcb-serve-data folder. Set the Environment Variable to: NODE_NO_HTTP2=1

Then when creating the project is selected, in Yeoman, "SharePoint 2016 onwards, including 2019 and SharePoint Online"

ran glup trust-dev-cert

than glup serve -- still no joy

[andrewconnell]

By chance have you tried a SharePoint Online target environment and then tried running the local workbench?

[jaamp]

Hi,
BLUF: Still no joy

I download CMDER and ran everything from there in Admin Mode...

Tried to do a SP Online target - could not even finish yo build before I got a json error.
Completed a fresh attempt to build a project.. still same error as before

next post is the a to z of how I set up the project

[jaamp]

C:\Users\jotow\Desktop\cmder
λ cd..

C:\Users\jotow\Desktop
λ mkdir mss

C:\Users\jotow\Desktop
λ cd mss

C:\Users\jotow\Desktop\mss
λ npm install
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\jotow\Desktop\mss\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\jotow\Desktop\mss\package.json'
npm WARN mss No description
npm WARN mss No repository field.
npm WARN mss No README data
npm WARN mss No license field.

up to date in 0.554s
found 0 vulnerabilities

C:\Users\jotow\Desktop\mss
λ npm install -g yo
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead
C:\Users\jotow\AppData\Roaming\npm\yo-complete -> C:\Users\jotow\AppData\Roaming\npm\node_modules\yo\lib\completion\index.js
C:\Users\jotow\AppData\Roaming\npm\yo -> C:\Users\jotow\AppData\Roaming\npm\node_modules\yo\lib\cli.js

[email protected] postinstall C:\Users\jotow\AppData\Roaming\npm\node_modules\yo
yodoctor

Yeoman Doctor
Running sanity checks on your system

√ No .bowerrc file in home directory
√ Global configuration file is valid
√ NODE_PATH matches the npm root
√ No .yo-rc.json file in home directory
√ Node.js version
√ npm version
√ yo version

Everything looks all right!

• [email protected]
  updated 1 package in 36.441s

C:\Users\jotow\Desktop\mss
λ npm install -g gulp
C:\Users\jotow\AppData\Roaming\npmgulp -> C:\Users\jotow\AppData\Roaming\npm\node_modulesgulp\bingulp.js
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\jotow\AppData\Roaming\npm\node_modulesgulp\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modulesgulp\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

• [email protected]
  updated 1 package in 21.994s

C:\Users\jotow\Desktop\mss
λ npm install -g @microsoft/generator-sharepoint

• @microsoft/[email protected]
  updated 1 package in 19.636s

C:\Users\jotow\Desktop\mss
λ npm install
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\jotow\Desktop\mss\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\jotow\Desktop\mss\package.json'
npm WARN mss No description
npm WARN mss No repository field.
npm WARN mss No README data
npm WARN mss No license field.

up to date in 0.522s
found 0 vulnerabilities

C:\Users\jotow\Desktop\mss
λ yo
? 'Allo jaamp! What would you like to do? @microsoft/sharepoint

Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo @microsoft/sharepoint

 _-----_
|       |    .--------------------------.
|--(o)--|    |      Welcome to the      |

---------´ | SharePoint Client-side | ( _´U_ ) | Solution Generator |
/___A___\ '--------------------------'
| ~ |
__'.___.'__
´ |° ´ Y

Let's create a new SharePoint solution.
? What is your solution name? mss
? Which baseline packages do you want to target for your component(s)? SharePoint 2016 onwards, including 2019 and SharePoint Online
? Where do you want to place the files? Use the current folder
Found npm version 6.9.0
? Which type of client-side component to create? WebPart
Add new Web part (on-prem) to solution mss.
? What is your Web part (on-prem) name? HelloWorld
? What is your Web part (on-prem) description? HelloWorld description
? Which framework would you like to use? No JavaScript framework

create package.json
create config\package-solution.json
create config\config.json
create config\serve.json
create tsconfig.json
create .vscode\extensions.json
create .vscode\launch.json
create .vscode\settings.json
create config\copy-assets.json
create config\deploy-azure-storage.json
create config\write-manifests.json
create src\index.ts
create gulpfile.js
create README.md
create tslint.json
create .editorconfig
create .gitignore
create src\webparts\helloWorld\HelloWorldWebPart.module.scss
create src\webparts\helloWorld\HelloWorldWebPart.ts
create src\webparts\helloWorld\loc\en-us.js
create src\webparts\helloWorld\loc\mystrings.d.ts
create src\webparts\helloWorld\HelloWorldWebPart.manifest.json

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: not actively maintained anymore
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: this package is now deprecated
npm WARN deprecated @types/[email protected]: This is a stub types definition for log4js (https://github.com/nomiddlename/log4js-node). log4js provides its own type definitions, so you don't need @types/log4js installed!
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
npm WARN deprecated [email protected]: connect 2.x series is deprecated
npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: This module is no longer maintained, try this instead:
npm WARN deprecated npm i nyc
npm WARN deprecated Visit https://istanbul.js.org/integrations for other alternatives.
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: This package has been deprecated in favour of @sinonjs/samsam
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated @types/[email protected]: This is a stub types definition for chalk (https://github.com/chalk/chalk). chalk provides its own type definitions, so you don't need @types/chalk installed!
npm WARN deprecated [email protected]: This package is unmaintained. Use @sinonjs/formatio instead
npm WARN deprecated [email protected]: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
npm WARN deprecated [email protected]: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: This package has been deprecated in favour of @sinonjs/samsam
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: I wrote this module a very long time ago; you should use something else.

[email protected] install C:\Users\jotow\Desktop\mss\node_modules\deasync
node ./build.js

win32-x64-node-10 exists; testing
Binary is fine; exiting

[email protected] install C:\Users\jotow\Desktop\mss\node_modules\node-sass
node scripts/install.js

Cached binary found at C:\Users\jotow\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-64_binding.node

[email protected] install C:\Users\jotow\Desktop\mss\node_modules\phantomjs-prebuilt
node install.js

PhantomJS not found on PATH
Download already available at C:\Users\jotow\AppData\LocalTemp\phantomjs\phantomjs-2.1.1-windows.zip
Verified checksum of previously downloaded file
Extracting zip contents
Removing C:\Users\jotow\Desktop\mss\node_modules\phantomjs-prebuilt\lib\phantom
Copying extracted folder C:\Users\jotow\AppData\LocalTemp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1566852872160\phantomjs-2.1.1-windows -> C:\Users\jotow\Desktop\mss\node_modules\phantomjs-prebuilt\lib\phantom
Writing location.js file
Done. Phantomjs binary available at C:\Users\jotow\Desktop\mss\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe

@microsoft/[email protected] install C:\Users\jotow\Desktop\mss\node_modules\@microsoft\sp-loader
node npm-install-script.js

[email protected] postinstall C:\Users\jotow\Desktop\mss\node_modules\babel-runtime\node_modules\core-js
node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

https://opencollective.com/core-js
https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

[email protected] postinstall C:\Users\jotow\Desktop\mss\node_modules\karma\node_modules\core-js
node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

https://opencollective.com/core-js
https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

[email protected] postinstall C:\Users\jotow\Desktop\mss\node_modules\node-sass
node scripts/build.js

Binary found at C:\Users\jotow\Desktop\mss\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1761 packages from 1696 contributors and audited 107416 packages in 62.252s
found 809 vulnerabilities (249 low, 28 moderate, 527 high, 5 critical)
run npm audit fix to fix them, or npm audit for details

  _=+#####!

###########| .-----------------------------------.
###/ (##|(@) | Congratulations! |
### ######| \ | Solution mss is created. |
###/ /###| (@) | Run gulp serve to play with it! |
####### ##| / '-----------------------------------'
### /##|(@)
###########|
**=+####!

 _-----_     ╭───────────────────────╮
|       |    │      Bye from us!     │
|--(o)--|    │       Chat soon.      │

---------´ │ Yeoman team │ ( _´U_ ) │ http://yeoman.io │
/___A___\ /╰───────────────────────╯
| ~ |
__'.___.'__
´ |° ´ Y

C:\Users\jotow\Desktop\mss
λ gulp trust-dev-cert
Build target: DEBUG
[13:54:57] Using gulpfile ~\Desktop\mssgulpfile.js
[13:54:57] Starting gulp
[13:54:57] Starting 'trust-dev-cert'...
[13:54:57] Starting subtask 'trust-cert'...
[13:54:57] [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.
[13:55:01] Finished subtask 'trust-cert' after 4.37 s
[13:55:01] Finished 'trust-dev-cert' after 4.37 s
[13:55:02] ==================[ Finished ]==================
[13:55:02] Project mss version: 0.0.1
[13:55:02] Build tools version: 2.5.3
[13:55:02] Node version: v10.16.3
[13:55:02] Total duration: 7.02 s

C:\Users\jotow\Desktop\mss
λ gulp serve
Build target: DEBUG
[13:55:16] Using gulpfile ~\Desktop\mssgulpfile.js
[13:55:16] Starting gulp
[13:55:16] Starting 'serve'...
[13:55:16] Starting subtask 'pre-copy'...
[13:55:16] Finished subtask 'pre-copy' after 13 ms
[13:55:16] Starting subtask 'copy-static-assets'...
[13:55:16] Starting subtask 'sass'...
[13:55:17] Finished subtask 'copy-static-assets' after 763 ms
[13:55:17] Finished subtask 'sass' after 750 ms
[13:55:17] Starting subtask 'tslint'...
[13:55:17] Starting subtask 'typescript'...
[13:55:17] [typescript] TypeScript version: 2.2.2
[13:55:18] Finished subtask 'tslint' after 1.06 s
[13:55:18] Finished subtask 'typescript' after 1.05 s
[13:55:18] Starting subtask 'ts-npm-lint'...
[13:55:18] Finished subtask 'ts-npm-lint' after 8.46 ms
[13:55:18] Starting subtask 'api-extractor'...
[13:55:18] Finished subtask 'api-extractor' after 729 μs
[13:55:18] Starting subtask 'post-copy'...
[13:55:18] Finished subtask 'post-copy' after 516 μs
[13:55:18] Starting subtask 'collectLocalizedResources'...
[13:55:18] Finished subtask 'collectLocalizedResources' after 2.9 ms
[13:55:18] Starting subtask 'configure-webpack'...
[13:55:19] Finished subtask 'configure-webpack' after 532 ms
[13:55:19] Starting subtask 'webpack'...
(node:27668) 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.
[13:55:19] Finished subtask 'webpack' after 480 ms
[13:55:19] Starting subtask 'configure-webpack-external-bundling'...
[13:55:19] Finished subtask 'configure-webpack-external-bundling' after 820 μs
[13:55:19] Starting subtask 'copy-assets'...
[13:55:19] Finished subtask 'copy-assets' after 50 ms
[13:55:19] Starting subtask 'write-manifests'...
[13:55:20] Finished subtask 'write-manifests' after 476 ms
[13:55:20] Starting subtask 'serve'...
Starting api server on port 5432.
Registring api: /getwebparts
Registring api: /.
Registring api: /workbench
[13:55:20] Finished subtask 'serve' after 425 ms
[13:55:20] Finished 'serve' after 3.85 s
[13:55:20] Server started https://localhost:4321
[13:55:20] LiveReload started on port 35729
[13:55:20] Opening https://localhost:5432/workbench using the default OS app
[13:55:21] ==================[ Finished ]==================
[13:55:21] Project mss version: 0.0.1
[13:55:21] Build tools version: 2.5.3
[13:55:21] Node version: v10.16.3
[13:55:21] Total duration: 6.58 s
Request: [::1] '/workbench'

[jaamp]

A few other thoughts, I a using McAfee - I turned off the firewall and tried to run the project again, still did not work.

[andrewconnell]

Couple other ideas... chance you are behind a proxy?

Did you have your A/V enabled when you installed the original NPM dependencies (SPFx generator, Yeoman, Gulp) or when you initially created the project and ran npm install?

[jaamp]

Apologize for the delayed response, was finalizing other projects... So no proxy, did a toolchain build with A/V and Firewall off .. still did not work in local host. From the same build, I changes the gulp serve config to point to my SP dev tenant workbench, this seems to work with the https://mytenet.sharepoint.com/sites/developersite/_layouts/15/workbench.aspx

So maybe that might be the only way I will get there is to work directly in the SP instead of localhost.

[andrewconnell]

Have you been able to navigate to localhost for other projects (like ASP.NET)?

[jaamp]

Hi, I am unable to get to HTTPS with ASP.NET (same error site cannot provide secured connection). I also went to extremes... I completely reset my windows 10. Then downloaded only VS code, Node LTS, and CMDER, did the tool chain, and still received the same results...

I am sure I am missing something...

[andrewconnell]

In that case this isn't specific to SPFx, rather it's something going on with your machine. When you say ASP.NET, unclear if you are talking about doing this from VSCode (dotnet core) or Visual Studio. Regardless, I saw this that has a lot of steps on how to investigate and trust a cert from the browser.

See if this helps... we have a lot of these issues in the list & I'm trying to find common root causes to create the definitive guide on how to resolve it... please let me know how this works for you. You can likely ignore the IIS Express stuff, rather use the parts that have you inspect the certs installed, deleting them, and manually trusting it from the browser:

https://www.pluralsight.com/guides/visual-studio-2017-resolving-ssl-tls-connections-problems-with-iis-express

[jaamp]

Okay, so for VS Community 2019 and a simple web app - the plural sight guide helped and I was able to open in HTTPS. However, for my VS Code webpart, still did not work with HTTPS. So, I started looking at the cert generated by VS2019 and the one generated by trust-dev-cert and noticed the VS version is a .pfx cert type and gulp is a .cer type. I don't know if that matters, I did do some switching around and the VS2019 would not open with the .cer,

[andrewconnell]

Those are two completely different certs. Visual Studio 2019 has it's own... there isn't a VS Code cert... an NPM package that the SPFx project is relying on via the workbench has it's own cert.

My point was to follow the same process of manually trusting the cert via VS Code & the browser that the article went through with a Visual Studio solution.

[jaamp]

I have found the issue at least with me... there is a bug in the @microsoft-gulp-core-build-serve. In
\node_modules\@microsoftgulp-core-build-serve\lib\certificates.d.ts
the first line is
///
it should be
//

the three slashed are like a double negative.. where I think MS wanted to comment out, it actually re-commented it in.... anyway, I removed the extra forward slash, saved the file, ran gulp trust-dev-cert, then gulp serve.. and like a charm the workbench opened in my local host https...

You can consider this closed and I hope this helps others...

[jaamp]

Never letting things be... here is an addendum... The above error I identified, is not the problem, while VS Code sees it as an error, (I now know it is a way to create XML documentation) nonetheless, it is not the problem.

When AC asked earlier "By chance have you tried a SharePoint Online target environment and then tried running the local workbench?" I did try and it failed. However, when testing today that is what worked, building a 365 only with edits to

_\node_modules@microsoftgulp-core-build-serve\lib\certificates.d.ts_

So, I built a new 365 only without making edits to the .. _\node_modules ... and it still worked,,, great, so the problem was not the error in ... _\node_modules ... .

Then I build a 2019 and above, again built like a charm https and everything, again no changes to the ... _\node_modules ... .

Finally, I build a 2016 and above, there I ran into the cert issue again. I tried it with changing, and with out changing ... _\node_modules ... .

I don't think the issue is with my computer or trusting the certs, it is somewhere deep in the @microsoft-gulp-core-build, way beyond my level of experience.

as another addendum - when I was looking deeper into the @microsoft-gulp-core-build I found a few more errors in the "Rush" area (not sure what that is)

I don't want to re-open the issue, I can work fine with the 365, for my work, we will be on 2016 prem at the end of the year, and by end of next year we plan to be on 365, so what I learn now is good, and will set me up for our eventual move.

[andrewconnell]

I think I finally figured this one out: the NODE_NO_HTTP2 environment variable was added in NodeJS v8, but removed in NodeJS v10. I can't find anything in v10+ that enables a user to force HTTP1 from the CLI. Thus... you are stuck using NodeJS v8 if you are using SPFx v1.1 for SharePoint Server 2016.

I've updated the SPFx docs & they've been merged to master, but won't go live for a few more days.

More:
https://www.andrewconnell.com/blog/spfx-which-version-of-spfx-generator-to-install/

[jaamp]

Thank you for continuing to look at this issue. We are migrating to SP2016 on prem, in a few weeks, I look forward to testing out the SPFx

[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