Shorthand.Vite 0.2.0

There is a newer prerelease version of this package available.
See the version list below for details.
dotnet add package Shorthand.Vite --version 0.2.0
NuGet\Install-Package Shorthand.Vite -Version 0.2.0
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="Shorthand.Vite" Version="0.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Shorthand.Vite --version 0.2.0
#r "nuget: Shorthand.Vite, 0.2.0"
#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 Shorthand.Vite as a Cake Addin
#addin nuget:?package=Shorthand.Vite&version=0.2.0

// Install Shorthand.Vite as a Cake Tool
#tool nuget:?package=Shorthand.Vite&version=0.2.0

Shorthand.Vite Build develop codecov

An easy way to reference Vite assets in ASP.NET Core projects.

Installation

> dotnet add package Shorthand.Vite

Usage

Basic setup

In your Startup.cs file, add the following to the ConfigureServices method:

public void ConfigureServices(IServiceCollection services) {
    services.AddVite();
}

Or if you use the modern setup with the Program.cs file:

builder.Services.AddVite();

Then in your vite.config.js file you need at least the following:

/* global __dirname */
import { defineConfig } from 'vite';
import { resolve } from 'node:path';

export default defineConfig({
  build: {
    outDir: resolve(__dirname, './wwwroot/'),
    manifest: true, // Generate a manifest.json file for production builds
    rollupOptions: {
      input: resolve(__dirname, './wwwroot/js/site.js') // Point this to your main entry point
    }
  },
  server: {
    strictPort: true // We don't want random ports
  }
});

Then open up your layout cshtmlfile and add the following at the top:

@using Shorthand.Vite.Contracts

@inject IViteService Vite

If you want to use this in several files you can put that in the _ViewImports.cshtml file instead.

Then in your head tag, add the following:

    <environment names="Production">
        @* Preload the module script, almost always a good idea *@
        <link rel="modulepreload" href="@await Vite.GetAssetUrlAsync("wwwroot/js/site.js")" as="script" />
        @* Load the stylesheet manually in production mode *@
        <link rel="stylesheet" href="@await Vite.GetAssetUrlAsync("style.css")" />
    </environment>

And at the bottom of your body tag, add the following:

    @* Load the main module script, during development this will also load the stylesheet *@
    <script type="module" src="@await Vite.GetAssetUrlAsync("wwwroot/js/site.js")"></script>

For a more complete example, see the sample project in the repository.

Configuration

There are a few options that can be configured if the default values are not suitable.

public void ConfigureServices(IServiceCollection services) {
    services.AddVite(options => {
        options.Hostname = "localhost";
        options.Port = 5173;
        options.Https = false;
    });
}

Sample site

There is a sample proejct in the repository that shows a sample setup with a simple Vite project and an ASP.NET Core project. It is located at src/Shorthand.Vite.SampleSite.

Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  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)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.
  • net7.0

    • No dependencies.

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
0.3.0-preview 74 9/12/2023
0.2.0 4,725 8/31/2023