Merge pull request #1 from ucdavis/swe/AddVite

sprucely · web-flow · commit 60d1eb4e0466 · 2024-01-12T14:34:27.000-08:00
Add support for Vite dev server
diff --git a/MvcReact.csproj b/MvcReact.csproj
@@ -5,7 +5,7 @@
     <PackageReadmeFile>README.md</PackageReadmeFile>
     <PackageLicenseFile>LICENSE.txt</PackageLicenseFile>
     <PackageProjectUrl>https://github.com/ucdavis/MvcReact</PackageProjectUrl>
-    <Version>1.0.0</Version>
+    <Version>2.0.0</Version>
     <Authors>Spruce Weber-Milne</Authors>
     <Company>UC Davis</Company>
     <Description>Library to simplify setup of AspNetCore app that serves both Mvc and React pages</Description>
diff --git a/README.md b/README.md
@@ -4,13 +4,18 @@
 
 
 # MvcReact
-Library to simplify setup of AspNetCore app that serves both Mvc and React pages
+Library to simplify setup of AspNetCore app that serves both Mvc and React pages.
+Supported dev servers are CRA (Webpack) and Vite.
 
 ## Installation
 ```bash
 dotnet add package MvcReact
+# to install vite dependencies
+cd ClientApp
+npm install -D vite @vitejs/plugin-react
 ```
 
+
 ## Usage
 
 Add a using statement in your app initialization code (usually `Program.cs` or `Startup.cs`)
