Quasar: [Request] Adding https to development server

[chrzrdx]

Need for developing locally with https

• To keep the local dev environment and the actual production environment as similar as possible

Requirements

• Frontend should be accessible at https://localhost:8080 (as well as http://localhost:8080)
• Option to choose a self signed certificate or one from someplace like LetsEncrypt
• Preferably an option to force serving static files (locally) over https, and forcing ssl in general on that port.

Current attempt at solving this issue with the codebase (0.14.0-beta)

• Generated self signed certificate with openssl
• Trying to add https module to the build/script.dev.js file, but can't figure out where to call the https.createServer() to start serving on https (not sure if this is what I should be calling anyway).

EDIT: [SEE BELOW FOR UPDATED WORKING APPROACH]

(see: http://blog.mgechev.com/2014/02/19/create-https-tls-ssl-application-with-express-nodejs/ )

Possible alternatives

• Serve the frontend with a custom ngrok domain (https://ngrok.com/docs#subdomain): This is so that the frontend in development always gets served from the same address.
• Use webpack-dev-server (has --https mode) instead of express: But this would entail a lot of the build code being re-written.

[murbanowicz]

I think there is no point to use https on dev.
Https does not affect your app at all as it happens between browser and server.
Waste of time in my opinion.

[chrzrdx]

Oh, okay. Just that there are a few issues with https that can plague an app during production (esp, with API proxying), and since most leading frameworks give the option of running the app locally over SSL/TLS, quasar might benefit from adopting a similar practice .

I'll just leave what worked for me, in case someone comes looking for how to run a quasar app locally with https:

Generate a self signed certificate:

Navigate to build folder

cd build
mkdir cert
cd cert
openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
openssl rsa -in keytmp.pem -out key.pem

Then, edit build/script.dev.js replacing:

module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }

  // open browser if set so in /config/index.js
  if (config.dev.openBrowser) {
    devMiddleware.waitUntilValid(function () {
      opn(uri)
    })
  }
})

with:

// setup https
var
  https = require('https'),
  fs = require('fs')

var pkey = fs.readFileSync(process.cwd() + '/build/cert/key.pem')
var pcert = fs.readFileSync(process.cwd() + '/build/cert/cert.pem')

var options = {
  key: pkey,
  cert: pcert,
  requestCert: false,
  rejectUnauthorized: false
}

var server = https.createServer(options, app)

module.exports = server.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }

  // open browser if set so in /config/index.js
  if (config.dev.openBrowser) {
    devMiddleware.waitUntilValid(function () {
      opn('https://localhost:' + port)
    })
  }
})

You'll need to add the https and fs to the devdependencies of either npm or yarn, eg:

yarn add https fs -D

Then, run quasar dev to serve the app at https://localhost:8080 (or whichever port was defined)

I'm leaving the issue open, in case someone wishes to continue the discussion, but the maintainers can close this issue when they see fit. :)

[maxapps]

@murbanowicz
To the best of my knowledge, https is a requirement if you want to use some of the modern browser features such as geolocation. This makes developing mobile applications a major pain in the butt if you have to upload to a working server every time you make a code change. I've toyed with using GhostLab with generic Vue to get around this issue but have just started evaluating Quasar.

@chrzrdx
Thanks for the information on modifying the dev script. I'll try that before resorting to GhostLab.

[maxapps]

@chrzrdx
The method you presented works fantastic on the desktop but not on a mobile device using the Quasar
Play app. I get a message stating, "_Request was denied for security_". Not sure if anything can be done about this.

Thanks anyway

[Frondor]

This is not a waste of time in my opinion. One of Quasar's strong points is mobile development, and debugging many HTML5 APIs requires secure connections. There must be some option to allow the dev server to operate over https somehow.

I'd like to know what does @rstoenescu think about it.

[rstoenescu]

HTTPS option already available in future v0.15 brand new starter kit ;)

[migarol]

@rstoenescu

I am running Quasar 0.17.23
I have configured Cloudflare SSL
And added https: true on my quasar.conf

I get error 522

Any ideas?