MvcReact 2.0.6

dotnet add package MvcReact --version 2.0.6
NuGet\Install-Package MvcReact -Version 2.0.6
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="MvcReact" Version="2.0.6" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add MvcReact --version 2.0.6
#r "nuget: MvcReact, 2.0.6"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install MvcReact as a Cake Addin
#addin nuget:?package=MvcReact&version=2.0.6

// Install MvcReact as a Cake Tool
#tool nuget:?package=MvcReact&version=2.0.6

Build Status Build Status NuGet version (MvcReact)

MvcReact

Library to simplify setup of AspNetCore app that serves both Mvc and React pages. Supported dev servers are CRA (Webpack) and Vite.

Installation

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)

using MvcReact;

Initialize CRA services

services.AddCraServices();

Or for explicit control over settings...

services.AddCraServices(options =>
{
    options.SourcePath = "ClientApp";
    options.BuildPath = "ClientApp/build";
    options.IndexHtmlPath = "ClientApp/build/index.html";
    options.StaticAssetBasePath = "/static";
    options.StaticAssetHeaderCacheMaxAgeDays = 365;
    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

services.AddViteServices();

Or for explicit control over settings...

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

public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IOptions<MvcReactOptions> mvcReactOptions)
{
    app.UseStaticFiles();
    app.UseMvcReactStaticFiles();
    app.UseRouting();

    app.UseEndpoints(routes =>
    {
        if (env.IsDevelopment())
        {
            routes.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}",
                constraints: new { controller = mvcReactOptions.Value.ExcludeHmrPathsRegex });
        }
        else
        {
            routes.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        }
    });

    app.UseMvcReact();
}

Import tag helpers in _ViewImports.cshtml

@using MvcReact 
@addTagHelper *, MvcReact
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Use <react-scripts /> and <react-styles /> tag helpers to embed relavent tags in a page/view

@model SomeModel


@{
    ViewData["Title"] = "Page title";
}

<div id="react-app"></div>

@section Styles
{
    <react-styles />
}

@section Scripts
{
    <react-scripts />
}

Configuring Vite

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.

{
  "scripts": {
    "start": "npx kill-port 5173 && vite"
  }
}
Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
2.0.6 114 1/12/2024
1.0.1 1,270 5/25/2023