Merge pull request #53 from T0shik/feature/https-support

HTTPS Support

Author: EEParker

README.md

@@ -159,6 +159,36 @@ You may also need to add the following tasks to your csproj file. This are simil
 
 ```
 
+## Setting up for HTTPS
+
+For consistent schemas & for hot reload to not break while using https you will need to setup
+your vue app, before enabling the `https` flag.
+
+1. Get the `mkcert` tool following the installation instructions on their [github](https://github.com/FiloSottile/mkcert) repository or their [releases](https://github.com/FiloSottile/mkcert/releases)
+2. Install root CA `mkcert -install`
+3. Generate the certificates `mkcert localhost 127.0.0.1 <local ipv4> ::1` 
+4. Add certificates to `vue.config.js`
+```
+const fs = require('fs')
+
+module.exports = {
+    devServer: {
+        https: {
+            key: fs.readFileSync('./certs/localhost+3-key.pem'),
+            cert: fs.readFileSync('./certs/localhost+3.pem'),
+        }
+    }
+}
+```
+5. you can now set the https option to true.
+```
+endpoints.MapToVueCliProxy(
+                    ...
+                    https: true
+                    ...
+                    );
+```
+
 ## History
 
 Due to the discussion [here](https://github.com/aspnet/JavaScriptServices/pull/1726), it was decided to not be included in the Microsoft owned package.

src/VueCliMiddleware/VueDevelopmentServerMiddleware.cs

@@ -18,7 +18,7 @@ internal static class VueCliMiddleware
 
         public static void Attach(
             ISpaBuilder spaBuilder,
-            string scriptName, int port = 8080, ScriptRunnerType runner = ScriptRunnerType.Npm, string regex = DefaultRegex, bool forceKill = false)
+            string scriptName, int port = 8080, bool https = false, ScriptRunnerType runner = ScriptRunnerType.Npm, string regex = DefaultRegex, bool forceKill = false)
         {
             var sourcePath = spaBuilder.Options.SourcePath;
             if (string.IsNullOrEmpty(sourcePath))
@@ -39,10 +39,8 @@ public static void Attach(
             // Everything we proxy is hardcoded to target http://localhost because:
             // - the requests are always from the local machine (we're not accepting remote
             //   requests that go directly to the vue-cli server)
-            // - given that, there's no reason to use https, and we couldn't even if we
-            //   wanted to, because in general the vue-cli server has no certificate
             var targetUriTask = portTask.ContinueWith(
-                task => new UriBuilder("http", "localhost", task.Result).Uri);
+                task => new UriBuilder(https ? "https" : "http", "localhost", task.Result).Uri);
 
             SpaProxyingExtensions.UseProxyToSpaDevelopmentServer(spaBuilder, () =>
             {

src/VueCliMiddleware/VueDevelopmentServerMiddlewareExtensions.cs

@@ -22,12 +22,14 @@ public static class VueCliMiddlewareExtensions
         /// <param name="spaBuilder">The <see cref="ISpaBuilder"/>.</param>
         /// <param name="npmScript">The name of the script in your package.json file that launches the vue-cli server.</param>
         /// <param name="port">Specify vue cli server port number. If &lt; 80, uses random port. </param>
+        /// <param name="https">Specify vue cli server schema </param>
         /// <param name="runner">Specify the runner, Npm and Yarn are valid options. Yarn support is HIGHLY experimental.</param>
         /// <param name="regex">Specify a custom regex string to search for in the log indicating proxied server is running. VueCli: "running at", QuasarCli: "Compiled successfully"</param>
         public static void UseVueCli(
             this ISpaBuilder spaBuilder,
             string npmScript = "serve",
             int port = 8080,
+            bool https = false,
             ScriptRunnerType runner = ScriptRunnerType.Npm,
             string regex = VueCliMiddleware.DefaultRegex,
             bool forceKill = false)
@@ -44,7 +46,7 @@ public static void UseVueCli(
                 throw new InvalidOperationException($"To use {nameof(UseVueCli)}, you must supply a non-empty value for the {nameof(SpaOptions.SourcePath)} property of {nameof(SpaOptions)} when calling {nameof(SpaApplicationBuilderExtensions.UseSpa)}.");
             }
 
-            VueCliMiddleware.Attach(spaBuilder, npmScript, port, runner: runner, regex: regex, forceKill: forceKill);
+            VueCliMiddleware.Attach(spaBuilder, npmScript, port, https: https, runner: runner, regex: regex, forceKill: forceKill);
         }
 
 
@@ -54,12 +56,13 @@ public static IEndpointConventionBuilder MapToVueCliProxy(
             SpaOptions options,
             string npmScript = "serve",
             int port = 8080,
+            bool https = false,
             ScriptRunnerType runner = ScriptRunnerType.Npm,
             string regex = VueCliMiddleware.DefaultRegex,
             bool forceKill = false)
         {
             if (pattern == null) { throw new ArgumentNullException(nameof(pattern)); }
-            return endpoints.MapFallback(pattern, CreateProxyRequestDelegate(endpoints, options, npmScript, port, runner, regex, forceKill));
+            return endpoints.MapFallback(pattern, CreateProxyRequestDelegate(endpoints, options, npmScript, port, https, runner, regex, forceKill));
         }
 
         public static IEndpointConventionBuilder MapToVueCliProxy(
@@ -68,38 +71,41 @@ public static IEndpointConventionBuilder MapToVueCliProxy(
             string sourcePath,
             string npmScript = "serve",
             int port = 8080,
+            bool https = false,
             ScriptRunnerType runner = ScriptRunnerType.Npm,
             string regex = VueCliMiddleware.DefaultRegex,
             bool forceKill = false)
         {
             if (pattern == null) { throw new ArgumentNullException(nameof(pattern)); }
             if (sourcePath == null) { throw new ArgumentNullException(nameof(sourcePath)); }
-            return endpoints.MapFallback(pattern, CreateProxyRequestDelegate(endpoints, new SpaOptions { SourcePath = sourcePath }, npmScript, port, runner, regex, forceKill));
+            return endpoints.MapFallback(pattern, CreateProxyRequestDelegate(endpoints, new SpaOptions { SourcePath = sourcePath }, npmScript, port, https, runner, regex, forceKill));
         }
 
         public static IEndpointConventionBuilder MapToVueCliProxy(
             this IEndpointRouteBuilder endpoints,
             SpaOptions options,
             string npmScript = "serve",
             int port = 8080,
+            bool https = false,
             ScriptRunnerType runner = ScriptRunnerType.Npm,
             string regex = VueCliMiddleware.DefaultRegex,
             bool forceKill = false)
         {
-            return endpoints.MapFallback("{*path}", CreateProxyRequestDelegate(endpoints, options, npmScript, port, runner, regex, forceKill));
+            return endpoints.MapFallback("{*path}", CreateProxyRequestDelegate(endpoints, options, npmScript, port, https, runner, regex, forceKill));
         }
 
         public static IEndpointConventionBuilder MapToVueCliProxy(
             this IEndpointRouteBuilder endpoints,
             string sourcePath,
             string npmScript = "serve",
             int port = 8080,
+            bool https = false,
             ScriptRunnerType runner = ScriptRunnerType.Npm,
             string regex = VueCliMiddleware.DefaultRegex,
             bool forceKill = false)
         {
             if (sourcePath == null) { throw new ArgumentNullException(nameof(sourcePath)); }
-            return endpoints.MapFallback("{*path}", CreateProxyRequestDelegate(endpoints, new SpaOptions { SourcePath = sourcePath }, npmScript, port, runner, regex, forceKill));
+            return endpoints.MapFallback("{*path}", CreateProxyRequestDelegate(endpoints, new SpaOptions { SourcePath = sourcePath }, npmScript, port, https, runner, regex, forceKill));
         }
 
 
@@ -109,6 +115,7 @@ private static RequestDelegate CreateProxyRequestDelegate(
             SpaOptions options,
             string npmScript = "serve",
             int port = 8080,
+            bool https = false,
             ScriptRunnerType runner = ScriptRunnerType.Npm,
             string regex = VueCliMiddleware.DefaultRegex,
             bool forceKill = false)
@@ -139,7 +146,7 @@ private static RequestDelegate CreateProxyRequestDelegate(
 
                 if (!string.IsNullOrWhiteSpace(npmScript))
                 {
-                    opt.UseVueCli(npmScript, port, runner, regex, forceKill);
+                    opt.UseVueCli(npmScript, port, https, runner, regex, forceKill);
                 }
             });