HTTPS Locally in Vue.js

As I have been experimenting with FIDO2 and Yubikey, I discovered that in order to test it running locally, I needed to run the site with SSL/TLS. Vue does support this, but there were a few steps:

1. Create certificates Locally
2. Trust the new certificates
3. Add the certificates to the project

There are plenty of articles detailing the first two steps, here’s two:

• Using A Mac
• Using Windows

After creating the Certificate Authority and certificates, you should end up with three files, the CA certificate, a TLS certificate, and a private key file. Besides these three files, it’s very important that you trusted the CA certificate in your operating system. Create a new directory in the root of your web project and call it “certs”. Move all three files to that directory.

If your project does not have a vue.config.js file, create one in the root of the project. Vue uses this file to hook into WebPack when running and building your site. Add the following to that file:

'use strict'

const fs = require('fs')
const appRoot = process.cwd()

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    https: {
      key: fs.readFileSync(`${appRoot}/certs/server.key`),
      cert: fs.readFileSync(`${appRoot}/certs/server.crt`),
      ca: fs.readFileSync(`${appRoot}/certs/rootCA.pem`)
    },
    hotOnly: true
  }
}

Of course, you’ll need to substitute your filenames for the files in my code snippet. The snippet allows WebPack to use the Node.js built-in fs library and it acquires the current working directory (cwd) in order to get an absolute path to your certificate files. The WebPack devServer then uses those to serve up your site locally over https.