@@ -19,29 +24,53 @@ Add a using statement in your app initialization code (usually `Program.cs` or `
 using MvcReact;
 ```
 
-Initialize services
+Initialize CRA services
 
 ```csharp
-services.AddMvcReact();
+services.AddCraServices();
 ```
 
 Or for explicit control over settings...
 
 ```csharp
-services.AddMvcReact(options =>
+services.AddCraServices(options =>
 {
     options.SourcePath = "ClientApp";
     options.BuildPath = "ClientApp/build";
     options.IndexHtmlPath = "ClientApp/build/index.html";
     options.StaticAssetBasePath = "/static";
     options.StaticAssetHeaderCacheMaxAgeDays = 365;
-    options.DevServerBundlePath = "/static/js/bundle.js";
+    options.CraDevServerBundlePath = "/static/js/bundle.js";
     options.DevServerStartScript = "start";
+    options.DevServerPort = 3000;
     options.TagHelperCacheMinutes = 30;
     options.ExcludeHmrPathsRegex = "^(?!ws|.*?hot-update.js(on)?).*$";
 });
 ```
 
+Initialize Vite services
+
+```csharp
+services.AddViteServices();
+```
+
+Or for explicit control over settings...
+
+```csharp
+services.AddViteServices(options =>
+{
+    options.SourcePath = "ClientApp";
+    options.BuildPath = "ClientApp/build";
+    options.IndexHtmlPath = "ClientApp/build/index.html";
+    options.StaticAssetBasePath = "/static";
+    options.StaticAssetHeaderCacheMaxAgeDays = 365;
+    options.DevServerStartScript = "start";
+    options.DevServerPort = 5173;
+    options.ViteDevServerEntry = "/index.tsx";
+    options.TagHelperCacheMinutes = 30;
+});
+```
+
 `UseMvcReactStaticFiles` and `UseMvcReact` are the important extension methods here, along with `MvcReactOptions.ExcludeHmrPathsRegex` for letting hmr requests fall through
 
 ```csharp
@@ -100,4 +129,50 @@ Use `<react-scripts />` and `<react-styles />` tag helpers to embed relavent tag
 {
     <react-scripts />
 }
-```
+```
+
+Configuring Vite
+
+```typescript
+import { UserConfig, defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig(async ({ mode }) => {
+  // Load app-level env vars to node-level env vars.
+  const env = { ...process.env, ...loadEnv(mode, process.cwd()) };
+  process.env = env;
+
+  const config: UserConfig = {
+    root: "src",
+    publicDir: "public",
+    build: {
+      outDir: "build",
+      // rollupOptions beyond scope of this snippet
+    },
+    plugins: [react()],
+    optimizeDeps: {
+      include: [],
+    },
+    server: {
+      port: 5173,
+      hmr: {
+        clientPort: 5173,
+      },
+      strictPort: true,
+    },
+  };
+
+  return config;
+});
+```
+
+Vite tends to leave orphaned node processes after a debugging session. This can be addressed by
+having the npm start script kill the node process listening on a given port.
+
+```json
+{
+  "scripts": {
+    "start": "npx kill-port 5173 && vite"
+  }
+}
+```
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
@@ -8,7 +8,7 @@ variables:
   solution: "**/*.sln"
   buildPlatform: "Any CPU"
   buildConfiguration: "Release"
-  majorVersion: 1
+  majorVersion: 2
   minorVersion: 0
   patchVersion: $[counter(variables['minorVersion'], 0)]
   version: $(majorVersion).$(minorVersion).$(patchVersion)
diff --git a/src/ApplicationBuilderExtensions.cs b/src/ApplicationBuilderExtensions.cs
@@ -12,12 +12,16 @@ public static class ApplicationBuilderExtensions
 {
     public static IApplicationBuilder UseMvcReact(this IApplicationBuilder app)
     {
+        // MS suggested hack to ensure correct ordering of routing and spa middleware
+        app.UseEndpoints(e => { });
+
         var env = app.ApplicationServices.GetRequiredService<IWebHostEnvironment>();
         var options = app.ApplicationServices.GetRequiredService<IOptions<MvcReactOptions>>().Value;
 
         app.UseSpa(spa =>
         {
             spa.Options.SourcePath = options.SourcePath;
+            spa.Options.DevServerPort = options.DevServerPort;
 
             if (env.IsDevelopment())
             {
diff --git a/src/DevServerType.cs b/src/DevServerType.cs
@@ -0,0 +1,7 @@
+namespace MvcReact;
+
+public static class DevServerType
+{
+    public const string Vite = "Vite";
+    public const string CRA = "CRA";
+}
diff --git a/src/MvcReactOptions.cs b/src/MvcReactOptions.cs
@@ -12,7 +12,23 @@ public class MvcReactOptions
     /// The path to the js bundle served by the CRA dev server
     /// </summary>
     /// <value></value>
-    public string DevServerBundlePath { get; set; } = "";
+    public string CraDevServerBundlePath { get; set; } = "";
+
+    /// <summary>
+    /// The path to the entry point for the Vite dev server
+    /// </summary>
+    public string ViteDevServerEntry { get; set; } = "main.tsx";
+
+    /// <summary>
+    /// The type of dev server used (CRA or Vite)
+    /// </summary>
+    public string DevServerType { get; set; } = MvcReact.DevServerType.CRA;
+
+    /// <summary>
+    /// The path to the js bundle served by the CRA dev server
+    /// </summary>
+    /// <value></value>
+    public int DevServerPort { get; set; } = 3000;
 
     /// <summary>
     /// The npm script to start the CRA dev server
diff --git a/src/ServiceCollectionExtensions.cs b/src/ServiceCollectionExtensions.cs
@@ -9,12 +9,12 @@ namespace MvcReact;
 
 public static class ServiceCollectionExtensions
 {
-        public static IServiceCollection AddMvcReact(this IServiceCollection services)
+        public static IServiceCollection AddCraServices(this IServiceCollection services)
         {
-            return services.AddMvcReact(_ => { });
+            return services.AddCraServices(_ => { });
         }
 
-        public static IServiceCollection AddMvcReact(this IServiceCollection services, Action<MvcReactOptions> configureOptions)
+        public static IServiceCollection AddCraServices(this IServiceCollection services, Action<MvcReactOptions> configureOptions)
         {
             Action<MvcReactOptions> optionBuilder = options =>
             {
@@ -24,14 +24,55 @@ public static IServiceCollection AddMvcReact(this IServiceCollection services, A
                 options.IndexHtmlPath = "ClientApp/build/index.html";
                 options.StaticAssetBasePath = "/static";
                 options.StaticAssetHeaderCacheMaxAgeDays = 365;
-                options.DevServerBundlePath = "/static/js/bundle.js";
+                options.CraDevServerBundlePath = "/static/js/bundle.js";
                 options.DevServerStartScript = "start";
+                options.DevServerType = DevServerType.CRA;
+                options.DevServerPort = 3000;
                 options.TagHelperCacheMinutes = 30;
                 options.ExcludeHmrPathsRegex = "^(?!ws|.*?hot-update.js(on)?).*$";
 
                 // allow for custom config...
                 configureOptions(options);
             };
+
+            AddReactMvcServices(services, optionBuilder);
+            
+            return services;
+        }
+
+        public static IServiceCollection AddViteServices(this IServiceCollection services)
+        {
+            return services.AddViteServices(_ => { });
+        }
+
+        public static IServiceCollection AddViteServices(this IServiceCollection services, Action<MvcReactOptions> configureOptions)
+        {
+            Action<MvcReactOptions> optionBuilder = options =>
+            {
+                // default config happens here
+                options.SourcePath = "ClientApp";
+                options.BuildPath = "ClientApp/build";
+                options.IndexHtmlPath = "ClientApp/build/index.html";
+                options.StaticAssetBasePath = "/static";
+                options.StaticAssetHeaderCacheMaxAgeDays = 365;
+                options.DevServerStartScript = "start";
+                options.DevServerType = DevServerType.Vite;
+                options.DevServerPort = 5173;
+                options.ViteDevServerEntry = "/index.tsx";
+                options.TagHelperCacheMinutes = 30;
+
+
+                // allow for custom config...
+                configureOptions(options);
+            };
+
+            AddReactMvcServices(services, optionBuilder);
+            
+            return services;
+        }
+
+        private static void AddReactMvcServices(IServiceCollection services, Action<MvcReactOptions> optionBuilder)
+        {
             services.Configure(optionBuilder);
 
             // not sure if there is a better way to get at the options here
@@ -46,7 +87,6 @@ public static IServiceCollection AddMvcReact(this IServiceCollection services, A
             services.AddScoped<IInternalFileProvider>(_ => new InternalFileProvider(Directory.GetCurrentDirectory()));  // lgtm [cs/local-not-disposed] 
             services.AddTransient<ITagHelper, ReactScriptsTagHelper>();
             services.AddTransient<ITagHelper, ReactStylesTagHelper>();
-            return services;
         }
 
 }
diff --git a/src/TagHelpers/ReactScriptsTagHelper.cs b/src/TagHelpers/ReactScriptsTagHelper.cs
@@ -34,10 +34,34 @@ public override async Task ProcessAsync(TagHelperContext context, TagHelperOutpu
 
         if (string.Equals(environment, Constants.ENVIRONMENT_DEVELOPMENT, StringComparison.OrdinalIgnoreCase))
         {
-            // in development, we want to use the CRA dev server and not cache anything
-            output.TagName = "script";
-            output.Attributes.Add("src", _options.DevServerBundlePath);
-            output.TagMode = TagMode.StartTagAndEndTag;
+            // in development, we want to use the dev server and not cache anything
+            switch (_options.DevServerType)
+            {
+                case DevServerType.CRA:
+                    output.TagName = "script";
+                    output.Attributes.Add("src", _options.CraDevServerBundlePath);
+                    output.TagMode = TagMode.StartTagAndEndTag;
+                    break;
+                case DevServerType.Vite:
+                    // set TagName null in order to allow explicitly set content  
+                    output.TagName = null;
+                    // Vite doesn't have an opportunity to inject @react-refresh init code when it's not serving index.html,
+                    // so we have to do it manually
+                    output.Content.SetHtmlContent($@"
+                        <script type=""module"">
+                            import RefreshRuntime from ""http://localhost:{_options.DevServerPort}/@react-refresh""
+                            RefreshRuntime.injectIntoGlobalHook(window)
+                            window.$RefreshReg$ = () => {{}}
+                            window.$RefreshSig$ = () => (type) => type
+                            window.__vite_plugin_react_preamble_installed__ = true
+                        </script>                    
+                        <script type=""module"" src=""http://localhost:{_options.DevServerPort}/@vite/client""></script>
+                        <script type=""module"" src=""http://localhost:{_options.DevServerPort}{_options.ViteDevServerEntry}""></script>
+                        ");
+                    break;
+                default:
+                    throw new Exception($"Unknown dev server type: {_options.DevServerType}");
+            }
             return;
         }
 

Original file line number	Diff line number	Diff line change
`@@ -12,12 +12,16 @@ public static class ApplicationBuilderExtensions`
`12`	`12`	`{`
`13`	`13`	`public static IApplicationBuilder UseMvcReact(this IApplicationBuilder app)`
`14`	`14`	`{`
	`15`	`+ // MS suggested hack to ensure correct ordering of routing and spa middleware`
	`16`	`+ app.UseEndpoints(e => { });`
	`17`	`+`
`15`	`18`	`var env = app.ApplicationServices.GetRequiredService<IWebHostEnvironment>();`
`16`	`19`	`var options = app.ApplicationServices.GetRequiredService<IOptions<MvcReactOptions>>().Value;`
`17`	`20`
`18`	`21`	`app.UseSpa(spa =>`
`19`	`22`	`{`
`20`	`23`	`spa.Options.SourcePath = options.SourcePath;`
	`24`	`+ spa.Options.DevServerPort = options.DevServerPort;`
`21`	`25`
`22`	`26`	`if (env.IsDevelopment())`
`23`	`27`	`{`