Support HTTPS in dev environment

[simont789]

Hi,

I've been trying to make dev server support HTTPS, but I can't quite make it happen.

What I did was making app.UseHttpsRedirection(); run in all envrionment, adding https: trueto vue.config.js and it serves as https. The problem is that chrome does not trust the dev-certs generated by asp.net core. I can't tell if it something about linking the certificate info in https: {....}, as I cannot see any similar setup in the official react template. Since Asp.net core 3.0 supports https, a better solution would be automatically uses the very same cert automatically.

Would be great if someone could tell me what I did wrong. Cheers!

Simon

[liborpansky]

Hi Simon,

I made several attempts to implement SSL support for dev environment, I already answered this question on Medium.

Actually I decided to develop without SSL certificate, because I didn’t manage to get it working in few hours I tried different configurations. You can set vue app to use HTTPS in vue.config.js by setting devServer: { https: true }, but it will use default SSL certificate, which will not be trusted by ASP.NET Core app. The solution could be to pass ASP.NET Core HTTPS development certificate (which is installed locally on developers machine by default) to webpack, but I’m not sure if it’s supported by Webpack and/or by Vue CLI.
If someone finds correct configuration, I would be happy to insert it to the article!

[simont789]

Digging through the VueCliMiddleware package I think it is purposely not supported

https://github.com/EEParker/aspnetcore-vueclimiddleware/blob/dde392749ad7d0152156829718faebf090c80431/src/VueCliMiddleware/VueDevelopmentServerMiddleware.cs#L34-L56

I think the trick is in the StartVueCliServerAsync method:

var envVars = new Dictionary<string, string>
    {
        { "PORT", portNumber.ToString() },
        { "DEV_SERVER_PORT", portNumber.ToString() }, // vue cli 3 uses --port {number}, included below
        { "BROWSER", "none" }, // We don't want vue-cli to open its own extra browser window pointing to the internal dev server port
    };
var npmScriptRunner = new ScriptRunner(sourcePath, npmScriptName, $"--port {portNumber:0}", envVars, runner: runner);

vue cli service documentation

The vue-cli-service serve command starts a dev server (based on webpack-dev-server ) that comes with Hot-Module-Replacement (HMR) working out of the box.

Webpack Devserver https argument

module.exports = {
  //...
  devServer: {
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
    }
  }
};

By getting the key, cert and ca from asp.net core app configuration I think it could work, haven' figured out how to this though 😅.

[TobbenTM]

PR #50 fixes this issue :)