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.csrEnter 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:
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.