How to run Vue.js dev serve with https?

Question

I'm using Vue-cli to create vue project with webpack template. how to run it with https in development using: npm run dev?

Rokach

There is a more up to date answer below. Maybe it will be nice to mark it as the best answer to make it easier to find. – Barner

Answer 1

Webpack template uses express as the server for development. So just replace

var server = app.listen(port)

with following code in build/dev-server.js

var https = require('https');
var fs = require('fs');
var options = {
  key: fs.readFileSync('/* replace me with key file's location */'),
  cert: fs.readFileSync('/* replace me with cert file's location */'))
};
var server = https.createServer(options, app).listen(port);

Please note that in webpack template, http://localhost:8080 will be automatically opened in your browser by using opn module. So you'd better replace var uri = 'http://localhost:' + port with var uri = 'https://localhost:' + port for convenience.

Lelandleler

Thank you @choasia, it works perfect! I created key and cert files using: openssl genrsa -out localhost.key 2048 openssl req -new -x509 -key localhost.key -out localhost.cert -days 3650 -subj /CN=localhost all good, however browsers warned that the site is not trusted. I imported the certificate to "Trusted Root Certificate Authority" (in windows) then worked in IE but not in chrome nor Firefox, any thoughts ? Thanks – Rokach

Hi, does this help? #7581008 – Lelandleler

Answer 2

In the latest vuejs (as of May 7, 2018), you need to add a "vue.config.js" in the project root directory:

vue.config.js:

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8085, // CHANGE YOUR PORT HERE!
    https: true,
    hotOnly: false,
  },
}

In this file, set the value: https: true

Gingili

this is the most up to date answer for projects using vue cli 3 – Gothic

So far I got. But chrome > 58 throws at net::ERR_CERT_COMMON_NAME_INVALID – Medic

Works great, but you only need the https: true part. The other variables are optional and not needed to use https. – Preempt

I still get ERR_CERT_AUTHORITY_INVALID in chrome. Is there a way to fix this in chrome? – Antennule

