loading...

Discussion on: How to setup HTTPS locally with create-react-app

Collapse
permanar profile image
Richie Permana

Very great and useful article. I didn't know it was so easy to setting up local development HTTPS with mkcert!
How we do this with Vue?

Collapse
ganeshagrawal profile image
Ganesh Agrawal Author

It's my pleasure you liked it. Yes sure, for vue you have to follow these process after generating a certificate:

  1. You have to first note down the path of your local CA. for that run these commands in the bash terminal
# for checking CA path
mkcert -CAROOT
# /home/hades/.local/share/mkcert

cd /home/hades/.local/share/mkcert
ls
# rootCA-key.pem  rootCA.pem
#copy the rootCA.pem path

mkcert ca root

In your vue project root dir create vue.config.js file or made the respective change if already exits:

// vue.config.js
var fs = require('fs');

module.exports = {
  //...
  devServer: {
    //...
    https: true,
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt'),
    ca: fs.readFileSync('/path/to/ca.pem'),
  }
};

Here key & cert file generated at time of localhost certificate generation so use that path. in my case, that was ./.cert/key.pem and ./.cert/cert.pem.
ca path we already copied in the last step that was /home/hades/.local/share/mkcert/rootCA.pem

Note: In most of the case, you do not require to set `ca`. If your browser giving not trusted certificate then use that.

For more reference checkout Docs.

Thanks for reading this article. 😊

Some comments have been hidden by the post's author - find out more