CODEWITHSUNDEEP
javascriptnode.jssslvue.js
exhuma
exhuma

Reputation: 21727

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

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

Upvotes: 3

Views: 10179

Answers (2)

Everistus Olumese
Everistus Olumese

Reputation: 391

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

Upvotes: 3

user8556290
user8556290

Reputation:

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

Upvotes: 1

Related Questions