MIsleading file path in Adding Self-Signed Certificates as Trusted Root Certificate article

[AlexJerabek]

In the Adding Self-Signed Certificates as Trusted Root Certificate page, the Windows instructions list a folder path for the certificate that doesn't exist:

Page

node_modules folder

The add-in was created using the Excel vue quickstart, so yo office was run with the "Office Add-in project containing the manifest only" option.

[akrantz]

This is outdated. Use npx office-addin-dev-certs install to easily install an SSL certificate for localhost.

[akrantz]

@nokafor The deletion of this page was reverted a long time ago but we should be good to delete this now, right?

[AlexJerabek]

@akrantz @nokafor We're still linking to this page from the excel vue quickstart. Would we be able to replace steps 2 and 3 in the linked section with instructions around npx office-addin-dev-certs install?

[akrantz]

Yes.

[AlexJerabek]

I still get a certificate error when using npx office-addin-dev-certs install. Is there a step missing between starting the service and running the cert install command?

[akrantz]

You might need to restart the browser, or possibly even the machine.

You already had dev certs installed. If you want to remove the old one, you could run npx office-addin-dev-certs uninstall or manually delete the .office-addin-dev-certs folder, and then run "npx office-addin-dev-certs install" again to generate the certs again.

Also, for the Edge browser, you need to allow loopback access for the appcontainer. You can do this for the web browser using: npx office-addin-dev-settings appcontainer edge --loopback

Or this for the Edge webview if you're using it with the Office win32 apps: npx office-addin-dev-settings appcontainer edgewebview --loopback

[AlexJerabek]

I've uninstalled and reinstalled the certs with the npx command, allowed loopback for both Edge and Edge webview, and restarted my machine. localhost:3000 is still showing a cert error.

[TCourtneyOwen]

@AlexJerabek not sure if you've tried this, but can you entirely delete C:\Users\.office-addin-dev-certs folder and then run npx office-addin-dev-certs again? Perhaps there's an issue with the uninstall command

[AlexJerabek]

Just tried that, but I'm still hitting the same issue. Are either of you able to get the vue quickstart working on your machines? I'm wondering if it's a setting difference between our machines instead of something deeper.

[TCourtneyOwen]

I will give the quick start a shot a bit later and let you know how it goes

[TCourtneyOwen]

I repro this as well and suspect the problem lies in this step in the quick start:

To enable HTTPS for your app, create a vue.config.js file in the root folder of the Vue project with the following contents:

JavaScript

Copy module.exports = { devServer: { port: 3000, https: true } };

I think we need a way to mimic what we do with our other taskpane apps, but I am not sure if we can do that easily. One alternative that works is to add the following to vue.config.js instead of what's currently recommended:

const fs = require("fs"); const path = require("path"); const homedir = require('os').homedir()

module.exports = { //... devServer: { port: 3000, https: true, key: fs.readFileSync(path.resolve(${homedir}/.office-addin-dev-certs/localhost.key)), cert: fs.readFileSync(path.resolve(${homedir}/.office-addin-dev-certs/localhost.crt)), ca: fs.readFileSync(path.resolve(${homedir}/.office-addin-dev-certs/ca.crt)) } };

[akrantz]

if you require the office-addin-dev-certs page and call devCerts.getHttpsServerOptions(), this will ensure that the certs exist and return an object with the key, cert, and ca properties.

[TCourtneyOwen]

@akrantz yes I trued adding await devCerts.getHttpsServerOptions() to the vue.config.js file but was hitting errors

[TCourtneyOwen]

Just finished the quick start and it works with my proposed change:

[AlexJerabek]

Thanks @TCourtneyOwen and @akrantz. I got the quickstart working with a combination of your suggestions. https://github.com/OfficeDev/office-js-docs-pr/pull/1737 will update the Office Add-ins docs. I'll leave this issue here to track the concerns with the original article in this repo.

[nokafor]

Following up on what to do with the original article - @akrantz I feel like it makes sense to keep the manual instructions for anyone who does not want to install the tooling. What do you think? I can update the instructions to make sure they are current

[AlexJerabek]

@nokafor We definitely should leave the original article up until the linked vue quickstart changes are validated and submitted.

[nokafor]

@AlexJerabek can you update the link in the docs to point to the master branch here: https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md?

[AlexJerabek]

@nokafor, After https://github.com/OfficeDev/office-js-docs-pr/pull/1737, the Office-JS docs no longer link to the ssl.md article.

[AlexJerabek]

@nokafor, Although, perhaps relatedly, we're still seeing customers with issues in that quick start: https://github.com/OfficeDev/office-js-docs-pr/issues/720#issuecomment-616133020

[TCourtneyOwen]

I believe we resolved this issue and the documentation was updated