{"id":13593888,"url":"https://github.com/Eptagone/Vite.AspNetCore","last_synced_at":"2025-04-09T05:32:28.904Z","repository":{"id":112607131,"uuid":"589442586","full_name":"Eptagone/Vite.AspNetCore","owner":"Eptagone","description":"Small library to integrate Vite into ASP.NET projects","archived":false,"fork":false,"pushed_at":"2025-04-06T16:32:38.000Z","size":721,"stargazers_count":308,"open_issues_count":24,"forks_count":38,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-06T17:30:36.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Eptagone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-16T05:50:35.000Z","updated_at":"2025-04-06T16:31:40.000Z","dependencies_parsed_at":"2023-03-14T12:30:58.377Z","dependency_job_id":"37763ec4-84f8-41f5-80bc-5c309185b139","html_url":"https://github.com/Eptagone/Vite.AspNetCore","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eptagone%2FVite.AspNetCore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eptagone%2FVite.AspNetCore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eptagone%2FVite.AspNetCore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eptagone%2FVite.AspNetCore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Eptagone","download_url":"https://codeload.github.com/Eptagone/Vite.AspNetCore/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987023,"owners_count":21028890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T16:01:25.897Z","updated_at":"2025-04-09T05:32:28.877Z","avatar_url":"https://github.com/Eptagone.png","language":"C#","funding_links":[],"categories":["C#","C\\#","Integrations with Backends"],"sub_categories":["ASP.NET Core"],"readme":"# Vite.AspNetCore\n\n[![NuGet version (Vite.AspNetCore)](https://img.shields.io/nuget/v/Vite.AspNetCore.svg?style=flat-square\u0026color=rgba(189,52,254,1))](https://www.nuget.org/packages/Vite.AspNetCore/)\n\nThis library offers integration with [ViteJS](https://vitejs.dev/) to be used in ASP.NET applications. It's made to work mainly with MPA (Multi-Page Application).\n\nThe library is compatible with:\n\n- MVC\n- Razor Pages\n- Blazor Server\n\n## Features\n\nThis library has the following simple but very useful features:\n\n- A Middleware to forward the requests to the Vite Development Server\n- A service to access the Vite manifest.\n- Tag Helpers for script and link tags.\n- Start the Vite Development Server for you ❤️.\n\n## Setup\n\nInstall the package from NuGet.\n\n```PowerShell\ndotnet add package Vite.AspNetCore\n```\n\nAdd the following lines to your `Program.cs` or `Startup` class.\n\n```CSharp\nusing Vite.AspNetCore;\n\n// ---- Service Configuration ----\n// Add Vite services.\nbuilder.Services.AddViteServices();\n\n// ---- App Configuration ----\n// Use the Vite Development Server when the environment is Development.\nif (app.Environment.IsDevelopment())\n{\n    // WebSockets support is required for HMR (hot module reload).\n    // Uncomment the following line if your pipeline doesn't contain it.\n    // app.UseWebSockets();\n    // Enable all required features to use the Vite Development Server.\n    // Pass true if you want to use the integrated middleware.\n    app.UseViteDevelopmentServer(/* false */);\n}\n```\n\n## Usage\n\n### The Vite Middleware\n\nThe [common way](https://vitejs.dev/guide/backend-integration.html) to access **Vite Development Server** assets in your application is by using the following template, specifying the local URL where Vite Server is running.\n\n```HTML\n\u003c!-- Entry point for development --\u003e\n\u003cenvironment include=\"Development\"\u003e\n    \u003cscript type=\"module\" src=\"http://localhost:5173/@@vite/client\"\u003e\u003c/script\u003e\n    \u003cscript type=\"module\" src=\"http://localhost:5173/main.js\"\u003e\u003c/script\u003e\n\u003c/environment\u003e\n\u003c!-- Public assets --\u003e\n\u003cenvironment exclude=\"Development\"\u003e\n    \u003cimg src=\"http://localhost:5173/assets/logo.svg\" alt=\"Vite Logo\" /\u003e\n\u003c/environment\u003e\n\u003cenvironment include=\"Production\"\u003e\n    \u003cimg src=\"~/assets/logo.svg\" alt=\"Vite Logo\" /\u003e\n\u003c/environment\u003e\n```\n\nHaving to set up two ways to access public assets in different environments doesn't look very good. It can also be a problem in some circumstances. Service workers, for example, cannot be properly tested this way and if you are using preprocessors like SASS, you have probably noticed that your 'url()'s are not resolved correctly during development. But don't worry, this middleware will solve all those problems for you.\n\nBy using the vite middleware during development, you don't need to pass the development server URL. You can use aspnet paths as usual.\n\n```HTML\n\u003c!-- Entry point for development --\u003e\n\u003cenvironment include=\"Development\"\u003e\n    \u003c!-- It's mandatory to use the full url for the Vite client script. --\u003e\n    \u003cscript type=\"module\" src=\"http://localhost:5173/@@vite/client\"\u003e\u003c/script\u003e\n    \u003cscript type=\"module\" src=\"~/main.js\"\u003e\u003c/script\u003e\n\u003c/environment\u003e\n\n\u003c!-- Public assets --\u003e\n\u003cimg src=\"~/assets/logo.svg\" alt=\"Vite Logo\" /\u003e\n```\n\nThe middleware will proxy all requests to the Vite Development Server. You won't need alternative paths for images or other resources from your public assets. 🙀🙀🙀\n\nTo enable the middleware, pass `true` to the `UseViteDevelopmentServer()` method.\n\n\u003e **Note:** The order of the middlewares is important! Put the `UseViteDevelopmentServer(true)` call in a position according to your needs. Otherwise, your assets will not be served as expected.\n\n### The Vite Manifest\n\nThe Vite Manifest is a JSON file that contains the mapping between the original file names and the hashed names. This is useful to access the files in production environments.\n\nBy using the Vite Manifest service, you can access the manifest in your application by injecting the `IViteManifest` service. See the following example.\n\n```HTML\n@inject IViteManifest Manifest\n\n\u003cenvironment include=\"Development\"\u003e\n    \u003c!-- Vite development server script --\u003e\n    \u003cscript type=\"module\" src=\"http://localhost:5173/@@vite/client\"\u003e\u003c/script\u003e\n    \u003cscript type=\"module\" src=\"~/main.ts\"\u003e\u003c/script\u003e\n\u003c/environment\u003e\n\u003cenvironment include=\"Production\"\u003e\n    \u003cscript type=\"module\" src=\"~/@Manifest[\"main.ts\"]!.File\" asp-append-version=\"true\"\u003e\u003c/script\u003e\n\u003c/environment\u003e\n```\n\nYou can also inject the manifest service in your controllers or services. See the following example.\n\n```CSharp\npublic class HomeController : Controller\n{\n    private readonly IViteManifest _manifest;\n\n    public HomeController(IViteManifest manifest)\n    {\n        _manifest = manifest;\n    }\n\n    public IActionResult Index()\n    {\n        var mainFile = _manifest[\"main.ts\"]?.File;\n        return View();\n    }\n}\n```\n\n### Tag Helpers\n\nDo you want to render your entrypoint scripts and styles in the simplest way possible? You can use the special tag helpers provided by this library. First, add the following line to your `_ViewImports.cshtml` file.\n\n```CSHTML\n@addTagHelper *, Vite.AspNetCore\n```\n\nNow you can use the `vite-src` and `vite-href` attributes in your scripts and links. See the following example.\n\n```HTML\n\u003c!-- This line includes your styles entrypoints --\u003e\n\u003clink rel=\"stylesheet\" vite-href=\"~/main.ts\" /\u003e\n\n\u003c!-- This line includes your \"main.ts\" and \"secondary.ts\" entrypoints --\u003e\n\u003cscript type=\"module\" vite-src=\"~/main.ts\" asp-append-version=\"true\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" vite-src=\"~/secondary.ts\"\u003e\u003c/script\u003e\n```\n\nThis tag helpers will do the following magic according the state of the Vite Development Server (VDS).\n\n- VDS is enabled:\n  - If the link tag is a script (you want to include css from a script entrypoint), the link tag will just disappear. This is because Vite loads the styles automatically by including the script.\n  - If the script of the Vite client is not included, it will be added automatically.\n- VDS is disabled:\n  - The link and script tags will be rendered using the original paths taken from the manifest. The value of the `vite-href` and `vite-src` attributes will be used as the entrypoint to access the manifest.\n\nThe rendered HTML when the VDS is enabled will look like this.\n\n```HTML\n\u003c!-- This line includes your styles entrypoints --\u003e\n\n\u003c!-- This line includes your \"main.ts\" and \"secondary.ts\" entrypoints --\u003e\n\u003cscript type=\"module\" src=\"http://localhost:5173/@vite/client\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" src=\"http://localhost:5173/main.ts\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" src=\"http://localhost:5173/secondary.ts\"\u003e\u003c/script\u003e\n```\n\nAnd the rendered HTML when the VDS is disabled will look like this.\n\n```HTML\n\u003c!-- This line includes your styles entrypoints --\u003e\n\u003clink rel=\"stylesheet\" href=\"/css/main.css\" /\u003e\n\n\u003c!-- This line includes your \"main.ts\" and \"secondary.ts\" entrypoints --\u003e\n\u003cscript type=\"module\" src=\"/js/main.js?v=bosLkDB4bJV3qdsFksYZdubiZvMYj_vuJXBs3vz-nc0\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" src=\"/js/secondary.js\"\u003e\u003c/script\u003e\n```\n\n\u003e **Note:** The final paths and filenames depend on how you set it in your `vite.config.ts` file.\n\n## Configuration\n\nThe services can be configured by passing options to the `AddViteServices()` function, using environment variables, user secrets, or your `appsettings.json` file.\n\nPassing the options to the `AddViteServices()` function is as simple as you can see in the following example:\n\n```CSharp\n// Program.cs\nusing Vite.AspNetCore;\n\n// ...\n// Add the Vite services.\nbuilder.Services.AddViteServices(options =\u003e\n{\n    // By default, the manifest file name is \".vite/manifest.json\". If your manifest file has a different name, you can change it here.\n    options.Manifest = \"my-manifest.json\",\n    // More options...\n});\n/// ...\n```\n\nIf you prefer not to hardcode the options, you can use environment variables or user secrets. I suggest using `appsettings.json` and/or `appsettings.Development.json` files to share the default configuration with other developers. This information is not sensitive, so it's safe to share it.\n\n```JSONC\n// appsettings.json\n{\n    \"Vite\": {\n        \"Manifest\": \"my-manifest.json\"\n    }\n}\n```\n\n```JSONC\n// appsettings.Development.json\n{\n    \"Vite\": {\n        \"Server\": {\n            // Enable the automatic start of the Vite Development Server. The default value is false.\n            \"AutoRun\": true,\n            // The port where the Vite Development Server will be running. The default value is 5173.\n            \"Port\": 5174,\n            // Pass true, if you are using HTTPS to connect to the Vite Development Server. The default value is false.\n            \"Https\": false,\n        }\n    }\n}\n```\n\n\u003e In the previous example, i used the `appsettings.json` and `appsettings.Development.json` files to keep the configurations for each environment separated. But you can use only one file if you prefer.\n\n\u003e Config mechanisms are exclusive to each other and can't be mixed. Service configuration has priority load over Environment Variable configuration.\n\n### Available Options\n\nThere are more options that you can change. All the available options are listed below. ⚙️\n\n| Property                  | Description                                                                                                          |\n| ------------------------- | -------------------------------------------------------------------------------------------------------------------- |\n| `Manifest`                | The manifest file name. Default is `.vite/manifest.json` (Vite 5) or `manifest.json` (Vite 4).                       |\n| `Base`                    | The subfolder where your assets will be located, including the manifest file, relative to the web root path.         |\n| `Server:Port`             | The port where the Vite Development Server will be running according to your configuration. Default value is `5173`. |\n| `Server:Host`             | The host where the Vite Dev Server will be running according to your configuration. Default value is `localhost`.    |\n| `Server:TimeOut`          | The timeout in seconds spent waiting for the vite dev server. Default is `5`                                         |\n| `Server:Https`            | Set true, if you are using HTTPS to connect to the Vite Development Server. Default value is `false`.                |\n| `Server:UseReactRefresh`  | If true, the react-refresh script will be injected before the vite client.                                           |\n| `Server:AutoRun`          | Enable or disable the automatic start of the Vite Dev Server. Default value is `false`.                              |\n| `Server:PackageManager`   | The name of the package manager to use. Default value is `npm`.                                                      |\n| `Server:PackageDirectory` | The directory where the package.json file is located. Default value is the .NET project working directory.           |\n| `Server:ScriptName`       | The script name to run the Vite Development Server. Default value is `dev`.                                          |\n| `Server:ScriptArgs`       | If specified, the script will be run with the specified arguments. Example: `npm run dev -- [ARGS]`                  |\n\n\u003e If you are using the `appsettings.json` and/or `appsettings.Development.json` files, all the options must be under the `Vite` property.\n\n## Examples\n\nDo you want to see how to use this library in a real project? Take a look at [these examples](https://github.com/Eptagone/Vite.AspNetCore/tree/main/examples)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEptagone%2FVite.AspNetCore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FEptagone%2FVite.AspNetCore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEptagone%2FVite.AspNetCore/lists"}