CODEWITHSUNDEEP
httpswebpackvue.js
Raed Alahmad
Raed Alahmad

Reputation: 1055

How to run Vue.js dev serve with https?

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

Upvotes: 104

Views: 130770

Answers (10)

MonoThreaded
MonoThreaded

Reputation: 12043

The following worked for me, provided this was for a development instance and I didn't need to have a proper certificate.

Install basic ssl in dev npm i -d @vite/plugin-basic-ssl

Add bsicSsl to vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// Added one import
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [vue(),basicSsl()], // added basicSsl()
})

When I restared the server, everything turned out https

PS C:\some_directory> npm run dev -- --host 

> [email protected] dev
> vite --host


  VITE v4.5.3  ready in 363 ms

  ➜  Local:   https://localhost:5173/    
  ➜  Network: https://192.168.1.45:5173/ 
  ➜  press h to show help

Chrome was still complaining about cert validity but could ignore it for my use case.

Upvotes: 0

dotNET
dotNET

Reputation: 35400

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"),
    }
  }
}

Vite Setup

If you have moved from Webpack to Vite (and you should), running dev server on HTTP is as simple as this:

  1. Install package vite-plugin-mkcert using npm or yarn.

  2. Add this to the top of your vite.config.(m)ts file:

    import mkcert from 'vite-plugin-mkcert'
import dns from 'dns'
dns.setDefaultResultOrder('verbatim')

  3. Add mkcert() to your plugins array in the same file:

    export default defineConfig({
  plugins: [
    ...
    mkcert(),
    ...
  ],
  ...
}

  4. Add `server option at the end of same file:

    server: {
   port: 3000,
   host: 'whatever.test',
},

  5. Add whatever.test to your hosts file.

Upvotes: 5

sMyles
sMyles

Reputation: 2666

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/'
    }
}

Upvotes: 3

Rayan Jain
Rayan Jain

Reputation: 311

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

Upvotes: 31

Chad Carter
Chad Carter

Reputation: 2028

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!

Upvotes: 106

pinki
pinki

Reputation: 970

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.

Upvotes: 8

choasia
choasia

Reputation: 10852

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.

Upvotes: 17

Jianwu Chen
Jianwu Chen

Reputation: 6023

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

Upvotes: 139

Dontreadonme
Dontreadonme

Reputation: 334

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

Upvotes: 4

phil294
phil294

Reputation: 10852

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

https: true

Upvotes: 20

Related Questions