AspNet.Frontend.Templates 1.2.0

AspNet.Frontend.Templates

dotnet new templates for ASP.NET Core MVC and Razor Pages with Vite or Webpack. Each template is the standard ASP.NET Core template with its frontend moved to a modern bundler: per-view bundles, hot reload in development, and hashed assets in production.

dotnet new install AspNet.Frontend.Templates
dotnet new mvcvite -o MyApp

Templates

All templates target .NET 10 and include Bootstrap, jQuery and jQuery Validation, like the standard templates.

Requirements

• .NET 10 SDK
• Node.js 22.15 or later

Quick start

dotnet new install AspNet.Frontend.Templates
dotnet new mvcvite -o MyApp
cd MyApp
npm install
npm start      # starts the Vite or Webpack dev server
dotnet run     # in a second terminal

npm start runs the dev server with hot reload (Vite on port 5173, Webpack on port 9000). npm run build writes production assets to wwwroot/dist.

How it works

The templates use two packages that work together:

• aspnet-buildtools configures Vite or Webpack: it creates an entry point for each view that has a script file next to it.
• AspNet.AssetManager reads the bundler's manifest and renders the <script> and <link> tags in your views, from the dev server in development and from wwwroot/dist in production.

Bundles

• _Layout.cshtml renders the bundle for the current view, and falls back to the Layout bundle if the view has none:

  <link-bundle fallback="Layout" />
  <script-bundle fallback="Layout" />
  

• Partial views (_*.cshtml) and view components do not get bundles.

• The ValidationScripts bundle contains jQuery Validation. Add <script-bundle name="ValidationScripts" /> to pages with forms.

Import aliases

• @/ resolves to the project root, e.g. import '@/Assets/css/site.css'.
• In the JavaScript templates, each area also gets an alias automatically: @<Area>/ resolves to Areas/<Area>/.

Areas with TypeScript

In the TypeScript templates, aliases are defined in paths in tsconfig.json, which only has @/. If you add an area, add an alias for it:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"],
      "@Admin/*": ["./Areas/Admin/*"]
    }
  }
}

TypeScript needs this to type-check the import. The Webpack TypeScript templates also use paths to resolve imports.

Examples

Example projects with more configuration:

• Example.Mvc.Vite: TypeScript, Sass and a view-specific bundle.
• Example.Mvc.Webpack: TypeScript, Sass, a view-specific bundle and a separate Vendor bundle for node_modules.

Notes

• Webpack: restart the dev server after adding a new entry point.
• Vite: in development, CSS is injected by JavaScript, so pages briefly render without styles. Production builds use normal <link> tags.

Developing the templates

./build.sh            # builds every template and its frontend, then packs the NuGet package

scripts/install.sh packs the templates from source and installs them locally. Run it from the scripts folder.

License

MIT