Run vuejs development server with SSL (to serve over HTTPS)

Question

Important Detail & Workaround: I've come across this: "Deprecating Powerful Features on Insecure Origins"

This explains that HTTPS is enforced on external hosts. I have my development environment on my laptop and, on the weekend I SSH into that box, which is why I ran into this problem yesterday. I run the vuejs dev server remotely on the laptop, making it listen to 0.0.0.0 and open the page on my desktop. This causes the problem.

I've tried using SSH port forwarding to localhost. This worked and is an acceptable workaround for me.

The original question still remains valid. I will leave it open for now.

I'm working with a JS API which requires SSL (WebRTC). So to do development, I need to run the dev server over HTTPS. How can I do that with vuejs?

I've quickstarted the project using webpack. I found some links explaining how to run webpack-dev-server over SSL but I don't know how to do that with a vuejs application. I'm incredibly green considering everything that's JavaScript & NPM. The webpack links all mention a config file, but there is no such file in my project. The closest I see is the "main.js" but there is absolutely no configuration in there.

In essence, what I have is the result of the following steps:

mkdir demo
cd demo
npm install --save-dev vue-cli
./node_modules/.bin/vue init vuetifyjs/webpack-advanced demo

# Use the defaults here (except for "Vue build" I used "Runtime-only")

cd demo
npm install
npm run dev  # <-- This is the command I would like to use SSL in

@exhumai Hi i can help you for node.js but why vue.js should be different?? — user8556290
– user8556290, Commented Oct 21, 2017 at 16:16
I don't really know. It is pretty much the first application I am trying to write in JS using a dev web server like this. I have not used webpack by itself just yet. I find the development workflow with vuejs easy to get started with. Except that I am now struggling with the HTTPS issue — exhuma
– exhuma, Commented Oct 21, 2017 at 16:30
i just put an example based on express fs and https adding certificat based on key generated by openssl needed. Regards. — user8556290
– user8556290, Commented Oct 21, 2017 at 17:18
Are you sure you need the Webpack dev server to be https? The dev server is purely for live reloading (as you change the code, the website will use the new code without a full refresh), it is only used in development and shouldn’t interact with this API you mentioned. Maybe you need an actual node server to be https? Also Vue doesn’t have anything to do with https, Vue is client side and https is a server issue. — Eric Guan
– Eric Guan, Commented Oct 21, 2017 at 22:25
@EricGuan exhuma just started a node project i think he don't really known how to drive webpack on https isn't really a matter here the way is how to add and generate from nodejs own SSL i guess is what i understand. For doing a webpack on https what we have to do is just to call the web pack with a https as arguments like this : webpack-dev-server --https in this cas we don't worries about how to do them self. But if you got a solution about this take the car and drive him if you wanted. Let me known. Regards. — user8556290
– user8556290, Commented Oct 21, 2017 at 23:12

Jai Kumar Rajput · Accepted Answer · 2018-02-20 08:30:19Z

3

I don't know if you still have this problem or if any other person still encounters it but I found a solution.

Follow the instruction above to generate an openssl key and cert in your working folder.

In /node_modules/webpack-dev-server/bin/webpack-dev-server.js change this line from:

 key: {

    type: 'string',

    describe: 'Path to a SSL key.',

    group: SSL_GROUP

  },

  cert: {

    type: 'string',

    describe: 'Path to a SSL certificate.',

    group: SSL_GROUP

  },

to:

key: {

    type: 'string',

    describe: fs.readFileSync('key.pem'),

    group: SSL_GROUP

  },

  cert: {

    type: 'string',

    describe: fs.readFileSync('cert.pem'),

    group: SSL_GROUP
  },

then set

argv.https = true;

That is all I had to do to have my code served from https.

Note that the command line will still read http://localhost:8080, but when you use https in the browser, your app will be displayed after warning from the browser

edited Feb 20, 2018 at 8:30

Jai Kumar Rajput

4,2273 gold badges41 silver badges67 bronze badges

answered Feb 20, 2018 at 8:18

Everistus Olumese

3911 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2017-10-21 23:16:24Z

1

Requirement openssl installed :

First we have to generate SSL certificat based on a key made by openssl and without pass phrase cos this will generate an error.

nodejs https>node server.js _tls_common.js:87 c.context.setKey(options.key); ^ Error: error:0907B068:PEM routines:PEM_READ_BIO_PRIVATEKEY:bad password read ...

Go inside your project start to create key & certificat :

openssl req -nodes -new -x509 -keyout key.pem -out cert.pem -days 365

-nodes : Don't encrypt the private keys at all.

Install the packages needed for your project : (--save to add to package.json)

npm install express --save
npm install https --save
npm install fs --save

now create the server file :

touch server.js
nano server.js

Copy/Paste : to server.js

var fs = require('fs');
var https = require('https');
var app = require('express')();
var options = {
   key  : fs.readFileSync('key.pem'),
   cert : fs.readFileSync('cert.pem')
};

app.get('/', function (req, res) {
   res.send('Hello World!');
});

https.createServer(options, app).listen(3000, function () {
   console.log('Started!');
});

In this cas we don't use 443 port because is already used by services, so i use the port 3000 unused by any app...

edited Oct 21, 2017 at 23:16

answered Oct 21, 2017 at 17:17

user8556290

6 Comments

exhuma Over a year ago

but that does not use the vuejs server? Not quite sure I understand. I already have something similar like that using uwsgi. But that does not help with .vue files.

user8556290 Over a year ago

@exhuma If you want i use vuejs i need you part of server. post it. i need too the requieremnt modules if is needed.

exhuma Over a year ago

There is nothing special to post. Give me a second. I'll edit the original question to add an example of how to set up a vue project (basically giving a file tree like the one I have).

user8556290 Over a year ago

@exhuma ok thanks or send me the url where you did it ;). I have to go in 15min. and came back in 5hours.

exhuma Over a year ago

Just edited the original question. I'll be gone in a few minutes as well. And then it will be night time over here. So I'll probably see your reply tomorrow :P

|

Collectives™ on Stack Overflow

Run vuejs development server with SSL (to serve over HTTPS)

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related