I've written previously about using Visual Studio Codespaces for SPFx development. I also posted my .devcontainer folder in GitHub. I was reminded in an issue from Andrew Petersen that the SSL certificate used in the gulp serve command is not trusted in your local browser, causing a sub-optimal experience in the workbench.
When developing local, the command gulp trust-dev-cert will invoke a command (on Windows and Mac) to add the certificate used by SPFx to the Trusted Root Certification Authorities store for the current user. However, when using Codespaces, the server is running in the remote container (and is running Linux). So, the command will not update the store on the local computer. The solution is to copy the certificate file (*.cer) to your computer and import it into the store yourself.
Dev certificate for SPFx serve command
Copying the file is a bit of a struggle. Generation of the certificate file happens when gulp serve is run. You wouldn't know it by looking at the log:
vsonline:~/workspace$ gulp serve
Build target: DEBUG
[18:53:42] Using gulpfile ~/workspace/gulpfile.js
[18:53:42] Starting gulp
[18:53:42] Starting 'serve'...
[18:53:42] Starting subtask 'configure-sp-build-rig'...
[18:53:42] Finished subtask 'configure-sp-build-rig' after 3.69 ms
[18:53:42] Starting subtask 'spfx-serve'...
[18:53:42] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[18:53:42] Warning - [spfx-serve] When serving in HTTPS mode, a PFX cert path or a cert path and a key path must be provided, or a dev certificate must be generated and trusted. If a SSL certificate isn't provided, a default, self-signed certificate will be used. Expect browser security warnings.
[18:53:42] Starting server...
If we run the gulp trust-dev-cert command, we get helpful information:
vsonline:~/workspace$ gulp trust-dev-cert
Build target: DEBUG
[19:01:20] Using gulpfile ~/workspace/gulpfile.js
[19:01:20] Starting gulp
[19:01:20] Starting 'trust-dev-cert'...
[19:01:20] Starting subtask 'configure-sp-build-rig'...
[19:01:20] Finished subtask 'configure-sp-build-rig' after 3.26 ms
[19:01:20] Starting subtask 'trust-cert'...
[19:01:24] [trust-cert] Automatic certificate trust is only implemented for gulp-core-build-serve on Windows and macOS. To trust the development certificate, add this certificate to your trusted root certification authorities: "/home/vsonline/.gcb-serve-data/gcb-serve.cer".
[19:01:24] Finished subtask 'trust-cert' after 4.27 s
[19:01:24] Finished 'trust-dev-cert' after 4.27 s
[19:01:25] ==================[ Finished ]==================
[19:01:25] Project workspace version:0.0.1
[19:01:25] Build tools version:3.12.1
[19:01:25] Node version:v10.21.0
[19:01:25] Total duration:6.78 sSo, the certificate is generated and stored in a hidden folder. Perfect! Now, how do I copy it?
Copy the certificate to the local machine
I could not find an completely automated way to copy the certificate file out of the Codespace container. So here is the most straight-forward approach.
WARNING: Do not include the .cer file in your repo. Either delete it when you finish, or update .gitignore. No warranty provided. It is you're machine, your fault.
When using Visual Studio code for remote development, a Download command is available from the palette (Ctrl+Shift+P) or when right-clicking on a file. We just need to include the .cer file in the explorer view. The following command will copy the .cer file from its generated location into the workspace folder.
cp ../.gcb-serve-data/*.cer .With the file included in the workspace, right-click and download. You will be prompted for the location on your local machine to store the file.
Trust the certificate
With the file on the local computer, we can add it to the correct certificate store using the same command as the SPFx toolchain. For Windows, the command:
certutil -user -addstore root <path-to-cer-file>I don't have a Mac, but based on the code, I believe this to be the command:
security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain <path-to-cer-file>With the local machine now trusting the certificate, running the SPFx workbench will work as usual.