{"id":19097488,"url":"https://github.com/melittleman/blazorvitedemo","last_synced_at":"2025-09-08T03:30:57.968Z","repository":{"id":238734865,"uuid":"797392596","full_name":"melittleman/BlazorViteDemo","owner":"melittleman","description":"An example .NET 8 Blazor Web project working with Vite build tooling.","archived":false,"fork":false,"pushed_at":"2024-08-16T07:32:44.000Z","size":31,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T14:12:46.284Z","etag":null,"topics":["blazor","build-tool","dotnet","vite"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/melittleman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-05-07T18:33:44.000Z","updated_at":"2025-03-06T14:57:26.000Z","dependencies_parsed_at":"2024-11-09T03:41:24.507Z","dependency_job_id":"8fcbee79-1569-444a-a19d-4850956f39df","html_url":"https://github.com/melittleman/BlazorViteDemo","commit_stats":null,"previous_names":["melittleman/blazorvitedemo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/melittleman/BlazorViteDemo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melittleman%2FBlazorViteDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melittleman%2FBlazorViteDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melittleman%2FBlazorViteDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melittleman%2FBlazorViteDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/melittleman","download_url":"https://codeload.github.com/melittleman/BlazorViteDemo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melittleman%2FBlazorViteDemo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274128130,"owners_count":25226950,"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","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["blazor","build-tool","dotnet","vite"],"created_at":"2024-11-09T03:41:14.551Z","updated_at":"2025-09-08T03:30:57.701Z","avatar_url":"https://github.com/melittleman.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BlazorViteDemo\n\u003e An example .NET 8 Blazor Web project working with Vite build tooling\n\n## Getting Started\nThe .NET workflow with [Vite](https://vitejs.dev/) is outstanding. It provides a much more modern and faster development experience than when using Webpack. \nIf you're interested in how to set up a new .NET project with Blazor and Vite, please follow the steps below and use this repository as a reference.\n\n### Install NPM Packages\n1. Run `npm init -y` to scaffold the default `package.json` at the root of the Web project.\n2. `npm install vite --save-dev`\n3. `npm install vite-plugin-mkcert --save-dev`\n4. `npm install sass@npm:sass-embedded@latest --save-dev`\n     \u003e Note that this is currently using an NPM alias for 'sass', but Vite intends to support the 'sass-embedded' package directly in the future as it is much faster. \n     \u003e See: https://github.com/vitejs/vite/issues/6734\n5. `npm install bootstrap --save`\n\n### Install .NET Packages\n* Run `dotnet add package Vite.AspNetCore` at the root of the Web project.\n\n### Creating Vite Config\n1. Using your desired text editor _(hint: you can use `code .` to open VS Code at the current directory)_, open the directory and create a `vite.config.js` file at the root of the Web project.\n2. Save the following configuration into this newly created file:\n\n    ```javascript\n    import { defineConfig } from \"vite\";\n    import mkcert from \"vite-plugin-mkcert\";\n    import path from \"path\";\n\n    import { Vite } from \"./appsettings.Development.json\";\n\n    export default defineConfig({\n        appType: \"custom\",\n        root: \"Client\",\n        plugins: [ mkcert() ],\n        resolve: {\n            alias: { \"~\": __dirname }\n        },\n        build: {\n            manifest: true,\n            emptyOutDir: true,\n            outDir: path.join(__dirname, \"wwwroot\"),\n            assetsDir: \"\",\n            rollupOptions: {\n                input: [ \n                    path.join(__dirname, \"Client\", \"scripts\", \"app.js\"), \n                    path.join(__dirname, \"Client\", \"styles\", \"app.scss\")\n                ],\n                output: {\n                    entryFileNames: \"js/[name]-[hash].bundle.min.js\",\n                    chunkFileNames: \"js/[name]-[hash].chunk.min.js\",\n                    assetFileNames: (info) =\u003e {\n                        if (info.name) {\n\n                            // If the file is a CSS file, save it to the \"css\" folder\n                            if (/\\.css$/.test(info.name)) {\n                                return \"css/[name]-[hash].bundle.min.[ext]\";\n                            }\n\n                            // If the file is an image file, save it to the \"img\" folder\n                            if (/\\.(png|jpe?g|gif|svg|webp|avif)$/.test(info.name)) {\n                                return \"img/[name][extname]\";\n                            }\n\n                            // If the file is any other type of file, save it to the \"assets\" folder \n                            return \"assets/[name][extname]\";\n                        } else {\n\n                            // If the file name is not specified, save it to the output directory\n                            return \"[name][extname]\";\n                        }\n                    },\n                    manualChunks: (id) =\u003e {\n                        if (id.includes('node_modules')) {\n                            return 'lib';\n                        }\n                    }\n                }\n            }\n        },\n        server: {\n            port: Vite.Server.Port,\n            strictPort: true,\n            hmr: {\n                host: \"localhost\",\n                clientPort: Vite.Server.Port\n            }\n        }\n    });\n    ```\n\n3. Add the following 'Vite' section to the `appsettings.Development.json` file, so that it looks like the below:\n\n    ```json\n    {\n        \"Logging\": {\n            \"LogLevel\": {\n            \"Default\": \"Information\",\n            \"Microsoft.AspNetCore\": \"Warning\"\n            }\n        },\n        \"Vite\": {\n            \"Server\": {\n            \"Enabled\": true,\n            \"Port\": 5173,\n            \"Https\": true,\n            \"AutoRun\": true\n            }\n        }\n    }\n    ```\n\n4. Create a new directory at the project root called 'Client' e.g. `mkdir Client`.\n5. Inside there, create 3 more directories to be used as input for the Vite build: `public`, `scripts` and `styles`.\n6. Lastly create an `app.js` file inside of `Client/scripts/` and an `app.scss` file inside of `Client/styles/` to be used for the Javascript and CSS respectively. _Note that the 'public' directory will be used for static assets such as the favicon that need to be copied to the output with no compilation or build process applied_.\n\n### Using Vite With .NET\nWe already installed the `Vite.AspNetCore` package earlier which does most of the heavy lifting, but there is a final piece of configuration needed for everything to work.\n\n1. Add the following NPM scripts to the `package.json` file:\n\n    ```json\n    \"start\": \"echo Starting the development server \u0026\u0026 vite\",\n    \"dev\": \"vite\",\n    \"build\": \"vite build --mode development\",\n    \"publish\": \"vite build --mode production\"\n    ```\n\n2. Open the `wwwroot` directory and copy the contents of `app.css` into our new `app.scss` file. \n3. Delete the default bootstrap folder and add the line `@import \"bootstrap/scss/bootstrap\";` to the top of `app.scss`.\n3. Copy the `favicon.png` to the `Client/public/` directory.\n4. Add the following to the top of the `Program.cs` file:\n\n    ```csharp\n    using Vite.AspNetCore;\n\n    //...omitted for brevity\n\n    // Add the Vite manifest integration.\n    builder.Services.AddViteServices();\n    ```\n\n5. Add the following to the bottom of the `Program.cs` file:\n\n    ```csharp\n    if (app.Environment.IsDevelopment())\n    {\n        if (bool.Parse(builder.Configuration[\"Vite:Server:Enabled\"] ?? string.Empty)) \n        {\n            // Proxies requests for css and js to \n            // the Vite development server for HMR.\n            app.UseViteDevelopmentServer(true);\n        }\n    }\n    ```\n\n5. Finally, update the `App.razor` component to use the new script and style assets provided via Vite by placing the following within the `\u003chead\u003e` tags:\n\n    ```csharp\n    @using Vite.AspNetCore\n\n    @inject IWebHostEnvironment env\n    @inject IViteManifest manifest\n    @inject IViteDevServerStatus vite\n\n    //...omitted for brevity\n\n    @if (env.IsDevelopment() \u0026\u0026 vite.IsMiddlewareEnable)\n    {\n        \u003cscript type=\"module\" src=\"@@vite/client\"\u003e\u003c/script\u003e\n        \u003cscript type=\"module\" src=\"scripts/app.js\" defer\u003e\u003c/script\u003e\n\n        /** Note that this .scss is correct as it's purely acting as a 'key' \n        to the real css file being held in the Vite server memory. **/\n        \u003clink rel=\"stylesheet\" href=\"styles/app.scss\" /\u003e\n    }\n    else \n    {\n        IViteChunk? js = manifest[\"scripts/app.js\"];\n        if (js is not null) \n        {\n            \u003cscript type=\"module\" src=\"@js.File\" defer\u003e\u003c/script\u003e\n\n            if (js.Imports is not null) \n            {\n                foreach (string import in js.Imports) \n                {\n                    if (manifest.ContainsKey(import) is false) continue;\n\n                    \u003cscript type=\"module\" src=\"@manifest[import]!.File\" defer\u003e\u003c/script\u003e\n                }\n            }\n        }\n\n        IViteChunk? css = manifest[\"styles/app.scss\"];\n        if (css is not null)\n        {\n            \u003clink rel=\"stylesheet\" href=\"@css.File\" /\u003e\n        }\n    }\n    ```\n\n6. Test by running `npm run build` to ensure that Vite successfully built and output the js and css files into the `wwwroot` directory.\n7. You can now run `dotnet watch run` to run the application and see the Hot Reload in action after making a change to the scripts or styles.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelittleman%2Fblazorvitedemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelittleman%2Fblazorvitedemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelittleman%2Fblazorvitedemo/lists"}