Vue.js: develop with https

This is the setup I use to develop vue.js apps with https on localhost.

• Update your hosts file
• Generate a Certificate Authority (CA)
• Generate dev.local certificate and sign
• Update vue.config.js
• Test

Update hosts file

I don’t recommend using localhost for ssl / https. It’s a lot simpler to use a domain like dev.local, just add this to your /etc/hosts file:

127.0.0.1 dev.local

Test with ping:

% ping dev.local
PING dev.local (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.082 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.048 ms
^C

Create Certificates

Create a certs directory inside your project dir

mkdir certs
cd certs

The easy way: mkcert

Install mkcert, then run:

mkcert dev.local "*.local" localhost 127.0.0.1 ::1
mkcert -install

Update vue.config.js

const fs = require('fs')
module.exports = {
  devServer: {
    host: 'dev.local',
    port: 8080,
    https: {
      key: fs.readFileSync('./certs/dev.local+4-key.pem'),
      cert: fs.readFileSync('./certs/dev.local+4.pem'),
      //ca: fs.readFileSync('./certs/my-ca.crt')
    },
    disableHostCheck: true,
    proxy: {
      '^/api': {
        target: 'http://localhost:1337',
        changeOrigin: true
      },
    }
  }
}

Serve the app

npm run serve

Check the certificate in the browser

Local development with https is now enabled.

The long way…

I left this section is for you to try — it works but for some reason the browser thinks the cert is not valid. Let me know in the comments what you think?

Generate Certificate Authority (CA)

openssl genrsa -des3 -out my-ca.key 4096
openssl req -x509 -new -nodes -key my-ca.key -sha256 -days 2048 -out my-ca.crt

I used “My CA Certificate” for the Common Name. The other fields are optional.

Remember your passphrase (add it to your passwords app!)

New Key and Signing request (CSR)

% openssl genrsa -out dev.local.key 4096
% openssl req -new -key dev.local.key -out dev.local.csr
Enter pass phrase for dev.local.key:
You are about to be asked to enter information that will be incorporated into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter ‘.’, the field will be left blank.
— — -
Country Name (2 letter code) [AU]:GB
State or Province Name (full name) [Some-State]:Buckinghamshire
Locality Name (eg, city) []:Beaconsfield
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:dev.local
Email Address []:
Please enter the following ‘extra’ attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
All fields are optional, except the Common Name : dev.local

Make sure you put dev.local for the Common Name. The other values are optional.

Check your certificate

openssl req -in dev.local.csr -noout -text

Sign your certificate

openssl x509 -req -in dev.local.csr -CA my-ca.crt -CAkey my-ca.key -CAcreateserial -out dev.local.crt -days 1000 -sha256

Import the CA into keystore

On mac, open KeyChain Access and drag the my-ca.crt in. Double-click the certificate and update the trust as follows:

Double-click the cert to edit

Save and reopen to check trust is updated

The cert is valid as per the browser.

When the CA is trusted, Chrome/Brave will trust certificates signed by the CA.

If you like the content feel free to clap and subscribe to get updates.