Has anyone managed to get around the `ERR_CERT_AUTHORITY_INVALID issue in Chrome? – Counsel

You can checkout my solution to see how to get around the ERR_CERT_AUTHORITY_INVALID issue. – Merilynmeringue

ERR_CERT_AUTHORITY_INVALID – Archaimbaud

I also get the ERR_CERT_AUTHORITY_INVALID error on Vivaldi (with the default port 8080). – Perceptual

Chrome throws ERR_CERT_AUTHORITY_INVALID because the certificate used is not issued by an acceptable Certificate Authority. You can bypass Chrome's warning by clicking Advanced and then Proceed to <host>. This way Chrome will temporarily accept this certificate. – Douglas

Please highlight "in the project root directory". I had the file in a src sub-directory and it didn't work untill I moved it to the root. Thank you for the answer! – Galiot

then how i can get the file .cert to add in keychain access on macOS ? if i am not do that, its shown cert is not secure and i get blocked to access because its look like incognite or trusted of ssl – Waterside

Answer 3

Jianwu Chen's answer helped me out, but to help those in the comments that wanted an expanded answer, I'm creating this answer. I hope it helps.

The questions are basically, how do we tell the browsers that "I know it is an invalid certificate, but I'm ok with it, because I'm developing a site locally."

So to try and make a full answer in one place, here it goes...

First, inside of vue.config.js make sure you include

const fs = require('fs')

module.exports = {
    devServer: {
        https: {
          key: fs.readFileSync('./certs/example.com+5-key.pem'),
          cert: fs.readFileSync('./certs/example.com+5.pem'),
        },
        public: 'https://localhost:8080/'
    }
}

You can obviously have other stuff in there, but the main thing is that you have https with children of key and cert. Now, you need to point to where your certificate file is.

Instead of simply setting https to true, we are passing an object with a key and cert to https.

We are telling vue cli we want to use this particular certificate and key.

How do we get that certificate and key? Well, we have to create it.

Fortunately, there is a tool that helps do this easily: https://mkcert.dev (currently points to https://github.com/FiloSottile/mkcert)

You can install it following the instructions in GitHub. I personally just grabbed the latest release from: https://github.com/FiloSottile/mkcert/releases

Then follow the instructions:

mkcert -install

followed by:

mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1

That will create the files in the directory.

Copy the files to your source folder referenced in the vue.config.js above (i.e. ./cert) and you should be good to go. Make sure you update the file names to match.

Update: Also note the config has:

public: 'https://localhost:8080/'

Thanks to @mcmimik for pointing this out in the comments. Without that line you'll get the console error he mentioned about ::ERR_CONNECTION_REFUSED. Adding this line to devServer as a sibling to https will kick that error to the curb. If you like this answer, make sure to like his comment too!

Merilynmeringue

Thanks a lot! It was easier than I thought. In my case I had to add one more option to devServer config to stop GET https://localhost/sockjs-node/info?t=1565111974584 net::ERR_CONNECTION_REFUSED errors in console: {public: 'https://localhost:8080/'} – Piaffe

When using Vuetify, I had to make a slight mod to this, otherwise I got an error: "[ERR_INVALID_ARG_TYPE]: The "options.cert" property must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Object". I made https: true and added the key and cert properties at the same level, properties of devServer. Then everything seemed to work as expected. – Fakery

Thank you Chad I keep coming back to this answer and its so useful. What I don't understand is what is the point of vue-cli if the app it generates can't even be run on chrome out of the box? Surely they can provide something like this when you run vue create? – Dextroamphetamine

@Dextroamphetamine I'm glad you find this helpful. My guess is if we didn't need a self-signed certificate that the vue cli could do it. And I'm sure they could hook into to a tool like mkcert above. It may be a good issue to bring up in their github repo - suggest they have an option to enable https which guides the user through generating a cert and then they set these values automatically. – Merilynmeringue

Thanks for your explanation, I followed your instructions line by line, so I generated the certs, but they don't have the same names as yours, I have got: rootCA-key.pem and rootCA.pem then I imported the files inside vuej.config as you pointed, but when I run the project I get ERR_SSL_KEY_USAGE_INCOMPATIBLE – Voyageur

It seems like mkcert broke or this approach may be broken. – Perceptual

It worked for me, thank you @ChadCarter 🙏 Although I still get a 307 redirect cors... ☹ – Scholem

If you are using a custom domain for example dev.domain.com as your localhost you will need to add 'disableHostCheck : true' but for some reason with this https cert install chrome 89 will crash everytime . – Hereabout

The real solution for the "must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Object" error is to convert to string, e.g. https: {key: fs.readFileSync('./key.pem').toString(), cert: fs.readFileSync('./cert.pem').toString()} – Casto

u save my life haha thanks instead of pusher we can use firebase where its not consume a cost. – Waterside

For all that despite are following this answer, note that the solution still working in 2024. What you might change here is the order of the mkcert -install command. It must be executed after the creation of the cert files. Because it will install the certs and ask you to authorize them. After running it you might be prompted to accept the certificate. – Pforzheim

Answer 4

If you are using vue ui to serve your application, a simple solution is to replace

 "serve": "vue-cli-service serve",

with

 "serve": "vue-cli-service serve --https true",

in the package.json file of your project.

Now use vue ui to serve your application. You can make even more changes. See https://cli.vuejs.org/guide/cli-service.html#using-the-binary

Fritillary

As an additional tip, you can allow https for localhost on chrome via: chrome://flags/#allow-insecure-localhost – Phiphenomenon

This is not a good idea, if you modify your package.json forcing to https the serve and you build up production your project you will get a full error – View

And how do we load the certificate? (many reasons to use this, WebRTC resting, Geo-location testing on iPhone, etc) – Snatch

Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “192.168.43.20” which could put your confidential information at risk. – Waterside

Answer 5

In /build/webpack.dev.conf.js,to devWepackConfig in devServer, add

https: true

Gigantes

Why is it downvoted? In my case, adding this option under devServer works perfectly. – Amygdalin

Works perfect on CLI 2 with Webpack 3 – Incidentally

Answer 6

You will still get the warning when running in Chrome or Edge, as the certificate is not a trusted certificate. But you can switch off the prompt when running the site by setting the following flag:

chrome://flags/#allow-insecure-localhost

This also works also in the latest version Edge.

Trisyllable

this save my day! – Overpass

Answer 7

Simplest way is to go into package.json and change "dev" to

 "dev": "webpack-dev-server --inline --progress  --https --config build/webpack.dev.conf.js",

it will still give the message running on http://localhost in the console but you can access the site on https://localhost

Armlet

Works: "scripts": { "serve": "vue-cli-service serve --https" } – Arlaarlan

@Nico Prat you should answer with this text, it works – Deserted

I used "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --https --key ./localhost.key --cert ./localhost.crt" that localhost.key and localhost.crt generated by mkcert. (vuejs 2.6.11) – Mineralize

Answer 8

If anyone is struggling with this in July 2022 and wants to use HTTPS with WebPack 5 (which recommends moving from https option to new server option) and get rid of the deprecation warning, please note that this has recently been fixed by Vue CLI team. You should update @vue/cli-service package to the latest version 5.0.8 and everything will starting behaving like it should. Now you can use the new server option in your vue.config.js file (make sure you have generated the certificates using mkcert):

devServer: {
  server:{
    type: 'https',
    options: {
      key: fs.readFileSync("./src/cert/your.site+3-key.pem"),
      cert: fs.readFileSync("./src/cert/your.site+3.pem"),
    }
  }
}

Orthopter

Answer 9

Going off of NearHuscarl answer, using Vue Cli with vue 3.0.0, key and cert had to be placed at the devServer level (not inside https). This is most likely due to the version of WebPack you're using, so check webpack configuration docs if you still can't figure it out

const fs = require('fs')

module.exports = {
    devServer: {
        https: true,
        key: fs.readFileSync('./certs/example.com+5-key.pem'),
        cert: fs.readFileSync('./certs/example.com+5.pem'),
        public: 'https://localhost:8080/'
    }
}

Quixotism