Mumrich.SpaDevMiddleware 1.6.0

Mumrich.SpaDevMiddleware

• Mumrich.SpaDevMiddleware
  • Prerequisites
  • Usage
    • Troubleshooting
    • Credits
  • License
  • Changelog
    • 1.6
      • Features
    • 1.5
      • Features
      • Breaking Changes

A .NET Middleware for ASP.NET Core that automatically integrates (multiple) Single-Page-Apps in a .NET-Webhost.

• Automatic node-package install (npm/yarn/pnpm)
• SPAs are automatically built upon (dotnet publish triggers the build-script in package.json)
• Automatic path-mapping for the SPA by aid of the superb YARP
• SPA Hot-Reloading supported
• Custom-ENV-Variables can be passed to the Node-Instance via appsettings.json
• Usage of MSBUILD-Variables supported

Prerequisites

• .NET 10+
• Node.js (for development and build of the SPA)
• Either npm, yarn or pnpm as Node-Package-Manager (depending on your choice)

Usage

1. Install the Mumrich.SpaDevMiddleware Nuget-Package into your Web-Project.

2. Modify the csproj-file by adding the following ItemGroup and adjust the values accordingly:

   <ItemGroup>
     <SpaRoot Include="MyApp\">
       <InstallCommand>npm install</InstallCommand>
       <BuildCommand>npm run build</BuildCommand>
       <BuildOutputPath>MyApp\dist\**</BuildOutputPath>
     </SpaRoot>
   </ItemGroup>
   

3. Implement the ISpaDevServerSettings-interface:

   public class AppSettings : ISpaDevServerSettings
   {
     public Dictionary<string, SpaSettings> SinglePageApps { get; set; } = new();
     public string SpaRootPath { get; set; } = Directory.GetCurrentDirectory();
   }
   

4. Extend appsettings.json with a SPA-Config e.g.:

   {
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*",
     "SinglePageApps": {
       "/": {
         "DevServerAddress": "http://localhost:3000/",
         "SpaRootPath": "MyApp",
         "NodePackageManager": "Npm"
       }
     }
   }
   

5. Register Services and setup app e.g.:

   using Mumrich.SpaDevMiddleware.Extensions;
   
   var builder = WebApplication.CreateBuilder(args);
   var appSettings = builder.Configuration.Get<AppSettings>();
   
   builder.SetupSpaDevMiddleware(appSettings);
   
   var app = builder.Build();
   
   app.MapSinglePageApps(appSettings);
   
   app.Run();
   

6. When using hot-reloading, adapt your SPA-bundling-setup accordingly to accept the .NET-Webhost-Proxy on the correct Port. Custom-ENV-Variables can be passed via appsettings.json e.g for vite.config.ts:

   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue()],
     server: {
       host: true,
       port: 3000,
       strictPort: true,
     },
   });
   

7. Run the app (dotnet run), navigate to the .NET-Web-host-Url and enjoy 👌!

Troubleshooting

• See the working Example in the Mumrich.SpaDevMiddleware.Demo.WebHost-folder.

Credits

• Thx to aspnetcore-vueclimiddleware for providing insights how to handle console-output.
• Thx to AspNetCore.SpaYarp for providing idea and insights to use YARP.
• Thx to YARP for providing such a wonderfull tool.

License

This project is licensed under the MIT License - see the LICENSE.txt file for details.

Changelog

1.6

Features

• Improved startup: the middleware is waiting for the dev server to be ready (UseWaitForDevServerMiddleware)
• (Windows only) Improved Debug-Handling: the middleware is now registering a ChildProcessTracker that automatically kills all child-processes of the dev-server-process when the .NET-Webhost is stopped. This prevents orphaned node-processes when stopping the .NET-Webhost via Debug-Stop (Shift+F5) in Visual Studio.

1.5

Features

• .NET 10 Support

Breaking Changes

• Obsolete method RegisterSinglePageAppDevMiddleware removed